We’re taking the lean startup approach with Leeds Anxiety Clinic and trying not to build anything unless we absolutely need it. As a result, when I originally built our website is was functional but not particularly fast.
Now that we’re up and running and have clients coming through the door, I’ve been back over the site to make it faster and better. Below, I’ve detailed what I’ve done. Here’s a before and after using the Lighthouse audit tool:
Turn cache headers on
There were no cache headers on our images, CSS or JavaScript. Part of this was that I was still making changes to the JavaScript and didn’t have any cache-busting functionality in the site yet. Now that I do, I could safely let the browser cache everything for a month.
Replacing jQuery
jQuery is a library whose time has been and gone. But it does make it super easy to throw in some functionality. Now that I have a proper JavaScript setup, however, and as jQuery was mostly just animating things, I replaced it with native CSS animations and vanilla JS.
Compressing the JavaScript
As there was no JavaScript preprocessing going on, it was not compressed. Ironically, this hasn’t made it any smaller because I’ve now got the Webpack bootstrapping in the file. However, it does mean I can easily load in additional modules, which I discuss below, to help with other areas of the site.
Gzip compression
This is a super-easy win because all you have to do is put it in your Apache config and the server does all of the rest.
Async loading of web fonts
We had a total of three blocking font calls in the header of the page. All of this has now gone. I’m using webfontloader to load in the two variations of Lato that we are using.
Fontawesome is used for icons and is loaded in using a classic link tag, however, I’ve moved this link tag to the bottom of the page so that the initial content can be loaded first. On slow connections, this means the icons are missing for a fraction of a second when you load the page but I think it is worth it.
If I was looking to optimise further like I do with Worfolk Anxiety, I would select the individual icons I want, base64 encode them and put them directly in the CSS. But that seems overkill here for the moment.
Finally, I’ve set the font-display CSS property to fallback so that if the fonts are slow in loading, the text will be rendered away using a system font.
Webp images
Oh my god, webp images are so good. They’re like half the size of the already optimised JPEGs and PNGs that they are replacing.
Unfortunately, few browsers support them yet. It’s basically just Chrome (on desktop and Android). So, I’m using the picture tag with a fallback, as everyone does. I can’t wait until webp gets wider adoption.
Unfortunately, there is no way to do a safe fallback in CSS so my background images remain old JPEGs for everyone.
Don't have time to check my blog? Get a weekly email with all the new posts. This is my personal blog, so obviously it is 100% spam free.
Tags: optimisation, speed, web design, Websites
This entry was posted on Monday, October 29th, 2018 at 11:00 am and is filed under Tech. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.