Інтеграція оптимізацій 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`
            &enable=`true`
            &integrity=`sha256`
            &lifetime=`604800`
            &loading=`lazy`
            &minify=`html link script`
            &path=`{assets_path}PageSpeed/`
            &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" : "" }
                ]
            }`
            &url=`{url_scheme}{http_host}{assets_url}PageSpeed/`
        ]]
    

Параметри:

bundle
Не обов'язковий. За замовчуванням link script. Визначає типи контенту, що будуть зв'язані в один файл. Не чутливий до регістру. Можливі значення: link, script, будь-яка їх комбінація або порожнє значення.
  • link - CSS файли.
  • script - JS файли.
convert
Не обов'язковий. За замовчуванням static. Відповідає за конвертування gif, jpg та png зображень у формат webp з вказаною якістю. Не чутливий до регістру. Можливі значення: disable, dynamic, static.
  • disable - зображення не конвертуються.
  • dynamic - зображення не зберігаються у кеш після конвертації. Потребує більше ресурсів CPU.
  • persistent - зображення зберігаються поряд оригінальними файлами та не видаляються під час очищення кешу. Потребує більше вільного місця.
  • static - зображення зберігаються у кеш після конвертації. Потребує більше вільного місця.
critical
Не обов'язковий. За замовчуванням true. Відповідає за генератор критичних стилів. Інтерпретується як boolean.
crossorigin
Не обов'язковий. За замовчуванням anonymous. Значення атрибуту сrossorigin для усіх ресурсів. Не чутливий до регістру. Можливі значення: anonymous, use-credentials, або порожнє значення.
display
Не обов'язковий. За замовчуванням swap. Значення CSS властивості font-display. Не чутливий до регістру. Можливі значення: auto, block, fallback, optional, swap.
enable
Не обов'язковий. За замовчуванням true. Відповідає за роботу додатку. Інтерпретується як boolean.
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 файли.
path
Не обов'язковий. За замовчуванням {assets_path}PageSpeed/. Шлях директорії кешу. Може бути очищений, якщо вказаний у Системних параметрах, Налаштуваннях контексту, Налаштуваннях групи користувачів або у Налаштуваннях користувача.
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, якщо не вказані.
url
Не обов'язковий. За замовчуванням {url_scheme}{http_host}{assets_url}PageSpeed/. URL директорії кешу.

Приклади:

Остання версія 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.

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

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

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

Цей додаток використовує php-mimetyper, PHP CSS Parser та Minify.