Designing for mobile (performance) first

If you aren’t already using front-end optimisation testing tools like YSlow and Page Speed then you really, really should make it part of your development process. I’ve used them for the past year or so and they’ve helped me squeeze every last drop of performance out of the sites I’ve built. I don’t think I’ve launched anything that’s scored less than 95/100.

On the desktop 90% of page load time is spent on the front-end (that’s everything after you’ve served the HTML). The mobile web brings with it all the normal problems of web performance and then some. Things like massively increased latency, more lost packets and far less computing power to run JS and render complicated CSS layouts.

Guy Podjarny, CTO of Blaze.io, spoke at Google recently about optimising mobile web performance. He shares a few tricks like making a dummy AJAX request every few seconds to keep connection to the mobile tower and using just-in-time image loading (lazy loading) for image heavy sites.

One thing I noticed recently in the excellent HTML5 Boilerplate is mobile first CSS media queries, so rather than style the layout for desktops and then remove floated elements with a max-width media query. It does the opposite with min-width queries, which (I would of thought) allows mobile web browsers to render the page faster.

I’m developing a few sites at the moment that use some of these techniques like lazy image loading and building page layouts on a fluid, responsive grid. At first they were a bit tricky to get my head around and implement but they’re powerful tools that benefit both mobile and desktop users, so I’ll be using them on all new sites I build in the future.