Mobile web performance has three key problem areas: images, scripts, and fonts. This post talks about each area, why it's a problem, and how to fix it.
Images, scripts, and fonts, huh? That sounds right on when you consider the recent uptick in creating rich experiences for users on the web.
If you asked me to name the single greatest indicator of performance for pages served to mobile devices, I’d say this: faster pages are (almost) always less than 1 MB in size. Show me a fat page, and I’ll show you a slow page.
This is why it was alarming to discover that, according to the Mobile HTTP Archive (which tracks page metrics for the top million Alexa-ranked sites), the average page served to mobile devices carries a payload of 1109 KB. As the graph below illustrates, this number has more than doubled since 2012, when the average page was 511 KB.
Looking at the year-over-year numbers, it’s interesting to note that growth has been consistent, with a median growth rate of around 28%. If this continues, the average page will be well over 2 MB in size by 2018 — a year that doesn’t seem that far away.
But we don’t need to get hung up on the future. The present is troubling enough.
When it comes to mobile performance, there are three key problem areas: images, scripts, and fonts. Today, let’s talk about each of these areas, why it’s a problem, and how to fix it.
Here's a few recommendations of my own to each of the author's problem areas:
Be sure that you're using the right image for the right task. There's a load of server-side image manipulation libraries available that can either pre or inline process based on requirements. For example, on this site, thumbnails and splashes (which make up the tiles) are inline rendered, then cached so that navigation pages load quicker--only rendering the "full, unaltered image" on the article if the author has selected to do so (such as wanting to present HDR images).
Understanding how browsers manage internal connection pools and establish parallel connections can go a long way to improving performance. Take a look at this testing tool to find out how many parallel connections your browser supports. It's normally 4 to 6 (though you can update some browsers to support more). With this in mind, take the number of file dependencies of your site and you'll see your bottleneck. Have 20 files and only 4 roadways? That's a traffic jam!
Consider using bundling--combining all your scripts together--for localized scripts and reducing your external dependencies. It's nice to be able to pull 20 files from a cloud CDN, but don't let your user's browser be the bottleneck.
The right font can realy set the tone of a website... fun and funky to professional and reserved with a simple update. Google has a great article on trimming down fonts and optimizing web font download size. The gist? Only download the font weights you plan to use and, if possible, limit your characters to those you expect to use (e.g. don't download the full Japanese character set if your site will only ever have English content in that font face).