Інтеграція оптимізацій PageSpeed Insights для MODX Revolution

Опис:

PageSpeed

Цей додаток призначений для полегшення інтеграції оптимізацій PageSpeed Insights для MODX Revolution. Він може:

  • Працювати в автоматичному режимі, якщо достатньо стандартної конфігурації.
  • Конвертувати gif, jpg та png зображення у формат webp, якщо браузер його підтримує, з кешуванням або без. Регулювати розміри та якість відконвертованих зображень.
  • Генерувати критичні правила стилів, виявляти та попередньо завантажувати шрифти.
  • Додавати властивість font-display до декларацій @font-face.
  • Встановлювати атрибут crossorigin та обчислювати хеші SRI.
  • Водночас працювати з декількома конфігураціями, ефективно використовуючи кеш.
  • Застосовувати нативне ліниве завантаження для елементів img та iframe.
  • Мініфіковувати стилі, скрипти, JSON та HTML контент.
  • Додавати атрибут defer або async до тегів script.
  • Отримувати ресурси строінки через API cdnjs.com та завантажувати шрифти Google Fonts.
  • Обробляти теги meta та link з атрибутами http-equiv та preconnect.
  • Виводити спеціалізовані теги MODX у консоль браузера для членів групи Administrator.

Ви можете придбати цей додаток у Modstore.

Режими:

Автоматичний
Коли опція subresources не задана, плагін шукає ресурси у HTML та обробляє їх.
Ручний
Обробляються лише ресурси з опції subresources.

Синтаксис:

Це не приклад робочої конфігураціх, а огляд усіх доступних параметрів.

    
        [[!PageSpeed?
            &bundle=`link script`
            &convert=`static`
            &critical=`true`
            &crossorigin=`anonymous`
            &display=`swap`
            &integrity=`sha256`
            &lifetime=`604800`
            &loading=`lazy`
            &minify=`html link script`
            &quality=`80`
            &resize=`true`
            &script=`defer`
            &subresources=`{
                "link" : [
                    { "name" : "", "version" : "", "filename" : "", "crossorigin" : "", "integrity" : "", media" : "" },
                    { "url" : "", "crossorigin" : "", "integrity" : "", media" : "" }
                ],
                "script" : [
                    { "name" : "", "version" : "", "filename" : "", "async" : "", "crossorigin" : "", "defer" : "", "integrity" : "", "nomodule" : "" },
                    { "url" : "", "async" : "", "crossorigin" : "", "defer" : "", "integrity" : "", "nomodule" : "" }
                ]
            }`
        ]]
    

Параметри:

bundle
Не обов'язковий. За замовчуванням link script. Визначає типи контенту, що будуть зв'язані в один файл. Не чутливий до регістру. Можливі значення: link, script, будь-яка їх комбінація або порожнє значення.
  • link - CSS файли.
  • script - JS файли.
convert
Не обов'язковий. За замовчуванням static. Відповідає за конвертування gif, jpg та png зображень у формат webp з вказаною якістю. Не чутливий до регістру. Можливі значення: disable, dynamic, static.
  • disable - зображення не конвертуються.
  • dynamic - зображення не зберігаються у кеш після конвертації. Витрачає більше ресурсів CPU.
  • static - зображення зберігаються у кеш після конвертації. Витрачає більше вільного місця під кеш.
