The speed of a website is a very important factor in a website’s user experience. No user likes to browse a page which takes too long to load and also a slow website is a major factor in page abandonment. The speed of a website is also a very important factor for SEO. Advanced algorithms of search engines gives priority to faster loading websites over slower ones.

In this tutorial we will learn about the benefits of using Google’s PageSpeed module. We will also learn about the installation of this module on different operating systems to optimise any website running on Apache. We will also learn about the basic configuration of the PageSpeed module.

Features of the PageSpeed Module

Google’s PageSpeed module is an open source web server module which automatically optimises web pages to improve their performance by applying chosen output filters. Using the PageSpeed module does not require any modification to the website and existing content. It works on server side to produce an optimised web page for the visitor.

The PageSpeed module shows a significant change in decreasing the load time of a page, payload size and number of requests. It can reduce the loading time by 80% in some cases. The PageSpeed module has around 44 different filters which assists in the optimisation of a given web page. But primarily, the PageSpeed module performs the following tasks to optimise your website :-

Combine CSS and JavaScript

The PageSpeed module automatically combines both CSS and JS into less files hence it reduces the number of requests for resources to the server. For example if all the contents of 3 different CSS files are concatenated in a single file and that single file is sent to browser instead of three different files. This reduces the number of requests from 3 to 1, which helpd in reducing the load time, but obviously did not affect the layout and design of website.

Minify CSS and JavaScript

Minifying the CSS and JS means removing unnecessary blank spaces, line breaks and comments. For example consider the below, non-optimised JS code :

    $(document).ready(function() {
        $("#testimonials-carousel").owlCarousel({
            items: 1,
            autoPlay: 5000,
            itemsDesktop: [1199, 1],
            itemsDesktopSmall: [979, 1],
            itemsTablet: [768, 1]
        });
    });

And here is a minified version –

    $(document).ready(function(){$("#testimonials-carousel").owlCarousel({items:1,autoPlay:5000,itemsDesktop:[1199,1],itemsDesktopSmall:[979,1],itemsTablet:[768,1]});});

The minified version of CSS and JS works in exactly the same way as the original does. This reduces the file size which results in quick load time of the file and ultimately the site itself.

Deferred loading of JavaScript

The PageSpeed module attempts to delay the execution of JavaScript until webpage loads. This enables the rendering of web page faster. But before permanently activating this feature on your website it is advised that you test this with your website, because layout of website sometimes depends on the execution of JS. In this case the layout of your website may be broken until your page fully loads.

Inline CSS and JavaScript

We know that we can include CSS and JS using three methods, either inline or inside “ tag or we can write it on a separate file and include it with that page. Inline CSS and JS loads and process the elements faster than the other methods. It will also help in reducing number of requests as CSS is already inline hence there is no need to download and request the additional file.

Image Optimisation and Compression

Non-optimised images may increase the size of a web page by a large amount hence it is required to optimise the images so that payload becomes less and page loads faster. There are several rules by which PageSpeed will automatically optimise the images.

• Inline Preview Images – This filter creates a low quality version of the image which is inlined in HTML and displays them while loading the page. Once the page is loaded, the low quality version of image is replaced by high quality image.
• Lazyload Images – This filter defers the loading of those images which are not visible to the viewer, this helps in loading the content which is visible to user. The image is loaded once it comes into the user view port.
• Optimise Images – PageSpeed optimises your images to minimise their size based on the content of image. PageSpeed supports all common formats of images for compression like JPEG, PNG etc. It also supports transparent and animated GIFs. While optimising, PageSpeed also re-sizes the images according to its visible dimensions. Although optimising the images helps in making website much faster, it may introduce some noise in your image hence the quality of image may decrease.
• Responsive Images – PageSpeed can automatically add responsiveness to your images, hence for each size of display a different optimised image will load.

In addition to all this, PageSpeed has many filters like Extend Caching, Insert Google analytics, Local storage cache and many more.

Installing the PageSpeed Module for Apache

