Google PageSpeed Optimizer settings

The settings of the Google PageSpeed Optimizer is grouped into the following sections:

• Insight - section for checking the pagespeed of your website.
• JavaScript Optimization - settings for JavaScript optimization.
• CSS Optimization - settings for CSS optimization.
• Image Optimization - settings for images optimization.
• HTML Optimization - settings for HTML optimization.
• Other Optimization - additional optimization settings.

Insight

This configuration section was designed for checking the page speed rate of your website for desktop and mobile versions.
The Run GoogleSpeed Test is used to run a quick speed test for your website's home page.

• Configurations
  • URLs for monitoring - specify your website's URLs that need to be monitored when determining page speed performance, placing each URL in a new line.

JavaScript Optimization

• Enable JavaScript optimization - enable/disable JavaScript optimization for your website.
  Run bin/magento setup:static-content:deploy after saving the configurations.
• Defer YouTube videos - toggles the lazy loading of YouTube videos.
  If enabled, the extension will replace the YouTube videos with placeholder images linked to the original video on YouTube. Clicking the link will load the video player. This option reduces the amount of resources needed for the initial page load.
• Merge JavaScript files - enable/disable merge JS files. This config depends on the default Magento "Merge JavaScript files" config that is available only in developer mode (Stores - Configuration - Advanced - Developer - JavaScript Settings).
  If enabled, the extension will merge JavaScript files into one file to reduce the number of HTTP requests made by a browser during the page loading process.
  JavaScript bundling will not work when this option is enabled.
• Minify JavaScript - enable/disable minification JS files. This config depends on the default Magento "Minify JavaScript files" config that is available only in developer mode (Stores - Configuration - Advanced - Developer - JavaScript Settings).
  If enabled, the extension combines JavaScript files into bundles when required for particular page types, excluding unnecessary bundle files from the page depending on the page type.
  Run bin/magento setup:static-content:deploy after saving the configurations.
• Move JavaScript To Page Bottom - enable/disable moving JS files to the bottom of the page. How it works: Before the HTML page is sent to the browser, our module checks for all external JS resources (<script> tags) in the HTML code. Then the extension moves all identified resources to the bottom of the page, except for those who match any of the exceptions from the Ignore URL List config.
  Clear the Magento cache after this option has changed.

