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

Опис:

Цей додаток призначений для полегшення інтеграції оптимізацій 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.

Режими:

Синтаксис:

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

    
        [[!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" : "" }
                ]
            }`
        ]]
    

Параметри:

Приклади:

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

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

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