Image for post
Image for post

A Netflix Web Performance Case Study

Improving Time-To-Interactive for Netflix.com on Desktop

Addy Osmani
Nov 5, 2018 · 7 min read

Reducing Time-to-Interactive by shipping less JavaScript

Image for post
Image for post
The Netflix.com homepage for new and logged-out members
Image for post
Image for post
Homepage tabs are an example of a component initially written using React
Image for post
Image for post
Network throttling for the unoptimized Netflix.com in Chrome DevTools
Image for post
Image for post
Image for post
Image for post
Payload comparison before and after removing client-side React, Lodash and other libraries.
Image for post
Image for post
Lighthouse report after the Time-to-Interactive optimizations were made
Image for post
Image for post
First Input Delay (FID) measures the delay users experience when interacting with the page.

Prefetching React for subsequent pages

Image for post
Image for post
Comparison of prefetching techniques
// create a new XHR request
const xhrRequest = new XMLHttpRequest();
// open the request for the resource to "prefetch"
xhrRequest.open('GET', '../bundle.js', true);
// fire!
xhrRequest.send();
Image for post
Image for post

Netflix logged-out homepage — optimization summary

Conclusion

Additional notes

Dev Channel

Developers Channel - the thoughts, opinions and musings…

Addy Osmani

Written by

Eng. Manager at Google working on Chrome • Passionate about making the web fast.

Dev Channel

Developers Channel - the thoughts, opinions and musings from members of the Chrome team.

Addy Osmani

Written by

Eng. Manager at Google working on Chrome • Passionate about making the web fast.

Dev Channel

Developers Channel - the thoughts, opinions and musings from members of the Chrome team.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store