At mySociety we believe in an open, inclusive web and such we try to build web apps that are accessible in the broadest sense. So while we do care deeply about things like WAI and the Equality Act this post isn’t about that — this is about making a site that works if you have a weak connection or an ageing device. I’m talking about performance.

Now while it isn’t a great metric to track, the fact that the average size of a web page is now over three megabytes (and pages served for mobile devices reaching an average of 2.9mb!) demonstrates that this is an age of bloat that assumes good broadband or 4G connectivity and we don’t think that’s right.

As an example here are some numbers about the FixMyStreet site as it displays on mobile after some recent improvements.

To load a working and styled front page on your phone takes around 9KB of HTML/inlined CSS/inlined images (that isn’t a typo – nine kilobytes). How do we pull that off? Well, the site logo and menu are both inlined so we don’t have to wait for them to load, as is the CSS needed to show the top part of the front page. 5KB of JavaScript is loaded (which amongst other things enables the geolocation) and in the background an additional massive 14 kilobytes of CSS (the main mobile stylesheet) and the remaining 20 kilobytes of images (the example report photos and footer links) are being pulled in. The page also uses prefetch to start fetching the remaining JavaScript while the user is entering a postcode or address to actually get started on FMS.

On a desktop there’s a little bit more to add to the mix (more like 66KB of images, 19KB of CSS, plus a webfont taking 77KB) but it’s still lightning quick.

The team haven’t reinvented the wheel to achieve this – they’ve just been ruthless and absolutely focused on only using the minimum amount of code to meet the user need. When the FixMyStreet site is deployed, the JavaScript and CSS is automatically minimised, and at that point we run penthouse to work out the critical CSS to be inlined on the front page. And whilst our main JavaScript does use jQuery, we dropped it from the front page to save yet more up-front time (jQuery is far larger alone than our current front page).

If you are interested in more details of how this was achieved, here’s a post Matthew prepared earlier on many of the same techniques, which he used on his own project traintimes.org.uk.

There are of course still improvements to be made – I imagine many front page viewers of FixMyStreet never need or want to scroll down as far as the images in the footer, so ideally we wouldn’t load them unless they do. Due to Windows Lumia users, which we support for a specific client use case, we’re using Appcache for offline support, but adding some form of more modern service worker would also be nice. And most of this work is for the front page (though it helped other pages too); our main JavaScript could be split up more than it is. It’s a continual process, but here is a good place to pause.

Photo by Braden Collum on Unsplash