A Netflix Web Performance Case Study

A Netflix Web Performance Case Study

  • November 6, 2018
Table of Contents

A Netflix Web Performance Case Study

Netflix is one of the most popular video streaming services. Since launching globally in 2016, the company has found that many new users are not only signing up on mobile devices but are also using less-than-ideal connections to do so. By refining the JavaScript used for Netflix.com’s sign-up process and using prefetching techniques, the developer team was able to provide a better user experience for both mobile and desktop users and offer several improvements.

Loading and Time-to-Interactive decreased by 50% (for the logged-out desktop homepage at Netflix.com) JavaScript bundle size reduced by 200kB by switching from React and other client-side libraries to vanilla JavaScript. React was still used sever-side. The area optimized for performance by the Netflix developers was the logged-out homepage, where users come to sign-up or sign-in to the site.

This page initially contained 300kB of JavaScript, some of which was React and other client-side code (such as utility libraries like Lodash), and some of which was context data required to hydrate React’s state. All of Netflix’s webpages are served by server-side rendered React, serving the generated HTML and then serving the client-side application, so it was important to keep the structure of the newly-optimized homepage similar to maintain a consistent developer experience.

Source: medium.com

Tags :
Share :
comments powered by Disqus

Related Posts

From React Native to Flutter

From React Native to Flutter

Reflectly—From React Native toFlutterWhy we moved 500.000+ users toFlutterThe EarlyDaysReflectly was built using React Native in the summer of 2017. At the time React Native was a relatively new and exciting technology. It promised high productivity and cross-platform mobile development with familiar web technologies.

Read More
Tensorflow 2.0: models migration and new design

Tensorflow 2.0: models migration and new design

Tensorflow 2.0 will be a major milestone for the most popular machine learning framework: lots of changes are coming, and all with the aim of making ML accessible to everyone. These changes, however, requires for the old users to completely re-learn how to use the framework: this article describes all the (known) differences between the 1.x and 2.x version, focusing on the change of mindset required and highlighting the pros and cons of the new and implementations. This article can be a good starting point also for the novice: start thinking in the Tensorflow 2.0 way right now, so you don’t have to re-learn a new framework (unless until Tensorflow 3.0 will be released).

Read More
Why React’s new Hooks API is a game changer

Why React’s new Hooks API is a game changer

I have been developing with React since it’s early days and during that time there have been many attempts by both influencers, as well as the core team to improve the API and patterns developers are using to creating software. One of the biggest challenges we have had was how to share behaviour neatly between components to enable reuse or even just separation of concerns. Every single solution proposed up until this point had some problems associated with it.

Read More