Written by Giles Bennett
When undertaking the recent redesign of our site, one of the key requirements was not just that it look the part, but that it responded as quickly as possible. Whilst previously our site had been built on Wordpress, for ease of use for publishing and managing blog posts, that brought with it a certain amount of overhead out of the box - whilst we always endeavoured to remove as much of the cruft as possible, we were always starting from the point of 'slow, but trying to make it faster'.
Building the site from the ground up on Laravel, and using Tailwind for the CSS, however, meant that we started from the point of 'fast, and trying not to slow it down'. One of the best features of Tailwind is its 'just in time' CSS compilation, which scans the files used within the site an extracts the CSS classes, and then builds the CSS file only around those classes. This means that there is no extraneous cruft - when minified, the entire site's stylesheet is just 19kb in size. We always prefer minimalism in the sites which we design, not just because a clearer, uncluttered approach is better for the viewers, but because of the importance of speed in search engine optimisation and rankings.
Having complete control over what was included, and when, gave us fine-grained control. Rather than having to unpick Wordpress's default 'throw the kitchen sink at it' approach by including everything that's required on any page into all pages, we could ensure that scripts and stylesheets for - for example - displaying images in lightboxes, or marking up code snippets - were only included on the pages on which they were required.
Whilst we are fans of Font Awesome, we chose to use SVGs for the link images - each one is around 3kb, at most. Since they're included inline, there's no reliance on external scripts or stylesheets, no flash of unstyled content (or delayed appearance) and no need to load large libraries when only a few assets are used from them.
The few non-SVG images used are always run through the fantastic (and free) TinyPNG, and are served using imagesets offering up WebP to those browsers which will accept them, and PNG to those which won't.
This slimmed down approach results in a site which has a mere 16 assets, including the HTML itself, totalling under 250KB, roughly a third of which is scripts, a third fonts, and an eighth images. That then results in a load time (tested via Pingdom) of around a quarter of second when Laravel's caching (which we covered in a separate blog post earlier in the year) is enabled, as shown below.
