In this video, Googler Jake Archibald offers developers solutions for drastically improving page load performance for your web app. He ticks through the ways to greatly decrease both perceived and actual page-load times, increasing the quality of the user experience.

While many of the solutions are universal, the focus here is on js-based apps and working with potentially sluggish third party APIs for your data. He tests against slow mobile networks and includes his take on caching and moments of “lie-fi” network connectivity, when your mobile device flickers in that one bar range, pretending to deliver real service, when it should probably just say what it means: offline.

Why Focus On Performance?

2.2 seconds off load time = +15% downloads.
Mozilla

60% faster = +14% donation conversion.
Obama campaign

Halve the load time = +15% revenue.
AutoAnything

Every 0.1 second reduced = +1% revenue.
Walmart
Solutions cover CSS, JS

Some of the Solutions

Load javascript asynchronously

<script src="script.js" async></script>

Load CSS asynchronously

Checkout loadCSS, a javascript function for loading CSS asynchronously.

Stream the response using chunked transfer encoding

Learn more about chunked encoding.

Use a service worker

About service workers:

Rich offline experiences, periodic background syncs, push notifications— functionality that would normally require a native application—are coming to the web. Service workers provide the technical foundation that all these features will rely on.

Use a streaming api (futurama)

Still a spec at the time of this post, but some hacks as outlined in Jake’s video can perhaps make it useful now.

This specification provides APIs for creating, composing, and consuming streams of data.

Discuss

Chat with me, Nat Guy (@natguy) the reposter and Google’s Jake Archibald (@jaffathecake) the author of the video.