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 :-
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.
Minifying the CSS and JS means removing unnecessary blank spaces, line breaks and comments. For example consider the below, non-optimised JS code :
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.
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.
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.
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- 184.108.40.206 | 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.
In the above output we can see the line X-Mod-Pagespeed: 220.127.116.11-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.
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.
Where /custom/static is the custom path to directory of static resources.
Configuring PageSpeed Filters
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.
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.
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.
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.
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.
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.
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.
Allow from localhost
Allow from 127.0.0.1
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 18.104.22.168 and you want the path of PageSpeed admin to be my_pgs_adminpanel then the modified code will look like
Allow from localhost
Allow from 127.0.0.1
Allow from 22.214.171.124
Now restart your Apache server and go to the following address.
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
You will see something similar to the screenshot below.
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 -
sudo dnf update mod-pagespeed-stable
sudo yum update mod-pagespeed-stable
sudo apt-get update
sudo apt-get upgrade
After you upgrade, restart your web server to finish the update.
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.
Truth be told, it’s difficult for a web application that doesn’t have some kind of identification, even if you don’t see it as a security measure in and of itself. The Internet is a kind of lawless land, and even on free services like Google’s, authentication ensures that abuses will...
Although data persistence is almost always a fundamental element of applications, Node.js has no native integration with databases. Everything is delegated to third-party libraries to be included manually, in addition to the standard APIs. Although MongoDB and other non-relational databases are the most common choice with Node because if you...