Google Page Speed Optimizer for Magento 2

Advanced JS files bundling

The default Magento collects a major portion of the code in its JS files that are not required on virtually every page. This code significantly increases the number of loaded JS files up to 120 and their total size up to 7 MB.

The problem of excessive JS code loading on the web page has now been resolved. Our module has the option of JavaScript Optimization which combines only the required JS files to be loaded.

This reduces the number of loaded files by 3 times and the file size by 7 times! As a result, the loading speed of the web page and JS files is much higher.

You can further increase Magento product page speed optimization by using the Merge JavaScript files option.

Once enabled, it seeks to reduce the number of HTTP requests made by a browser during web page refresh. This is done by replacing multiple distinct JS files with a single JS file.

Move CSS, JS files to the bottom

One of the most frequent reasons for a Google PageSpeed Insights score drop is the presence of resources that block page rendering due to large blocks of time required for their loading or execution.

In Magento, JS files were included in the heading of the page by default, prior to version 2.3.3. As a result, they were loaded before the rest of the page content. Their execution blocked the loading of the main part of a page, forcing users to wait for JS files to load.

The same is true for CSS files, which can require long periods of time for loading and analysis. Such files are also often located in the header of the web page.

As recommended by Google, our module moves the content of JS and CSS files to a website footer.

In this way, the main content of the page can be loaded and rendered before the JS and CSS can block its rendering. In such a configuration, it takes less time to load and display a web page.

Read more on how to remedy the Magento 2 Google PageSpeed Insights render blocking resources suggestion for your site in our article.

JS, CSS, HTML minification

A page can load an excessive amount of code in JS, CSS and HTML files, which can be considered as a common cause of page performance issues.

The Magento speed up extension applies different minification algorithms to reduce the size of Magento JS, CSS, HTML files.

When minification option is activated, our Magento 2 speed optimizer combines JavaScript files into bundles that are required for particular page types. Unnecessary files are excluded from the page, depending on the page type, and Magento pagespeed results are improved.

The size of CSS files is reduced by the speed optimization Magento extension by means of removing comments, unnecessary formatting and symbols. The same goes for HTML document minification.

The JS, CSS and HTML minification reduces the total loaded data volume and is one of the techniques for fixing Magento page speed loading.

Our Magento 2 performance optimization extension allows you to individually activate the minification of the JS, CSS and HTML files.

Preloading page resources

Some of the critical resources for page render are hidden in CSS and JavaScript files. The browser cannot know beforehand that it might need those resources and starts loading them, thus causing the delay of the page's first render or loading critical parts of the page.

To speed up the loading process of JS and CSS files and fonts, our Magento speed optimization extension allows you to preload the most important files for rendering of the page. The browser caches the preloaded resources so that they will be available right at the moment they are needed.

Using this technology, the page is correctly displayed even if other files are still loading in the background.

Defer CSS files loading

Some of the CSS files your store starts loading just when the user clicks on the link can block the page rendering process, yet are not critical for this process.

To speed up the loading process of CSS files, our Google Page Speed optimizer Magento 2 extension allows you to postpone the loading of files which are not directly used in the initial rendering of the page.

Those files will be loaded in the background later. This is beneficial for users with a slow internet connection and those connected via mobile devices.

Defer YouTube videos & Google Fonts

Minimize the influence of third-party elements, like YouTube videos and fonts, on the page loading speed of your store. Such resources can require a decent amount of time to load, thus causing a page to be flagged by the PageSpeed Insights.

The Page Speed Optimizer for Magento 2 extension allows you to postpone the loading of YouTube videos and Google Fonts. This way, it improves the overall loading speed and allows you to keep the enhanced functionality of the page by having videos and web fonts on the page.

Postponed files will be loaded in the background after loading of the main set of files, which leads to page load speed optimization in Magento.

Lazy Loading of Images

Magento loads website images by default along with the main HTML, CSS, and JS files. As a result, the page will be displayed incorrectly and will not work until all the images are fully loaded. It negatively impacts customer experience and reduces the PageSpeed score of a website.

Increasing Magento website speed optimization can be done by postponing the loading of images to the point when they are required.

First, the Google pagespeed Magento module uploads the most important files and shows customers a page with accurate placeholders instead of the images. When customers start to interact with the website, for example, scrolling down the page, the Magento 2 page speed optimization module loads the necessary images in the background.

Image compression

On average, 50% of a page's size is comprised of images. By optimizing images, you can reduce page size by up to 20%.

Reducing the page size leads to faster page loading for users with a slow internet connection and those connected via mobile devices. The Google PageSpeed Insights tool uses the speed of a 3G mobile connection as a reference point.

The Magento 2 Google optimize extension can automatically optimize images for all common formats: JPEG, GIF, PNG.

You can set the image optimization value at 85% (that is recommended by Google) or choose the value depending on your needs. For example, you can lower the image quality even more to further improve page speed loading on slow internet connections.

Additionally, Magento pagespeed module automatically converts images to modern .WEBP format. Pictures in this format require significantly less traffic for loading pages with a similar image quality level to JPEG or PNG. This increases your site loading speed even more.

WebP format support

WebP is a modern image format that offers a similar level of quality while webp files take significantly less bandwidth to load. It greatly reduces the size of images, while still providing good visual quality. The images are 25%-35% smaller in file size compared to PNGs or JPEG.

The WebP format should be used whenever it is possible to achieve the maximal saving for bandwidth while page loading.

Google's tool PageSpeed Insights collects every accessible BMP, JPEG, PNG file on the page, and converts them to WebP for file size comparison. Usually the results do not come out in favor of traditional image formats and the page gets flagged, which leads to lowered scores in PageSpeed Insights.

Preload of images

Modern web pages can have dozens of high resolution JPG, GIF and PNG files, and some of them can be critical for page rendering, like a background image or buttons that change based on action. The loading of such graphic resources can require time.

To speed up the loading process, our Magento speed extension allows you to preload the most important images. Preloading of images allows you to retrieve the required images instantly from a local memory of the user's gadget instead of the distant server.

Using this technology, the page is correctly displayed even if other image files are still loading in the background.