Getting Started
Welcome to the Google PageSpeed Optimizer Documentation.
Whether you are a new or an advanced user, you can find some useful information here.
First of all, we recommend you check the following link:
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
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
Note
Suppose you receive a message about certain libraries that have not yet been installed. In that case, you can install them by running the command:
sudo yum install <library_name>
(Centos) or
sudo apt-get install <library_name>
(Ubuntu).
They can be installed all together, for example, by running:
sudo apt-get install jpegoptim optipng gifsicle webp imagemagick
After this, you can wait for a while (until optimization has been completed by cron) or else run commands for the optimization:
bin/magento mirasvit:optimize-image:optimize
- Run images optimization process
bin/magento mirasvit:optimize-image:webp
- Create a copy of the images in .webp format
The images optimization process doesn't require any additional commands in the crontab on your server. It runs on Magento's default crontab.
Should you receive a message stating that a package is not available at any point during the package installation, you can upload the relevant package directly to the server and perform a manual installation as a workaround.
Please refer to these articles for manual installation instructions:
- 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 \
Bad \
- 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.
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.
Google PageSpeed Optimizer settings for Magento Cloud
Since Magento Cloud projects have writing restrictions, to configure the extension in regards to the static content, the extension settings should be placed inside the [root_store_path]/app/etc/config.php file.
The config, most typical for the majority of Magento stores should look like this:
'system' => [
'default' => [
'dev' => [
'template' => [
'minify_html' => 1 // minify HTML
],
'js' => [
'merge_files' => 0, // merge JS files
'minify_files' => 1, // minify JS files
],
'css' => [
'merge_css_files' => 1, // merge CSS files
'minify_files' => 1, // minify CSS files
]
]
],
'mst_optimize' => [
'optimize_js' => [
'enabled' => 1, // enable JS optimizations, also enables advanced JS bundling. If you'd like to disable this feature it is recommended to disable all JS optimizations along with disabling this setting
'minify_js' => 1, // minify JS files
'merge_js' => 0 // merge JS files
],
'optimize_css' => [
'merge_css' => 1, // merge CSS files
'minify_css' => 1 // minify CSS files
],
'optimize_html' => [
'minify_html' => 1 // minify HTML
]
],
]
Where the default/dev
part of the system
config array is the default Magento settings and the mst_optimize
part is our extension settings.
This config should be placed inside the first-level array in the [root_store_path]/app/etc/config.php file.
As our extension extends from some of Magento's default functionality, the default settings and settings of our extension should be changed accordingly.
For example, default/dev/template/minify_html
should be changed together with mst_optimize/optimize_html/minify_html
.
In the above config, comments are added to explain which configs are related and should be changed correspondingly.
Remove these comments before adding the config to the [root_store_path]/app/etc/config.php file.
Note
If the file [root_store_path]/app/etc/config.php already contains some of these settings, then these settings should be changed according to what optimization settings should be enabled/disabled in the store.
Settings should be changed in both the default/dev
and the mst_optimize
section of the configuration array.
All other extension settings can be safely changed from the admin panel of the store.
Command Line Interface
Usage: php -f bin/magento [options]
- Run a Google PageSpeed test for the given page:
- Validate the software required for image optimization:
-
Run the image optimization process and generate webp images:
This command has next options:
- Run the restore command to restore original images:
Note
The extension will remove all optimized and webp images
How to upgrade extension
To upgrade the extension, follow these steps:
- Backup your store's database and web directory.
- Login to your server's SSH console and navigate to the root directory of the Magento 2 store.
- Run the command below to update the current extension with all dependencies:
Note
In some cases, the command above is not applicable; neither is it possible to update just the current module, nor need to upgrade all the Mirasvit modules in a bundle. In this case, the command above will be of no effect.
Run instead composer update mirasvit/*
command. It will update all the Mirasvit modules installed in your store.
- Run the command below to enable the extension:
- Run the command below to install updates:
- Run the command below to clean the cache:
- Deploy static view files:
Disabling the Extension
Temporarily Disable
To temporarily disable the extension please follow the following steps:
- Login to your server's SSH console and navigate to the root directory of the Magento 2 store.
- Run the command below to disable the extension:
- Log in to the Magento backend and refresh the store's cache (if enabled).
Removing the Extension
To uninstall the extension, please follow these steps:
- Login to your server's SSH console and navigate to the root directory of the Magento 2 store.
- Run the command below to remove the extension:
- Log in to the Magento backend to refresh the store cache (if enabled).