For Apache installation of the PageSpeed module, it is very simple as Google has already provided pre-compiled packages for PageSpeed. Currently, the PageSpeed module is supported on CentOS, Fedora, Debian and Ubuntu. It supports both 32 bit and 64 bit versions of Operating Systems. The PageSpeed module can be installed from both latest stable version and beta version. It is recommended that in production environment you use stable mode only.

For CentOS/Fedora

To install PageSpeed module of stable version for CentOS/Fedora complete the following steps.

Download the Package for your system according to your architecture. For a 32 bit Operating System run the following command.

    wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_i386.rpm

For 64 bit Operating System run the following command.

    wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_x86_64.rpm

Now we have downloaded the package we will need install it. Execute the following command to install the package.

    sudo yum install at
    sudo rpm -U mod-pagespeed-*.rpm

It you already have at installed you will not have to install at again. The next command will install the package in your server using RPM package manager.

For Debian/Ubuntu

To install the PageSpeed module of stable version for Debian and Ubuntu use the following steps.

Download the Package for your system according to your architecture. For 32 bit Operating System run the following command.

    wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_i386.deb

For 64 bit Operating System run the following command.

    wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_amd64.deb

Now we have downloaded the package we will need install it. Execute the following command to install the package.

    sudo dpkg -i mod-pagespeed-*.deb
    sudo apt-get -f install

The above commands will install the PageSpeed module in your server.

As we have installed PageSpeed using binary packages, this added Google’s official repository to your system, hence from now on we will be able to update the module automatically using the package manager which is Yum or Apt.

Verify the Installation

For verifying the PageSpeed installation for Apache run the following command

    curl -D- 162.213.36.95 | head

The curl command with the argument -D- fetches the web page with header information. The command is piped with head to display 10 lines from the top only. You will see the output similar to this.

    HTTP/1.1 200 OK
    Date: Fri, 03 Jun 2016 18:28:14 GMT
    Server: Apache/2.4.18 (Ubuntu)
    Accept-Ranges: bytes
    Vary: Accept-Encoding
    X-Mod-Pagespeed: 1.11.33.2-0
    Cache-Control: max-age=0, no-cache
    Content-Length: 35675
    Content-Type: text/html

In the above output we can see the line X-Mod-Pagespeed: 1.11.33.2-0 which tells us that the PageSpeed module is running and optimising your website.

Configure the PageSpeed Module

You will find the configuration file pagespeed.conf for the PageSpeed module for Debian/Ubuntu in directory /etc/apache2/mods-available/ and for CentOS/Fedora the configuration file is in /etc/httpd/conf.d/. In Apache, the PageSpeed module is automatically turned on when installing PageSpeed. PageSpeed also automatically turn on mod_deflate module which is used in Apache for gzip compression. Gzip compression is very important in speed of a website. This function compresses the content before sending to browser.

You can turn PageSpeed on or off using the following configuration in pagespeed.conf. Edit the file using your favorite editor. For example I am considering nano.

    sudo nano /etc/apache2/mods-available/pagespeed.conf

Usually, on the third line you will find ModPagespeed on . You can turn PageSpeed module off by replacing it with ModPagespeed off. Save the file and reload Apache by running the following command.

    #in Ubuntu/Debian
    sudo /etc/init.d/apache2 restart

    #in CentOS/Fedora
    sudo /etc/init.d/httpd restart

You can completely disable the PageSpeed module by replacing it with ModPagespeed unplugged. Apart from editing pagespeed.conf you can also specify the configuration in .htaccess file and Virtual Hosts configuration. Configuring PageSpeed in .htaccess is useful when you are optimizing a single website in a server running multiple website.

PageSpeed generates some static resources while optimising your website. By default these resources are stored in /pagespeed_static directory, but you can configure it by adding the following line in pagespeed.conf.

    ModPagespeedStaticAssetPrefix /custom/static/

Where /custom/static is the custom path to directory of static resources.

Configuring PageSpeed Filters

Rewrite levels

PageSpeed offers three levels of filter configuration, which are

CoreFilters– This set contains the filters which are safe for a most websites. This is default level filter for a PageSpeed module. This level enables the following filters.

    add_head
    combine_css
    combine_javascript
    convert_meta_tags
    extend_cache
    fallback_rewrite_css_urls
    flatten_css_imports
    inline_css
    inline_import_to_link
    inline_javascript
    rewrite_css
    rewrite_images
    rewrite_javascript
    rewrite_style_attributes_with_url