• Ignore URL List - the list of pages (URL patterns) where JS will not move. Or a list of JS files (patterns for SCRIPT tags) that should not be moved.
  For example:

  • to exclude pages like /category/page/*, the pattern should be: category/page
  • to exclude JS files, there should be an added pattern for the JS file name (if the JS file was added as an external resource, with the "src" attribute inside the SCRIPT tag), or part of the content inside the SCRIPT tag (if JS code was added directly to the page)

  Each pattern on the new line.

  Note

  If default Magento JS merging is enabled, some JS files will not be excluded from moving to the bottom of the page if merged into a single file.
  Before adding patterns for JS file names, please check to see if these files are present on the page.
  You can do this by searching in the source of the page. To open the source of your page in the browser, please press Ctrl + u (Windows) or ⌘ + Option + u (Mac).
• Lazyload iframes - loads the content embedded within iframes only if the iframes are visible in the browser's viewport.
• Iframe lazyload exceptions - Add the list of iframes excluded from lazy-loading here. Each pattern has to start from the new line.
  

  Note

  This field is available only if the Lazyload iframes option is enabled

CSS Optimization

• Merge CSS Files - enable/disable merge CSS files. This config depends on the default Magento "Merge CSS files" config that is available only in developer mode (Stores - Configuration - Advanced - Developer - CSS Settings).\ If enabled, the extension combines additional CSS files into a single file to reduce the number of HTTP requests.
  Run bin/magento setup:static-content:deploy after saving the configurations.
• Minify CSS Files - enable/disable minification CSS files. This config depends on the default Magento "Minify CSS files" config that is available only in developer mode (Stores - Configuration - Advanced - Developer - CSS Settings).
  If enabled, the extension reduces the size of CSS files.
  Run bin/magento setup:static-content:deploy after saving the configurations.
• Move CSS To Page Bottom - enable/disable moving CSS files to the bottom of the page. How it works: Before the HTML page is sent to the browser, our module checks for all external CSS resources (<link> tags) in the HTML code. Then the extension moves all identified resources to the bottom of the page, except for those who match any of the exceptions from the "Do not move CSS that contains" config.\
• Do not move CSS that contains - list of patterns for the page's link tags, which should not be moved to the bottom of the page. (Available only if the Move CSS To Page Bottom option is enabled).
• Preload CSS exception - if enabled, the extension will add link tags for CSS resources that match any exception from the Do not move CSS that contains field, with the rel="preload" attribute to force the browser to load those resources before the DOM is displayed in the browser.
  (Available only if the Move CSS To Page Bottom option is enabled).
• Add styles to HTML from CSS resourses - the list of CSS resources that are added directly to the HTML document.
  Each resource has to start from the new line.
• Defer Google Fonts - enable or disable a loading defer of Google Fonts. If enabled, the page will display the default fonts and then apply Google Fonts after they have been loaded.
• Additional CSS Styles - additional CSS styles that are added directly to the HTML document.
  

  Note

  This field is functionally identical to the Additional CSS Styles field in Stores -> Configuration -> Mirasvit Extensions -> Developer -> CSS Settings.

Image Optimization

The extension uses a set of tools in optimizing or converting images. Images get optimized in the pub/media folder.
To check the status of tools, please run the command: bin/magento mirasvit:optimize-image:validate

• Image Quality level - choose a percentage level of the picture compression (100% - without quality loss, 70% - acceptable to display on the site). This is applicable only for JPEG and GIF, and only compresses the original image (each new thread of compression will delete the previous one automatically). Compression can be done by cron or CLI command.
• Image optimization strategy - divided in two options: Filesystem - scans 1000 files per cronjob in the pub/media folder; Webpages - pictures are added to the optimization queue from the visited pages. There may be fewer pictures optimized in the queue, but it features the most important pictures from the site instead of everything in a row. Optimization is processed by cron.
• Use WebP images - enable or disable, using webp image types instead of default image types.
  Clear the Magento cache after this option has been changed.
• Image Lazy Load - allows the loading of images only if they appear in the browser's viewport. Affects images added with IMG tags and background images added through CSS classes (including background images added in the page builder). Does not work with background images added inside the "style" attribute.
  • Enable Lazy Load - enable or disable lazy loading of images.
    Clear the Magento cache after this option has been changed.
  • Preload first N images - the number of images which should be fully loaded when the page is still loading.
  • Preload first N background images - the number of background images which should be fully loaded when the page is still loading. Only affects backgound images added from the page builder.
  • Add 'fetchpriority="high"' attribute to preloaded images - If enabled, the extension will add attribute fetchpriority="high" to images, preloaded according to the config Preload first N images.
  • Do not use a lazy load for images - list of images for which lazyload should not be used. Each pattern is in the new line.
  • Lazyload background images by CSS classes - The list of CSS classes, related to background images that should be lazyloaded.
    Each name in the new line.

    Note

    Styles set for the class should not contain instructions for the size of the container to prevent possible layout shift.
    Examples:
    Good \

     .some-class-image {
         backgroud-image: url(...);
     }
     .some-class-size {
         height: 300px;
     }

    Bad \

     .some-class {
         backgroud-image: url(...);
         height: 300px;
     }

• Responsive Images - allows you to generate responsive images for mobile and desktop site versions.
  Resized images will automatically replace the original images once you flush the cache.
  WebP images for resized images will be generated by cron.
  The resized images can be loaded lazily as well.
  • Generate responsive images - generates resized images.

    Note

    Please make sure to save the configuration by clicking on Save Config before clicking this button.
  • Cleanup responsive images - removes all the previously-generated resized images, even if they have been removed from the configuration.
  • Config - configure the resized images.
    • File name - the file name pattern for the images that should be resized.
    • Desktop width - the width of the resized image on the desktop site version. If empty, the original image will be used.
    • Mobile width - the width of the resized image on the mobile site version. If empty, resized images will not be generated for this image.
      

      Note

      The module changes the height of resized images proportionally to their width.

HTML Optimization

• Minify HTML - enable or disable HTML document minification. If enabled, the extension reduces the size of the loading HTML file.
  Run bin/magento setup:static-content:deploy after saving the configurations.
• Preload recourses - preloads key resources.
  • To preload fonts that are hosted on your own site, add the font path starting with the slash after the domain extension, including query parameters.
    Example: /pub/static/version1600338479/frontend/Magento/luma/en_US/fonts/Luma-Icons.woff2
    The static content version will be resolved automatically.
  • To preconnect to resources with 3rd party origins, add the base URL of the origin with the preconnect:: suffix.
    This will instruct the browser to connect to the specified origin at the early stage of the page loading, which can decrease the time needed to fetch resources from that origin.
    Example: preconnect::https://maxcdn.bootstrapcdn.com/

Other Optimization

• Sign Static Files - if enabled, browsers will update cached versions of static files once they are updated on the server. This prevents the issue with browsers serving up old static resources from arising.
• Asynchronous indexing - helps you avoid a decrease in store performance when intensive sales on a storefront occur at the same time that Magento is performing intensive order processing. When this option is enabled, orders will be placed in temporary storage and moved in bulk to the Order Management grid without any collisions.
• Use Flat Catalog Category, Use Flat Catalog Product - when enabled, a flat catalog will create new tables on the fly, where each row contains all the necessary data about a product or category. These options help shorten queries to the database to get product or category data.

  Note

  Magento does not recommend the usage of a flat catalog as mentioned in their documentation.