Pagespeed (PS) doesn’t need to be explained. It’s a metaphor for: If you’re too slow, you won’t show up (at least in Googles search results for mobile surfers). But how complicated and time consuming is it to get a high PS score? In the past days I had the chance to fiddle around with a fairly new, simple, and pretty unimportant website of a friend of mine. It’s a classic WordPress site with header and footer and plugins and Google fonts.
Apart from that it’s responsive, thanks to the YAML framework, mobile friendly according to Google webmaster tools, and it gains 100/100 user experience from PS.
And 50/100 for the rest. Google says, 85/100 is high-performance. Why not reach for high-performance?
Looking for plugins
That’s the classical WordPress approach. Leave the website as it is and find a good plugin. However, I had a very confusing experience with plugins. When PS complained about missing server caching, nonexistent data compression and absent minification of resources, I tried out several plugins. Some simply didn’t work or showed an odd behavior: The first PS session rocketed the site to 80, the subsequent sessions degraded it to my well known 50 points from 100 or even below.
Compression and caching by the provider
Caching plugins make significant changes to your htaccess file, which made me feel uncomfortable. Hence, I stopped using caching plugins, followed the recommendations of my provider, and came up with this htaccess solution:
Retrospectively, this htaccess modification should be your last step to optimize your website for PS, because you always have to undo them after the subsequent changes to see the effect.
This step improved my score: 57 points from 100
This PS section listed all my css files and all my js files as render-blocking. I started with the css. Typically, a YAML css is like the following style.css:
@import url("http://fonts.googleapis.com/css?family=Droid+Serif"); @import url("http://fonts.googleapis.com/css?family=Droid+Sans:700"); /* framework core */ @import url(yaml/core/base.css); /* screen layout */ @import url("css/hlist.css"); @import url("css/gray-theme.css"); ..
All the css @imports were replaced by the original css files, and in a second step by their minified versions, which PS offers to download. The two font @imports were combined into one and then replaced by a link in the site’s header:
<link href='http://fonts.googleapis.com/css?family=Droid+Serif|Droid+Sans:700' rel='stylesheet' type='text/css'/>
The result: 61 Points, four remaining render-blocking css files (style.css, google fonts, and two others, which came with one of my ajax based contact-form plugins) As I didn’t want to give up this plugin, I decided that the css optimization was good enough now.
Use images with higher compression
In terms of image compression, PS gives preference to its own compression standards. Therefore, I replaced nearly all images by the compressed samples from the PS download. In my opinion, these images are a bit too much compressed. Anyhow, my result was now 72 from 100 points. That should do for this website.