How Netflix Cut JavaScript and Used Prefetch to Reduce Interaction Time

Original author: Addy Osmani. Translated by UC International R&D Jothy.

TL;DR: There is no universal magic weapon for web performance; a minimal JavaScript bundle rendered on the server can make static pages fast, and libraries can still add huge value for complex pages when used carefully.

This article explains how the Netflix.com desktop homepage was optimized to improve interaction time.

Netflix is one of the most popular streaming services. Since its global launch in 2016, the company noticed many new users signing up on mobile devices with sub‑optimal network connections.

By improving the JavaScript of the registration flow and using prefetch techniques, the team delivered a better experience for both mobile and desktop users.

Loading and interaction time reduced by 50 % on the logged‑out desktop homepage.

JavaScript bundle size decreased by over 200 KB after switching from React and other client libraries to native JavaScript (React still used for server‑side rendering).

Prefetching HTML, CSS, and JavaScript (React) shortened future navigation interaction time by 30 %.

The optimization focused on the logged‑out homepage where users can register or log in.

The original page contained about 300 KB of JavaScript, including React, Lodash, and other utility libraries, plus context data needed to preserve React state.

All Netflix pages are server‑side rendered with React, generating HTML that the client then hydrates.

Using Chrome DevTools and Lighthouse to simulate a 3G connection, the logged‑out homepage took roughly 7 seconds to load, which was considered too slow.

Performance audits revealed a high client‑side JavaScript cost.

By disabling JavaScript in the browser, the team confirmed that most of the page could function without React.

Since most elements are plain HTML, they replaced React‑driven click handling and class toggling with native JavaScript. The language switcher component was rewritten in fewer than 300 lines of vanilla JS.

Components rewritten in native JavaScript include:

Basic interaction (central tab on the homepage)

Language switcher

Cookie banner (for non‑US visitors)

Client‑side logging for analytics

Performance measurement and logging

Ad‑attribution pixel code (sandboxed in an iframe for security)

Although React’s initial footprint was only 45 KB, removing React, several client libraries, and related code reduced the total JavaScript size by more than 200 KB, cutting interaction time on the logged‑out homepage by over 50 %.

In lab tests, the Time‑to‑Interactive (TTI) dropped below 3.5 seconds on desktop.

Chrome User Experience Report shows that First Input Delay is fast for 97 % of desktop Netflix users.

Prefetching Subsequent Pages

To further improve performance, Netflix prefetches resources for pages users are likely to navigate to after the login page.

This is achieved with two techniques: the built‑in <link rel="prefetch"> browser API and XHR prefetch.

The built‑in API adds simple link tags in the page header, hinting the browser to fetch resources (HTML, JS, CSS, images). Support varies across browsers.

XHR prefetch, a long‑standing standard, achieves a 95 % cache‑hit rate. Since XHR cannot fetch HTML, Netflix uses it to prefetch JavaScript and CSS for subsequent pages.

Note: Netflix’s HTTP response headers prevent XHR from caching HTML, but link rel="prefetch" works as expected for HTML.

Using both prefetch methods reduced interaction time by another 30 % without rewriting JavaScript or harming the logged‑out homepage performance.

Conclusion

By closely monitoring JavaScript cost, Netflix identified opportunities to improve interaction time. Teams should ask performance tools whether their sites have similar optimization potential.

Netflix chose to server‑side render the login page with React while prefetching React for later steps of the registration flow, balancing first‑load speed with the needs of a single‑page application.

Consider using native JavaScript where possible; if a library is required, load only the code needed for the current user. Prefetching can safely reduce future navigation latency.

Additional notes: Netflix evaluated Preact as a lighter alternative for low‑interaction pages, experimented with Service Workers for static asset caching (initially limited by Safari), and runs extensive A/B tests powered by machine‑learning models to personalize content across 200+ countries.

Thanks to Netflix UI engineers Tony Edwards, Ryan Burgess, Brian Holt, Jem Young, Kristofer Baxter (Google), Nicole Sullivan (Chrome) and Houssein Djirdeh (Chrome) for their contributions.