I’ve written a few posts here about my growing interest in site optimization. It seems as though that interest is coming at the right time as Google has begun to, and continues to, put more and more emphasis on page load times and performance metrics. Sites I maintain and develop for both freelance clients and my day job need to be optimized to squeeze every last ounce of performance out of them to show Google they mean business and to keep users happy. Apache’s mod_pagespeed is a great way to boost your site’s performance quickly with some basic configuration.
I do quite a bit of work on Digital Ocean droplets because they’re just so darn convenient. Installing mod_pagespeed on a basic install of Ubunutu is really straight forward – find those instructions here. However, I also have a few clients that have their own VPS packages complete with cpanel. Turns out cpanel muddies the waters a bit because the process outlined in that previous link will not work. In which case, the mod needs to be downloaded and unpacked via the command line and then installed through EasyApache in whm. That process can be intimidating so I thought I’d write a post and walk through it and outline some basic configuration.
The Big Picture
We’ll attack a basic concept of site optimization – lighten up you page weights (payload) to lower your page load times. Think of a stock car being converted into a racing car – cut the weight, do some work under the hood, and you enhance the performance. Admittedly, there are other important performance metrics to consider like javascript performance, deferred loading, and non-blocking js/css but page weight is a good place to start your optimization.
Beginning at the End
Why do you want mod_pagespeed? Your website runs fine, right? Well, typically there are things tucked away that we can be doing better and there plenty of places to benchmark and get performance feedback on your site:
You’ll probably see some variance in the scores of those sites but you’ll see, in general, that if you don’t perform well in one you don’t perform well in them all. You’ll see warnings and suggestions about several things but the main things we’ll focus on are compression and minification to lower our payload size and round trips. Google in particular will let you know when you have space that can be saved – either through minification or compression of one type or another.
Install
A few assumptions I am making is that you have some sort of VPS hosting with a LAMP configuration and cpanel already up and working. If you don’t I can’t really help you too much but I will thank you for reading this all for no apparent reason. Also, that you have shell access to your server, if you’re on a shared host, regrettably, none of this will work. You can find these exact same instructions here – they’re pretty brief and this process can be intimidating the first time you do it so I’ll be throwing in some screen shots of my experience and adding any notes I think might help. Ok, let’s light this fire – ssh into your server (I’m being bad and logging in as root – don’t judge me)
1.Clone the installation scripts onto your CPanel server:
$ /usr/local/cpanel/3rdparty/bin/git clone https://github.com/pagespeed/cpanel.git /tmp/pagespeed/
2.Create Speed.pm.tar.gz
$> cd /tmp/pagespeed/Easy $> tar -zcvf Speed.pm.tar.gz pagespeed $> mkdir -p /var/cpanel/easy/apache/customoptmods/Cpanel/Easy $> mv Speed.pm Speed.pm.tar.gz -t /var/cpanel/easy/apache/customoptmods/Cpanel/Easy/ $> cd && rm -rf /tmp/pagespeed
The ‘Previously Saved Config’ is what you’re running currently. This is what you’ll want to be editing – look to the right under ‘Actions’ and click the cog icon to edit settings. You can hit ‘next step’ for the ‘Apache Version’ and ‘PHP version’ unless you want to make any changes – we’re looking to get to the ‘Short Options List’. If you’ve done everything right you should see mod pagespeed listed:
Check that checkbox and select ‘Save and Build’ and be prepared for a wait. A little back story as to what is going on here, if you don’t know, this process requires that apache and php be rebuilt and recompiled – fair warning, this process takes quite a long time. At this point, take a break, get a snack or a drink and come back in about 15 minutes and, if all went according to plan….
At this point maybe take a minute or two to whiz around a few of your websites to make sure that everything is still up to snuff and working correctly. Odds are this went off without a hitch but it never hurts to be sure.
Configuring
Assuming you’re still logged into your server find your way to /usr/local/apache/conf/ and you’ll find your pagespeed.conf file just waiting for some sweet, sweet, configuration action. Let’s knock these out one by one based on my original score – first we’ll start with optimizing images.
Images
To compress and resize images we’ll use the rewrite images filter –
ModPagespeedEnableFilters rewrite_images
CSS
To minify our css we’ll be using the css rewrite filter (we’ll just add a new line) –
ModPagespeedEnableFilters rewrite_css
But, we’re not doing the best we can do here. Why not combine and minify? Let’s add the css combine filter –
ModPagespeedEnableFilters rewritecss,combinecss
Also, the sprite images filter has the potential for big performance gains and it’s worth an add. As of this writing this filter only works on background images that are gif or png format but this is scheduled to be expanded.
ModPagespeedEnableFilters rewritecss,combinecss,sprite_images
Javascript
Here, we’ll want to combine and minify the javascripts just like we did with the css –
ModPagespeedEnableFilters rewritejavascript,combinejavascript
Seeing a pattern?
HTML
Finally, let’s minify html and remove comments. Both will help reduce the over all page weight by removing unnecessary characters.
ModPagespeedEnableFilters collapsewhitespace,removecomments
The Conclusion Part
The filters I added above cover a fairly basic setup, there are a ton of other filters to take advantage of. Also, you’ll want to enable things like deflate and gzip and setup your browser caching to take full advantage of mod pagespeed. That step of setting up browser caching will also help significantly in improving your performance scores if you haven’t already done it. Also, I’ve come across several blog posts and articles about configurations that will get your pagespeed score up to 100 out of the box – I’m not sure if those were dated or what but, while they did increased my score, it wasn’t to 100/100. Just know that your site(s) configuration is something you should test and retest until your satisfied with your page metrics and your scores.