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

Опис:

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

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

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

Режими:

Автоматичний

Коли опція subresources не задана, плагін шукає ресурси у HTML та обробляє їх.

Ручний

Обробляються лише ресурси з опції subresources.

Синтаксис:

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

Параметри:

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]]

Примітки:

Одночасному виконанню запобігає додаток System V Semaphores. Кеш можна очистити вручну у меню Управління / Очистити кеш / PageSpeed. Автоматичний режим не може і не буде самостійно працювати на будь-якій конфігурації MODX. Цей додаток використовує бібліотеку Minify.