Интеграция оптимизаций 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.

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

Одновременное выполнение возможно предотвратить установив дополнение Semaphore, Shared Memory and IPC для PHP.

Это дополнение использует php-mimetyper, PHP CSS Parser и Minify.