Can a website ever be fast enough?

This week we decided to challenge ourselves to achieving a perfect 100 out of 100 score on Google PageSpeed Insights for davidnaylor.co.uk.

So far we’ve failed, but are happy to have moved much closer than the 70/100 for mobile and 81/100 for desktop that we started with a few days ago. The website now scores 93/100 on mobile and 95/100 for desktop. The only remaining issue PageSpeed Insights is asking us to consider fixing is in reducing the server response times which is something we’re determined to find a solution to.

If you run the test yourself you’ve be given a list of suggested improvements to make to you website but here’s a rundown of some of the things we’ve done to achieve the score we have so far:

The easy stuff

In improving our score there were a few things that caused us problems, others that we tried but removed and then there’s the stuff that’s just sort of easy and really should already have in place. Here’s a few of those easy fixes:

• Caching – We already cached a lot of files but had to fix a couple of setting as well as cache SVG file types
• Image Compression – Pretty obvious really, some images were compressed while other newly added images were not. Pushing these through a lossless compression engine such as Kracken.io was quick and easy.
• Google Analytics – As well as the standard Google Analytics asynchronous script we had another script that was being cached. We discovered we didn’t really need it so saved a big headache and just removed this part.

The stuff we tried and removed

The David Naylor website runs on WordPress and along with its plugins causes a number of additional headaches as we can’t manually minify the JavaScript and CSS files they include. Initially we looked at other plugins to help us here but they never seemed perfect for the job and included way more settings then I was comfortable playing with.

I looked to manually minify our theme files but that always causes issues and extra work when editing a website in the future. It’s not something I’d ever recommend people do on websites they edit frequently and with WordPress the ability to edit files in the editor really prohibits minifying these files anyway.
If the website were not using WordPress I’d suggest Grunt as the perfect solution here. When setup to do so it will watch files being updated and automatically create minified versions of files for a developer then to upload.

Mod PageSpeed to fix the problems

So we had a number of problems to fix. Things like minifying files like HTML, eliminating render blocking JavaScript and CSS as well as prioritising above the fold content.

In this instance we wanted to see how mod_pagespeed, an apache module provided by Google, would help speed along these fixes. Straight out of the box it minifies a number of filetypes and compresses images amongst other things.

You can enable additional filters and for this website we enabled the following:

• inline_google_font_css – a fix for the critical rendering path and deferring external JS
• prioritize_critical_css – a fix to prioritise visible content by inlining some CSS code within the HTML file
• collapse_whitespace – minifying HTML
• defer_javascript – deferring JavaScript so it does not affect the critical rendering path

After we enabled these we reached our current 90+ scores.

But this isn’t the whole story

While I think we could improve our server response time we’ve run a few follow up tests on WebPageTest and noticed we’ve still got some issues relating to first byte and start render times which possibly blow everything else we’ve done out of the water.

Even if we can achieve a 100 out of 100 score on PageSpeed Insights then our challenge clearly doesn’t end there with start render times an area we could focus.

But even if we achieved this there could be other speed testing services that highlight other opportunities for improvement and while we could chase perfect scores everywhere there must be a limit to how far you can optimize without adversely impacting what you’ve built.

Conclusion

To be honest the challenge here was to chase the 100/100 score with little respect for other concerns. We’d never recommend doing this especially on client or other critical websites. Also if you care much about the source code other see in your website you really might want to avoid certain optimisation techniques.

Personally I have particular issues with the prioritising of above the fold content. Using only mod_pagespeed increases the average page weight of the website and reduces the effectiveness of browser caching. There are workarounds being offered to this technique but they require a manual process and as yet are fairly new so we may find more options over the coming months that improve the process.

While services like PageSpeed Insights help push us towards making our websites faster they are not hard rules to follow blindly in all cases. In many instances you need to use your expertise and choose which improvements are beneficial for your website and don’t badly affect your workflow. Next we’ll be looking to take a more manual approach to some of these things and dig deeper into the effect on site speed rather than just PageSpeed Insights score.

We all want to have a super-fast website but the speed of our websites is only one of many concerns and we need to keep this in mind if we start chasing ever decreasing load times at the expense of everything else.

Further Reading

If you want to know more about improving the speed of your website then these articles are well worth a look:

• Filament Group – Performance RWD
• CSS Tricks – Authoring Critical Fold CSS
• Scott Jehl – LoadCSS
• Tim Kadlec – Fast Enough
• Tim Kadlec – Performance Budgeting with Grunt