How Netflix Cut Page Load Time by 50% with JS Reduction & Prefetching

Because I have been working on video pages for a year and a half, and Netflix's tech stack is similar, I translated this article for collective learning. The page contains many details worth deep diving, and the analysis offers basic ideas for our own page optimization.

Netflix is a globally outstanding streaming service. Since its 2016 launch, Netflix found users register both on mobile and web.

By optimizing the JavaScript used on the logout page and employing prefetching, developers delivered a better experience and improvements:

Time-to-Interactive reduced by 50%.

JS bundle size decreased by 200 KB; client uses a lighter JS library while server still renders with React.

Prefetching CSS and JS shortened interactive time by 30% on navigation to other pages.

Reducing JS to Lower Time-to-Interactive

Netflix engineers optimized the registration and login pages.

The page initially loads about 300 KB of JavaScript, including core React files, third‑party libraries (lodash), and context data.

All Netflix web pages are server‑rendered with React, then hydrated on the client, so the new optimized structure must stay consistent.

Using Chrome DevTools and Lighthouse to simulate a 3G load showed a 7‑second load time, which is too long for a simple logout page, prompting investigation.

Disabling JavaScript in the browser helped determine whether React is truly needed for the logout page.

Since most elements are plain HTML, pure JavaScript can replace click handling and class toggling; a language switcher written in vanilla JS saved about 300 lines compared to the React version.

The full list of components migrated to vanilla JavaScript includes:

Basic interaction (center tab)

Language switcher

Cookie banner (for non‑US visitors)

Client‑side logging for analytics

Performance measurement and reporting

Ads (sandboxed in an iframe)

Removing React, Lodash, and other libraries reduced the total JavaScript payload by over 200 KB, cutting the logout page’s interactive time by more than 50%.

In lab tests, Lighthouse confirmed that users could interact with the Netflix page much faster; Chrome User Experience Report shows First Input Delay (FID) is fast for 97 % of desktop users.

First Input Delay measures the latency from a user's first interaction to the browser's response.

Prefetching Resources for Subsequent React Pages

To further improve performance when browsing the logged‑out homepage, Netflix prefetches resources for the next page the user is likely to visit.

This is achieved using two techniques: the built‑in browser prefetch API and XHR preloading.

Prefetch is a browser API that hints the browser to fetch resources (HTML, JS, CSS, images) ahead of time, though it cannot guarantee loading and lacks universal support.

Prefetching vs XHR

XHR, a long‑standing browser standard, achieves about a 95 % success rate for caching resources. While XHR prefetch cannot fetch HTML documents, Netflix uses it to prefetch JavaScript and CSS for subsequent pages.

Note: Netflix’s HTTP response headers prevent HTML caching via XHR, but link prefetch works as expected.

// Create a new XHR request
const xhrRequest = new XMLHttpRequest();
// Open the resource request with "prefetch"
xhrRequest.open('GET', '../bundle.js', true);
// Fire!
xhrRequest.send();

Using built‑in prefetch and XHR to prefetch HTML, CSS, and JS reduced interactive time by 30% without rewriting JavaScript or harming the logout page’s performance.

Netflix developers observed reduced interaction metrics and measured cache‑hit rates directly in Chrome DevTools.

Page Optimization Summary

By applying prefetch and optimizing client code on the Netflix logout page, the company significantly improved interaction time metrics during registration. Prefetching future pages cut interactive time by 30% on the second page, which contains the SPA registration flow.

Although React is useful, it does not solve every problem. Removing React from the first login page’s client code boosted interaction time improvements by over 50%, leading to higher click‑through rates on the register button.

Netflix does not use React on the homepage but prefetches it for subsequent pages, allowing the SPA registration flow to benefit from client‑side React.

For more details, see Tony Edwards’ A+ talk: https://www.youtube.com/channel/UCGGRRqAjPm6sL3-WGBDnKJA

Conclusion

Netflix identified opportunities to improve interaction time by closely monitoring JavaScript cost. Use the provided tool to assess your own site’s potential.

Netflix chose to server‑render the login page with React while prefetching React and the rest of the registration flow code, optimizing first‑load performance and later navigation.

Consider whether vanilla JavaScript is an option for high‑traffic parts of your site. If a library is necessary, try to download only the code needed for each user. Techniques like prefetching help reduce load time for future navigation.

Additional Notes

Netflix considered using Preact; for simple low‑interaction flows, vanilla JavaScript is a simpler choice.

Netflix experimented with Service Workers for static asset caching. Safari initially lacked support, but now it does. The registration flow must support older browsers, as many users register on older browsers but watch on native apps or TV devices. The login page is highly dynamic, undergoing rigorous A/B testing with machine‑learning models customizing messages and images per location, device type, and other factors across nearly 200 countries.

For more on A/B testing, see Ryan Burgess “Testing Into A Better User Experience”.