critical
Не обов'язковий. За замовчуванням true. Відповідає за генератор критичних стилів. Інтерпретується як boolean.
crossorigin
Не обов'язковий. За замовчуванням anonymous. Значення атрибуту сrossorigin для усіх ресурсів. Не чутливий до регістру. Можливі значення: anonymous, use-credentials, або порожнє значення.
display
Не обов'язковий. За замовчуванням swap. Значення CSS властивості font-display. Не чутливий до регістру. Можливі значення: auto, block, swap, fallback, optional.
integrity
Не обов'язковий. За замовчуванням sha256. Алгоритм, що буде використано для обчислення хешу контролю цілісності ресурсів. Не чутливий до регістру. Можливі значення: sha256, sha384, sha512, будь-яка їх комбінація або порожнє значення.
lifetime
Не обов'язковий. За замовчуванням 604800. Термін дії кешу ресурсів.
loading
Не обов'язковий. За замовчуванням lazy. Значення атрибуту loading для тегів img та iframe. Не чутливий до регістру. Можливі значення: auto, eager, lazy.
minify
Не обов'язковий. За замовчуванням html link script. Визначає типи контенту, що будуть мініфіковані. Не чутливий до регістру. Можливі значення: css, html, js, json, link, script, будь-яка їх комбінація або порожнє значення.
  • css - inline CSS.
  • html - HTML контент.
  • js - inline JS.
  • json - inline JSON та JSON+LD мікродані.
  • link - CSS файли.
  • script - JS файли.
quality
Не обов'язковий. За замовчуванням 80. Якість відконвертованих webp зображень. Можливі значення: цілі числа від 0 до 100.
resize
Не обов'язковий. За замовчуванням true. Відповідає за зміну розміру зображень у тегах img. Інтерпретується як boolean.
script
Не обов'язковий. За замовчуванням defer. Атрибут, що буде використано для тегів script. Не чутливий до регістру. Можливі значення: async, defer, або порожнє значення.
subresources
Не обов'язковий. За замовчуванням створюється автоматично. JSON-об'єкт, що містить інформацію про ресурсі, їх версії та файли. Або URL або параметр name для cdnjs.com API є обов'язковим, в той час як значення атрибуту media можна не вказувати. Для cdnjs.com API інші властивості заміняються відповідними за замовчуванням з API, якщо не вказані.

Приклади:

Остання версія jQuery з щоденним оновленням з jsdelivr.net та атрибутом async для усіх тегів script:

    
        [[!PageSpeed?
            &lifetime=`86400`
            &script=`async`
            &subresources=`{
                "script" : [
                    { "url" : "https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js" }
                ]
            }`
        ]]
    

Остання версія Bootstrap з щотижневим оновленням з cdnjs.com та атрибутом defer для усіх тегів script:

    
        [[!PageSpeed?
            &subresources=`{
                "link" : [
                    { "name" : "twitter-bootstrap", "filename" : "css/bootstrap.min.css" }
                ],
                "script" : [
                    { "name" : "jquery" },
                    { "name" : "popper.js", "filename" : "umd/popper.min.js" },
                    { "name" : "twitter-bootstrap" }
                ]
            }`
        ]]
    

Додати довільний inline стиль або скрипт можна за допомогою PHx. Зауважте, що це спричинить створення нового екземпляру конфігурації, якщо дані відрізнятимуться при завантаженні сторінки. Не використовуйте цей метод для коду третіх сторін, таких як Google Analytics:

    
        [[+phx:input=`data:text/css,
            html {
                color : [[+color]];
            }
        `:cssToHead]]

        [[+phx:input=`data:text/javascript,
            console.log( '[[+id]]' );
        `:jsToHead]]

        [[+phx:input=`data:text/javascript,
        	if( typeof performance === 'object' )
        		performance.mark( '[[++site_name]]' );
        `:jsToBottom]]
    

Примітки:

Автоматичний режим не може і не буде самостійно працювати на будь-якій конфігурації MODX.

Кеш можна очистити вручну у меню Управління / Очистити кеш / PageSpeed.

Для AjaxForm необхідно додати наступні скрипти після jQuery. Цей приклад для автоматичного режиму:

    
        <script src="[[++assets_url]]components/ajaxform/js/lib/jquery.form.min.js"></script>
        <script src="[[++assets_url]]components/ajaxform/js/lib/jquery.jgrowl.min.js"></script>
    

Для ручного режиму їх потрібно додати до секції script параметру subresources.

Обробка анімованих gif зображень можлива після встановлення додатку Image Processing (ImageMagick) для PHP.

Одночасному виконанню можливо запобігти встановленням додатку Semaphore, Shared Memory and IPC для PHP.

Цей додаток використовує бібліотеку Minify.