How to turbocharge Magento 2 store with Google PageSpeed Module

How to turbocharge Magento 2 store with Google PageSpeed Module

Administration Magento 2
Speed Up Store
Grow Sales
Install Pagespeed Optimizer

For an online store, one of the most important aspects is the loading speed. And here, it is important not only how fast a server returns a page to a client (TTFB), but also, how quickly the client can download this page and all related resources (files js, CSS, images, fonts).

The loading speed is one of the most significant factors which affects the SERP ranking in search engines (Google, Bing, etc).

The faster a server generates the page and a client downloads it, the higher your site is in the search results at all the other factors being equal.

During several years we have been studying and implementing various approaches to improve the speed of the store server-side and frontend side.

Today we use a few different approaches to achieve acceptable performance:

mirasvit.com Desktop Page Score

Google PageSpeed Module

Google PageSpeed module is not healing, rather a big step.

And for Magento 2, it is more relevant than ever. i.e. for the frontend part operation, it is necessary to upload a huge amount of js, CSS, files, images and other resources.

What does the Page Speed module do?

The main task of the module is to optimize resources that are loaded by a client’s browser.

Right after installation and basic setting up it starts operating and step by step uses different techniques that are recommended by Google PageSpeed Insight:

  • optimize images
  • defer JS
  • minify/merge JS/CSS
  • inline Javascript
  • extend resources cache

How does it work

PageSpeed Workflow

PageSpeed and Magento 2 - proven configuration

After pagespeed module installation on a server, it is necessary to configure it Nginx or Apache.

There is an example of a working configuration based on Nginx below:

server {
    .....

    location /ngx_pagespeed_statistics { allow 100.100.100.100; deny all; }
    location /ngx_pagespeed_global_statistics { allow 100.100.100.100; deny all; }
    location /ngx_pagespeed_message { allow 100.100.100.100; deny all; }
    location /pagespeed_console { allow 100.100.100.100; deny all; }
    location ~ ^/pagespeed_admin { allow 100.100.100.100; deny all; }
    location ~ ^/pagespeed_global_admin { allow 100.100.100.100; deny all; }

    pagespeed on;

    pagespeed RewriteLevel CoreFilters;

    # core filters
    pagespeed EnableFilters add_head;
    pagespeed EnableFilters remove_quotes;
    pagespeed EnableFilters combine_css;
    pagespeed EnableFilters combine_javascript;
    pagespeed EnableFilters rewrite_images;

    # extra
    pagespeed EnableFilters sprite_images;
    pagespeed EnableFilters collapse_whitespace;
    pagespeed EnableFilters dedup_inlined_images;
    pagespeed EnableFilters inline_preview_images,resize_mobile_images;
    pagespeed EnableFilters lazyload_images;
    pagespeed EnableFilters rewrite_javascript;
    pagespeed EnableFilters responsive_images,resize_images;
    pagespeed FetchHttps enable;

    location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
        add_header "" "";
    }
    location ~ "^/pagespeed_static/" { }
    location ~ "^/ngx_pagespeed_beacon$" { }

    .......
}

If the installation and set up went fine, restart Nginx and then, all pages will include header X-Page-Speed:

PageSpeed Response Header

PageSpeed Module Result for Magento 2 Store

It is allowed to use the embedded web interface for extension operation monitoring, that is accessible with the following link https://yourstore.com/pagespeed_admin

In the next few hours, you can see the optimization results

PageSpeed Optimized Image

In our case, the volume of the optimized (compacted) files (images, CSS, js) is measured with gigabytes.

Final thoughts

PageSpeed module can not solve all the issues related to the store speed, but it significantly speeds up its operation. It allows you to improve page speed rating for your store quickly and safely and to decrease the time, customers spend on page loading.

Also, you can significantly improve average response time for all store visitors with Magento 2 Full Page Cache Warmer extension.

Related Posts
  1. How to improve Magento 2 Page Cache Hit Rate
  2. Common issues and few hacks with Magento 2 Full Page Cache
  3. 7 essential ways to improve your Magento 2 site speed [Updated]
  4. 5 reasons to speed up your Magento 2 store

Enjoyed the Read?

Don’t miss our next article!