OptimizeForBandwidth– This filter level is most suitable for the root configuration of any hosting provider, CDN or Multisite environment. There are very limited filters used in this level. Which are considered safe for all websites, including the websites which are not aware that they have PageSpeed installed. It does not alter HTML but optimises images and minifies JS and CSS.

PassThrough– This filter level disable the CoreFilters, and then you can specify any filter you wish to use in configuration file.

To change the rewrite level you can specify the following entry in pagespeed.conf.

    ModPagespeedRewriteLevel FilterLevel

Where FilterLevel will be replaced by PassThrough, CoreFilters, or OptimizeForBandwidththree according to your need.

If you wish to keep using CoreFilters but specifically disable some filters from it. You can specify the following entry in configuration file.

    ModPagespeedDisableFilters filter1,filter2

Where filter1 and filter2 can be any filters which are already activated in CoreFilters. For example if you wish to disable add_head and extend_cache then you will make the following entry.

    ModPagespeedDisableFilters add_head, extend_cache

You can also forbid them to be activated by query strings or .htaccess then you will have to specify the following entry.

    ModPagespeedForbidFilters filter1,filter2

But if you are using the PassThrough filter then you will have to specifically activate the filters you want to use. To enable the filters of your choice, make the following entry in pagespeed.conf.

    ModPagespeedRewriteLevel PassThrough
    ModPagespeedEnableFilters filter1,filter2,filter3
    ModPagespeedEnableFilters filter4,filter5

You can add as many lines as you want and also you can add as many filter in a single line. You can find the list and description of all the available filter by going to this link.

If some filters are disabled or not explicitly enabled, these filters can still be enabled by query strings or with .htaccess. This can load the website in bad shape if any filter is not suitable for website. This also increases load on server. A solution to this is that you forbid all the filters which are currently disabled. You can do so by making the following entry in configuration file.

    ModPagespeedForbidAllDisabledFilters true

PageSpeed Admin pages

You can view the statistics of PageSpeed module using a browser interface too. This feature is enabled by default in PageSpeed, but it can be accessed only on localhost. You will need to make some changes in your configuration file to allow it to be accessed using your public IP address.

Edit the pagespeed.conf file again and scroll down to find the following lines.

        Order allow,deny
        Allow from localhost
        Allow from 127.0.0.1
        SetHandler pagespeed_admin

Add another line in this configuration which is Allow from. You can also change your path to Admin dashboard by changing pagespeed_admin to your desired path in “ line. Changing this path is a good practice for security consideration. For example if your IP address is 173.13.0.163 and you want the path of PageSpeed admin to be my_pgs_adminpanel then the modified code will look like

        Order allow,deny
        Allow from localhost
        Allow from 127.0.0.1
        Allow from 173.13.0.163
        SetHandler pagespeed_admin

Now restart your Apache server and go to the following address.

    http://your-domain.com/path_to_your_admin

Here ghd default path_to_your_admin is pagespeed_admin but if you have changed it then it should be your new path. Path for our example configuration will be

    http://your-domain.com/my_pgs_adminpanel

You will see something similar to the screenshot below.

HP_NO_IMG/data/uploads/users/1a4f26de-5d97-48b7-abf5-631194ef3a10/1581687324.png” alt=”” />

If you wish your PageSpeed admin dashboard to be accessed from everywhere then you can add Allow from all. But allowing everyone to access to this is not recommended for security reasons.

Upgrading PageSpeed module

You can upgrade the PageSpeed module automatically using standard yum or apt-get update commands which are –

For Fedora

    sudo dnf update mod-pagespeed-stable

For CentOS

    sudo yum update mod-pagespeed-stable

For Ubuntu/Debian

    sudo apt-get update
    sudo apt-get upgrade

After you upgrade, restart your web server to finish the update.

Conclusion

In this detailed tutorial of Google’s PageSpeed module, we have learnt to install and configure the module. You can now deploy PageSpeed module to Apache web server running on any operating system to make your website super fast.