Perfect PageSpeed score using Bootstrap and mod_pagespeed

Before we begin, I should first tell you about this absolute gem of an article hosted on AppNeta written by Dan Riti. Dan outlines what things you can do to help bump your page speed score up to 100 and its a fantastic read and one you should definitely have a look at.

However while the article discusses things you can do to improve the score. It doesn't give you an in depth guide on how to install the mod_pagespeed module. This is where I come in. My article shows you the steps i've taken to get the perfect Google PageSpeed Score.

Installing the Google mod_pagespeed Apache module

Before we start, I'm assuming you have SSH access to your web server and a user with root / sudo privileges. If you do, great! Let's begin.

First we need to download the mod_pagespeed package from the downloads page. You can either fetch the link from the page or you can copy it from my sample code below:

Because we want to download the package to our web server, we can use wget to do this for us:

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

I've downloaded the 64bit version for Debian / Ubuntu - Chose the package which best suits your server setup.

After you've downloaded the package, we need to install it. You can do this in only one command, issue the following into your terminal:

sudo dpkg -i mod-pagespeed-*.deb

This should return the following output:

Selecting previously unselected package mod-pagespeed-stable.
(Reading database ... 87466 files and directories currently installed.)
Preparing to unpack mod-pagespeed-stable_current_amd64.deb ...
Unpacking mod-pagespeed-stable (1.12.34.2-r0) ...
Setting up mod-pagespeed-stable (1.12.34.2-r0) ...
Enabling module pagespeed.
To activate the new configuration, you need to run:
 service apache2 restart
Enabling conf pagespeed_libraries.
To activate the new configuration, you need to run:
 service apache2 reload

As you can see, its asking us to reload and restart apache to activate the module. Let's do this now, issue the following commands in your terminal:

service apache2 restart
service apache2 reload

Now that we have successfully installed the module, we need to configure it to improve our pagespeed score.

Configure the pagespeed module

In order to vastly improve our pagespeed score, all we have to do is update the configuration file with the following code snippet.

cd to the following directory, depending on which distro of linux you have:

Debian/Ubuntu: /etc/apache2/mods-available/
CentOS/Fedora: /etc/httpd/conf.d/

There should be a file called pagespeed.conf - this is the file we want to change. Issue the following command to edit the file. (I use vim as my editor, but feel free to use something else like nano etc.)

sudo vi pagespeed.conf

Copy and paste the following underneath the "ModPagespeed on" variable

ModPagespeedRewriteLevel CoreFilters
ModPagespeedEnableFilters prioritize_critical_css
ModPagespeedEnableFilters defer_javascript
ModPagespeedEnableFilters sprite_images
ModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webp
ModPagespeedEnableFilters collapse_whitespace,remove_comments

The above settings will work some magic on your site, so it's worth knowing what they do.

I'll try my best to explain, however feel free to correct me in the comment section below, if you can improve on what i've said.

Prioritise Critical CSS

This is a heavy hitter when it comes to speeding up your website. Prioritising the critical CSS means to only use CSS that you need to display your page. This is a quite a tricky thing to do, especially if you are using the Bootstrap framework. You are loading in the entire file each time you request a page and there will be a good chance you aren't using 100% of the CSS.

This filter finds the bare minimum of CSS you need (including the responsive stuff too) and includes this instead of the full Bootstrap file. That's pretty Impressive!

Defer JavaScript

When you defer JavaScript, you're telling the browser to only load in your file after the page has finished loading. Now this works fine for standalone scripts which have no dependancies, but you'll run into problems when using jQuery along with Bootstrap - As Bootstrap requires jQuery to work! If you defer jQuery you'll just get a console error along the lines of "$ is undefined".

This filter works out the order in which files need to be deferred and does it all for you in a way that works.

Sprite Images

I've lifted this description straight from the page speed website as I don't think i could have done a better job of explaining it.

"The 'Sprite Images' filter detects GIF and PNG images used as backgrounds in CSS. It attempts to combine all such images referenced from a CSS file into a single large image. The individual CSS backgrounds are then rewritten to point to the single large image, with background positioning declarations so that the page appears as it was before."

Convert PNG to JPG, JPG to WebP

Attempts to convert PNG files into JPG files. Jpegs generally offer better compression than PNG files which result in less time spend downloading, which equals a quicker page load time.

Collapse Whitespace, Remove Comments

Does exactly what it says on the tin! Removes whitespace and comments from your CSS and JS files. Results in smaller file sizes.

Checking it all works

OK that should be it in terms of tinkering around. We need to test that the module is working. To test this we can check the HTTP response headers.

The mod_pagespeed module outputs a "X-Mod-Pagespeed" header whenever a page is requested. We can easily check for this by using cURL. Issue this command locally on your PC. (Remembering to replace my website with your own!):

curl -i 'https://www.danielord.co.uk'

The -i options fetches the headers of the response. As you can see, my website outputs the following header:

X-Mod-Pagespeed: 1.12.34.2-0

If you can see this, congratulations! Your website is now configured and you should run a page speed test again to see if your score has improved.

However if not, make sure you have followed each of my instructions to the letter. You can check out the FAQ section over at the Google page speed module website for more help.

Let me know in the comments section below how much your score increased by.