Sub-second loading of mobile pages

Different research groups have recently found that:

1. users use smartphones because it's quick and easy
2. smartphone-optimized pages are sometimes (very) slow; the average (mean) loading time is 7 seconds
3. users hate slow pages and are likely to not come back to the website.

Well, then. What's a webmaster to do?

The answer lies in thinking about how the page loads and change a few things.

Firstly, cell networks (3G, and to some extent 4G) have huge latencies compared to wired broadband. These latencies mean that any extra network connection to get an external resource (CSS, JS, images, etc) will add a few hundred milliseconds (at least!) and that will kill the rendering performance of the page.

Secondly, historically webmasters focused on the blocking nature of JavaScript: because the JS can alter the DOM, browsers stop the rendering of pages until they fetch, parse, and execute the JS. That all takes time. 

BUT: CSS is also blocking. Before the browser paints anything on the screen, it needs to know what it looks like; i.e., it will need to have the CSS handy. And if the CSS is not there, it needs to download it (more latency!) and parse it (which has to be done once all the CSS is downloaded because CSS selectors are cascading).

So we need both the JS and the CSS.

Thirdly, instead of trying to get the whole page to render in under a second, think about breaking up the page into the "above-the-fold" part and "the rest. Prioritizing the rendering of the above-the-fold content gives users something to read/interact with while the rest of the page continues to download. This means that in under a second, the user gets something useful.

How do you prioritize the rendering of above-the-fold content? In addition to the page speed best practices, we recommend you inline the CSS and JS required for the above-the-fold content. This means that the rendering of the initial content is not blocked on any more network fetches for external resources.

There is more to it, of course, and full details and references, including the new PageSpeed Insights tool, are in this blog post +Bryan McQuade and I published yesterday :

Finally, there is an important point here: The total loading time can still be more than one second (some pages simply need that), but because we've engaged the user very quickly, the perception the user gets is that the page is fast. To put it as +Steve Souders did earlier this year, we're not just webmasters, we're also "perception brokers":

Steve Souders' Ignite presentation, "The Illusion of Speed", at Velocity 2013.
Shared publiclyView activity