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.
60% faster = +14% donation conversion.
Halve the load time = +15% revenue.
Every 0.1 second reduced = +1% revenue.
Solutions cover CSS, JS
Some of the Solutions
<script src="script.js" async></script>
Load 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.