3 Ways to Improve an Already High Page Speed Score

When get a new sign-up for our WordPress maintenance and support service Remaintenance, we love showing our new clients that they are getting their money’s worth, by making a visible improvement to their websites in the first couple of days.

Improving the performance grade on Pingdom Page Speed is one of my favorites, because it’s very visible and testable, it is actually good for SEO and getting it as high as possible can prove to be a nice puzzle.

So I set out with our most recent sign-up, Catapult Media, to improve their performance grade. Unfortunately for me, it was already quite high (82/100) and their developers had already taken care of a lot of things like:

Before:

Pingdom score before tweaking: 83 / 100

After:

Pingdom score after tweaking: 95 / 100

In this blog I’ll explain how we managed to bring the Page Speed up to 95/100, and shave off 20% (half a second) of the loading time with some further tweaks.

1. Load static assets from a cookie-less domain – Improving Photon

Even though the website was already using Photon to serve images through the WordPress CDN, I found a lot of images on the home page still loaded straight from the Catapult server.

Like most (home) pages built with current themes, the home page was built up primarily from shortcodes. But when Photon is enabled through JetPack, only images in the actual content (<img src="image.jpg" alt="" />) are replace by Photon images. There was clearly a huge improvement to be made here.

After some horrific tweaking with regular expressions (not my forté) , I wrote a little plugin that grabs all the images it finds hidden in shortcodes and replaces them with Photon URLs.

regular_expressions

Bingo! Load static assets from a cookie-less domain: from 82% to 87%. The ones that are left are scripts and styles that can’t be loaded through Photon. The next improvement would be getting a CDN, or setting up our own cookie-less (sub)domain.

serve-static-content-from-a-cookieless-domain

2. Remove query strings from static assets

Many caches ignore asset urls containing a query string, so getting them out of the way as much as possible greatly improves the website performance. There were 2 things happening here: Better WordPress Minify wasn’t setup to use pretty links, and outputting script URLs using query strings. Easy improvement here was turning on pretty links. Done.

Then, in WordPress, by default all scripts and styles get appended either the version number of the script, or the WordPress version number (depending on how the plugin/theme author loads the script). This is so that a plugin/theme/WordPress update forces the scripts and styles to be downloaded again by visitors. This is neat, but when your webserver sends out ETags and expires headers and you make sure you purge your static asset cache manually whenever you do an update, this is superfluous. If you take off the query string from your scripts and styles, you do have to make sure you manually clear your caches, to make sure updated scripts and styles are served to your visitors.

Taking them off takes just a simple snippet. You can put it in your functions.php, or your functions plugin. We made a Remaintenance tweaks plugin for all our modifications, so that is where we put it:

function remaintenance_remove_query_strings( $src ){
    return remove_query_arg( 'ver', $src );
}

if ( !is_admin() ) {
    add_filter( 'script_loader_src', 'remaintenance_remove_query_strings', 15 );
    add_filter( 'style_loader_src', 'remaintenance_remove_query_strings', 15 );
}

The improvement? 69 to 87 on “Remove query strings from static resources”.

remove-query-string-from-request

 

3. Leverage browser caching: Tweaking htaccess

And now for the improvement with the most impact. Catapult was scoring only 20/100 on this point, because all assets on their server was served without expires headers. This means that browsers are requested to get all the assets (images, scripts, etc.) anew every time they open a page. No good!

The fix was simple: we just added the right expires headers by adding a couple of lines the .htaccess file. We set the default expiry to 1 week, but set some assets we know aren’t going to change to a higher value. This you can of course tweak to your own liking:

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 week"

## EXPIRES CACHING ##

Then, lastly, also Better WordPress Minify has its own expires header setting, which was set to only 48h. We upped that to be a week in the future too and hey presto, we upped the score on leveraging browser caching from 20 to 90/100!

Leaverage-Browser-Caching

 

Conclusion

In all, the score went up from 83 to 95 through these small tweaks and Pingdom downloaded the home page half a second faster than before. We made our report (which by the way shows up on our client’s dashboard) and had one new happy client on board!

Remaintenance-Dashboard

No Comments

Sorry, the comment form is closed at this time.