Інтеграція оптимізацій 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`
            &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/`
        ]]
    

Параметри:

Приклади:

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

Будь-яку HTML розмітку можна ігнорувати, використовуючи умовні коментарі:

    
        <!--ignore-->
            <link rel="preload" href="style.css" as="style" />
            
            <style>
                html {
                    color : [[+color]];
                }
            </style>
            
            <script>
                console.log( '[[+id]]' );
            </script>
            
            <script src="script.js"></script>
            
            <img src="image.png" alt="image" />
        <!--/ignore-->
    

Примітки:

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

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

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

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

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