Yesterday I got a website spec through that had: “must have a desktop PageSpeed performance score >85/100”. At first I was impressed a client knew what PageSpeed was and cared enough to mention it. I was all warm and happy with the idea …for 2 seconds, until I remembered they said they’d prefer a WordPress site. I don’t have too much of a say over the performance of a WP site (just one of the many reasons I prefer building bespoke sites). So I got about testing some sites I’d delivered lately.
www.obliviar.co.uk – 97
www.accabrandkit.com – 100
www.eliterecyclingsolutions.com – 95
www.mrmikey.co.uk – 100
www.transparentdesign.co.uk – 95
Then a few WP sites I’ve helped with recently:
74, 58 & 93
Most of these sites are server side rendered with a bit of Javascript to power a hero image viewer or animation on page.
As you can see; the bespoke builds are a lot more tailored to be optimised for speed but also the I prioritise eliminating other loading issues like the classic “font changing once it has loaded and forcing the page to redraw” that can negatively impact user experience on many sites but seems to just be put with by everyone. Which is why I often advocate for bespoke builds that allow for granular control over every aspect of performance and user experience. Certain things reduce the speed score but are a good trade-off for the rest of the site’s user experience. For example loading (and therefore caching) the whole of the styles, fonts and reusable images on the first load ‘hit’). This gives a worse PageSpeed score but significantly enhances the perceived speed and overall user experience on subsequent interactions. I always fall on the side of user experience rather metrics. Conversely the www.accabrandkit.com site is, at first, just a client log in with nice rotating hero images. There is no need to preload any of the 10+ images or even the javascript. The “first contentful paint” is all rendered server-side. Only after this does the javascript handle the dynamic loading of the other hero images. So this site gets 100/100 for performance. I’ve seen image carousels that load all the images at once which is a horrible idea, especially as they are normally one of the first elements on the page. But this mess comes about as they often ‘plug in’ (esp for WP) and therefore need to be self contained. That and the developers don’t notice/care/know how to mitigate the issue.
In general I don’t test the PageSpeed during development, I test how smooth everything is for the user, first on slow mobile connections – most of the time these things overlap. It’s worth pointing out that PageSpeed is not a perfect metric, I can get 100 today and 98 on tomorrow;s test. Also it always recommends “Serve images in next-gen formats”, formats that I don’t use for various reasons (but that is another rant for another time).
The obliViaR website, achieving a respectable 97/100 despite starting with a full-screen video with JavaScript animations and parallax scrolling, demonstrates how careful planning and execution can deliver visually engaging experiences without sacrificing performance. Techniques like using a poster image for the video and ensuring JavaScript doesn’t block rendering are key to this balance. – I even faded everything all together once the intro video was ready. This certainly is reducing the PageSpeed score, but it looks smoother for the user and the user is king.
This is the first time I’ve had a direct client (that isn’t an agency) ask about PageSpeed. They must understand the benefits of faster loading; a better user experience, less dropped users which means more users ending up at “the end of the funnel” and clicking that CTA or purchasing that item without extra barriers put up by the website.
If you or your company could do with a new website that helps the user get to the end goal easily, quickly and as enjoyably as possible – give us a shout.
(click to view)
(click to view)
