Netflix Web Performance Optimization

Time:2021-6-12

1. Reduce the size of JavaScript

The original page (the first page of logout status) contains 300KB JavaScript, including react, lodash and other libraries. Using chrome to simulate 3G link, the loading time is 7S.

Netflix Web Performance Optimization

Because the page is composed of simple HTML elements, react is no longer necessary. Nafi team used native JavaScript to reconstruct the page. After deleting react and several libraries, the size of JavaScript is reduced by more than 200KB. The TTI time is reduced by 50%.

Netflix Web Performance Optimization

Using lighthouse to test Netflix’s home page, the TTI time is less than 3.5s

Netflix Web Performance Optimization

97% of users’ FID time is also very short

Netflix Web Performance Optimization

Notes on Nouns

For more description of web performance indicators, I will open a separate article. Here I only refer to those mentioned in the article

Lighthouse

Lighthouse is an open source automation tool that provides Web page quality. Lighthouse can be run as an extension of chrome or through the command line.

Netflix Web Performance Optimization

Click generate report to start the test

Netflix Web Performance Optimization

TTI

Time to interactive: the time from the beginning of loading a page to the end of loading its main sub resources. An excellent TTI time should be less than 5S.

How to calculate TTI?

  1. Start with FCP (first Contentful paint).
  2. Find whether there is a 5S silent window from FCP. The definition of silent window is: there is no long task, and there are no more than 2 get requests in pending.
  3. Starting from the silent window, look forward to find the first long task. If the long task cannot be found, it will stop at FCP.
  4. The time of TTI is the time when the silent window looks forward to the end of the first long task. If there is no long task, it is the time of FCP.

The figure below is a diagram of the above process

Long tasks refers to all tasks that take more than 50 ms to execute

Netflix Web Performance Optimization

SSR and TTI

SSR technology shortens the FCP time of web pages (because HTML has been rendered in the server, only need to be rendered in the client). However, SSR may lead to the increase of TTI time, because the time of FCP is advanced, but you still need to load the JavaScript file. We should reduce the time between FCP and TTI. If necessary, we can clearly inform the user that the resource has not been loaded, so as to avoid that the user task page does not respond.

How to measure TTI

You can use lighthouse tools to measure

FCP

First Contentful paint, the time from the beginning of loading the page to rendering the content (any part) of the page on the screen. Content refers to: text, image, background image, SVG and non blank canvas elements.

Netflix Web Performance Optimization

How to measure FCP?
  1. Chrome user experience report
  2. Lighthouse
Measuring FCP with JS

The easiest way to use it is to use itweb-vitalslibrary

import { getFCP } from 'web-vitals';

getFCP(console.log);

FID

First input delay, the time from the user’s first interaction with the page (click the button, or) to the corresponding interaction with the browser. Excellent FID should be less than 100ms.

When the browser’s main thread is busy with other operations, “input delay” occurs. For example, when the browser is parsing and executing a large JS file, the browser cannot run any event listener. At this time, if the user clicks the button, it will form “input delay”.

Netflix Web Performance Optimization

The yellow part in the figure above represents the busy state of the main thread. After FCP and before TTI (the page seems to be interactive, but the resource has not been loaded yet), there may be a long “input delay”. If the user interacts with the page near the longest yellow block, a longer FID will be generated.

How to measure FID?

have access toChrome user experience reportOrweb-vitalslibrary


import { getFID } from 'web-vitals';

getFID(console.log);

2. Pre read react for subsequent pages

In order to improve the performance of the next page, we can prefetch resources on the current page, which can be realized by two technologies. use<link rel=prefetch>, or XHR prefetching.

<link rel=prefetch>Prefetching can not guarantee that browsers will prefetch, and some browsers are not compatible.

Netflix Web Performance Optimization

//An example of XHR prefetching
const xhrRequest = new XMLHttpRequest();
xhrRequest.open('GET','../bundle.js',true);
xhrRequest.send();

Through prefetching, TTI time is reduced by 30%

Netflix Web Performance Optimization

other

  1. Netflix is considering using preact (a react like Library) instead of react. For simple pages, using vanilla JS is a simpler choice
  2. Netflix tries to cache static resources with service workers

original text

reference resources

Recommended Today

The use of springboot Ajax

Ajax overview What is Ajax? data Ajax application scenarios? project Commodity system. Evaluation system. Map system. ….. Ajax can only send and retrieve the necessary data to the server, and use JavaScript to process the response from the server on the client side. data But Ajax technology also has disadvantages, the biggest disadvantage is that […]