Integrates PageSpeed Insights optimization into MODX Revolution

Description:

This extra is designed for easier integration of PageSpeed Insights optimization for MODX Revolution. It can:

• Operate in automatic mode, if default configuration properties are enough.
• Convert gif, jpg and png images to webp format, if browser supports it, with or without caching. Adjust converted image size and quality.
• Preload subresources and generate critical path CSS rules.
• Add font-display property to @font-face declarations.
• Set crossorigin attribute and compute SRI hashes.
• Manage and efficiently cache multiple configurations at once.
• Apply native lazy loading for img and iframe elements.
• Minify styles, scripts, JSON and HTML content.
• Add defer or async attribute to script tags.
• Handle subresources via cdnjs.com API and download Google Fonts.
• Process meta and link tags with http-equiv and preconnect attributes.
• Output MODX timing tags to browser console for members of Administrator user group.

You can buy this extra on Modstore.

Modes:

Syntax:

This is not a working configuration example, but an overview of all available properties.

    
        [[!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/`
        ]]
    

Script properties:

Examples:

Most recent jQuery with daily updates from jsdelivr.net and async attribute for script tags:

    
        [[!PageSpeed?
            &lifetime=`86400`
            &script=`async`
            &subresources=`{
                "script" : [
                    { "url" : "https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js" }
                ]
            }`
        ]]
    

Most recent Bootstrap with weekly updates from cdnjs.com and defer attribute for script tags:

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

Appending custom inline style or script can be done with PHx. Please note, that this will force the creation of new configuration instance, if data differs on page load. Do not use this for third-party code, like 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]]
    

Any HTML markup can be ignored by using conditional comments:

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

Notes:

Automatic mode can not and will not handle any MODX confiuration ever by itself.

Cache can be refreshed manually from Manage / Clear Cache / PageSpeed menu.

For manual configuration you should add them to script section of subresources property.

Animated gif image processing is possible after installing Image Processing (ImageMagick) PHP extension.

Simultaneous execution can be prevented by installing Semaphore, Shared Memory and IPC PHP extension.

This extra uses php-mimetyper, PHP CSS Parser and Minify.