Google PageSpeed Optimizer for Magento 2

Move CSS, JS files to the bottom

One of the most frequent reasons for a PageSpeed 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 Page Speed 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 Page Speed Optimizer extension applies different minification algorithms to reduce the size of Magento JS, CSS, HTML files.

When minification option is activated, our extension combines JavaScript files into bundles that are required for particular page types. Unnecessary files are excluded from the page, depending on the page type.

The size of CSS files is reduced by the 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 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 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 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 Magento speeding up the page load.

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 page speed optimizer 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, Page Speed Optimizer 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 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.