Skip to main content

General settings

The settings for the Mirasvit Google Page Speed Optimizer extension are located in your Magento admin panel under Stores > Configuration > Mirasvit Extensions > Google Page Speed Optimizer.

Insight​

Settings related to monitoring and testing your store’s PageSpeed performance.

  • Run Google PageSpeed test: quickly run a test for a specific URL to check performance metrics.
  • URLs for monitoring: enter the URLs for PageSpeed monitoring, one per line.

JavaScript optimization​

Settings related to how JavaScript files are handled to improve page load speed.

  • Run pre-fly checking: click this button to verify that your server environment and JavaScript optimization settings are correctly configured before applying optimizations. Use it to detect potential issues that could prevent scripts from being merged, minified, or moved to the page bottom.

  • Enable JavaScript optimization: enable/disable JavaScript optimization for your website. Run bin/magento setup:static-content:deploy after saving the configurations.

  • Do not use JavaScript bundles on pages: enter the list of page types (action names) or URL patterns where JavaScript bundles should not be applied. Add one pattern per line to exclude specific pages from JS bundling. (Available only if the Enable JavaScript optimization is enabled).

  • 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.

  • Do not minify files: enter the list of JavaScript file name patterns that should not be minified. Add one pattern per line to exclude specific files from JS minification. (Available only if the Minify JavaScript option is enabled).

  • 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. (Available only if the Move JavaScript to page bottom option is enabled).

  • 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).

  • 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.
  • 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. (Available only if the Lazyload iframes is enabled).

CSS optimization​

Settings for optimizing CSS delivery and reducing render-blocking.

  • 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 resources: 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. This field is functionally identical to the Additional CSS Styles field in Stores > Configuration > Mirasvit Extensions > Developer > CSS Settings.

Image optimization​

Settings for optimizing images and generating WebP versions.

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: choose how images are selected for optimization:

  • Filesystem: scans a fixed number of files per cron job (default: 1000) in pub/media.
  • Webpages: images are added to the optimization queue from visited pages. Fewer images are optimized, but they include the most important images first. The process runs automatically via Magento’s cron.

Use WebP images: enable to generate and serve WebP images instead of the default formats. Clear Magento cache after changing this setting.

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: toggle lazy loading on or off. Clear the Magento cache after this option has been changed.
  • Preload first N images: number of images fully loaded during page load.
  • Preload first N background images: the number of background images which should be fully loaded when the page is still loading. Only affects background 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 lazy load for images: list of image patterns excluded from lazy loading (one per 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

Avoid setting container sizes in the same CSS class as the background image to prevent layout shifts.

Example

Good CSS:

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

Bad CSS:

.some-class {
    background-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 for selected file patterns.
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:

    • File name: pattern of images to resize
    • Desktop width: width of the desktop version (original used if empty)
    • Mobile width: width of the mobile version (no resized image generated if empty)
note

The module scales the height proportionally to the new width.

HTML optimization​

Settings for optimizing HTML output.

  • 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 Resources: 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​

Miscellaneous performance settings.

  • 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/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.