Install and Configure (Nginx) PageSpeed Module for Better Performance

Dejan Pavlović29.11.2019Optilife

1 Intro

At Optiweb, we are always discovering new ways of improving the load speed of our websites and online stores. We give a lot of attention to how quickly the server returns a page to a client (TTFB), but it is also important to improve the load time of the resources (JS files, CSS, images, fonts, etc.) of the clients.

We have written quite a few blog posts with different approaches to improving the page speed of our shops, such as our lazy loading article, a post about Magento2 custom cache types, another one about image compression and our more detailed post about the performance optimization for Magento2 stores.

In this post, we will focus only on the installation and configuration (that works best in our cases) of the Google PageSpeed module on the server with CentOS 7.

2 What is PageSpeed?

PageSpeed is an open-source server-level module for Nginx and Apache, made by Google, that helps optimize your site. The module implements a lot of the performance recommendations that you can see on the Google PageSpeed Insights page.

2.1 What does it do?

It improves web page latency by changing the resources on that page to match the best web performance practices. More specifically, you can:

Optimize images – compression, convert to WebP format (for supporting browsers), resize images
Minify HTML
Minify and merge CSS, JavaScript
Optimize file caching
Combine external JavaScript and optimize them
Optimize file loading by prioritizing important CSS and deferring JavaScript

Image source: https://mirasvit.com

3 Installation instructions

3.1 Backup Nginx directory

cp -avr /etc/nginx /etc/nginx_bkp

rsync -a /etc/nginx/ /etc/nginx_bkp/

Why is this done? Because a newer, custom Nginx package is going to be installed and backup is recommended in case the installation overwrites the configuration files.

3.2 Get Nginx packages

There are multiple ways to obtain the Nginx packages with the PageSpeed module:

Build it yourself into Nginx as a dynamic module
Use public repository (pkgs.org is a good starting point)

Keep in mind that Nginx that is installed on Centos 7 is usually older and under a different name so we first need to uninstall it if we have built the package ourselves:

yum remove nginx*

to remove all the packages related to Nginx. This step is not required if you are using a repository.

3.4 Install Nginx with PageSpeed

If you have built the Nginx package yourself, navigate to the directory where Nginx packages are located and install them via

yum localinstall nginx*

This command will look for all Nginx packages in the working directory and install them with dependencies.

Update the Nginx via yum if you are using a repository and install the PageSpeed module.

yum update nginx* && yum install

3.5 Check configuration

Check if the configuration in Nginx directory matches the one in the backup directory. If the configuration was overwritten, you can copy the content from the backup directory to the default one. Check if the web page is working fine before proceeding to the next step.

3.6 PageSpeed configuration

Create a new configuration file in the Nginx directory called pagespeed.conf. Go to site configuration in the Nginx directory, find the server block where https is defined and add the line:

server {

listen 443;

…

include /etc/nginx/pagespeed.conf;

Paste the following configuration into pagespeed.conf:

pagespeed on;

Pagespeed Disallow “/admin*”

pagespeed FileCachePath “/tmp/pagespeed_cache/”;

pagespeed FileCacheSizeKb 102400;

pagespeed FileCacheCleanIntervalMs 3600000;

pagespeed FileCacheInodeLimit 50000;

pagespeed EnableCachePurge on;

pagespeed PurgeMethod PURGE;

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 insert_dns_prefetch;

pagespeed EnableFilters hint_preload_subresources;

pagespeed DisableFilters prioritize_critical_css;

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$” { }

This configuration is recommended and tested for Magento 2.3+. For earlier versions, Javascript bundling and deferring might need to be removed, as it can cause issues. Please test your site thoroughly and disable any rules that may cause issues on your site. The best rules to start disabling are the ones related to Javascript as these are high risk optimizations.

To disable a rule change EnableFilters to DisableFilters.

To exclude a URL or a resource from pagespeed processing use the Disallow rule:

pagespeed Disallow “*/jquery-ui-1.8.2.custom.min.js”;

pagespeed Disallow “/admin*”;

To check what each of these filters does, please refer to the project documentation. When the configuration is complete, run the following command:

nginx -t

This lets us test the configuration, after which we apply

systemctl restart nginx

to restart Nginx and apply new Nginx version with PageSpeed functionality.

3.7 Testing

If the setup went OK, all the pages will have a new response header X-Page-Speed:

If you have set the configuration to convert images to WebP you will see something like this in the source code:

In case any of the resources was not properly cached, the PurgeMethod we defined in our config allows us to clear the cache remotely via cURL:

curl -X PURGE https://example.com/

If the cache purge does not solve the issue, consider disabling the rules you suspect are causing these issues.

4 Conclusion

With the mod_Pagespeed module, you can significantly speed up the load time and improve Google speed score of your site. But keep in mind that you have to have a healthy code-base to start with – a code-base without any performance bottlenecks. If you do not have enough server knowledge, we advise you to implement this with the help of your (skilful) server administrator.

Resources:

Dejan Pavlović

You won’t find Dejan in our offices anymore, but we know that no matter where he is now, he is doing a phenomenal job. We’ve kept a piece of them with us as a memory. :)

Be the first one to hear about the latest digital trends and case studies.

Write down your email address below!