Что вы можете сделать на сайте, чтобы достичь такой же скорости как у Netflix

Ответ нашли на Medium в статье руководителя разработки браузера Google Chrome Эдди Османи, делимся переводом и полезными лайфхаками.

Так что нужно сделать, чтобы сайт летал так же, как Netflix?

Сократить время загрузки и избавиться от лишнего JavaScript

Логично, что программисты сервиса начали оптимизацию с главной страницы, где происходит первое взаимодействие пользователя с сайтом: знакомство с ним, регистрация и переход в другие разделы.

Сначала она представляла собой грустное зрелище. Страница содержала 300 КБ JavaScript, частично работающий на библиотеке React и других библиотеках со стороны клиента (например, служебной библиотеке Lodash). Плюс контекстные данные, необходимые для перевода объектов в React. В общем, целый винегрет.

К слову, обслуживание JavaScript на стороне клиента — довольно дорогое удовольствие.

Скорость тоже оставляла желать лучшего. DevTools и Lighthouse, имитирующие загрузку страниц в браузере Chrome, показали, что на это у Netflix уходит семь секунд — слишком долго для простой целевой страницы.

Но просто так все снести было нельзя. Все страницы Netflix обслуживает серверный рендеринг React, который рендерит HTML и передает контент на страницу. Было важно сохранить ее первоначальную структуру, иначе пришлось бы очень много переделывать.

Тогда разработчики Netflix решили действовать постепенно. Сначала отключили JavaScript и понаблюдали за тем, какие элементы сайта еще функционируют, чтобы определить, так ли нужен React главной странице.

Оказалось, что сайт может спокойно работать и без него. Библиотека только занимает место, сильно замедляя загрузку.

Поскольку большинство страниц на Netflix написаны на базовом HTML, оставшиеся элементы (обработка кликов, добавление классов) без проблем заменили простым JavaScript, не утяжеленный какими-либо библиотеками. Переключатель языка, изначально написанный с помощью React, тоже перестроили на обычный JavaScript. Строчек кода стало в разы меньше, даже меньше 300.

В итоге на нативный JavaScript портировали следующие элементы:

• Кнопки для основного взаимодействия (кнопки прокрутки, вкладки разделов)
• Переключатель языка
• Баннеры сookies (для посетителей за пределами США)
• Авторизация на стороне клиента (аналитика)
• Регистрация
• Измерение производительности
• Загрузочный код пикселя атрибуции рекламы (загружается в iFrame)

Результаты, однозначно, не разочаровали. Несмотря на то, что изначально React занимал всего 45 КБ, после удаления этой, других служебных библиотек и соответствующего кода приложения на стороне клиента общий объем JavaScript сократился более чем на 200 КБ. Это позволило ускорить скорость загрузки главной страницы на 50%.

Еще немного цифр в качестве доказательства эффективности метода.

Оптимизированную страницу протестировали на Lighthouse. Интервал времени передачи (TTI, Transmission Time Interval) Netflix на десктопе составил меньше трех с половиной секунд!

А скорость первой задержки ввода (First Input Delay, FID), которая показывает время между первым взаимодействием пользователя со страницей (например, нажатием на кнопку) и ответом сайта на него, увеличилась на 97%. Круто, че.

Сделать предварительную выборку React для последующих страниц

Но недостаточно только удалить React JS.

Чтобы еще ускорить сайт и повысить производительность во время навигации, разработчики Netflix придумали еще один хитрый метод — использовать время, которое пользователь проводит на целевой странице, для предварительной загрузки следующих страниц, куда они вероятнее всего пойдут.

Для этого они использовали встроенный в браузер API <link rel=prefetch> и предварительную выборку XHR.

Встроенный API состоит из простого тега ссылки внутри тега head страницы. Он предлагает браузеру предварительно выбрать какой-либо ресурс (HTML, JS, CSS, изображения), но это не гарантирует, что браузер действительно будет выбирать.

Предварительная выборка XHR, с другой стороны, уже много лет стандарт браузера и обеспечила 95% успеха, когда команда Netflix предложила браузеру кэшировать ресурс. Хотя выборку XHR нельзя использовать, чтобы предварительно выбрать HTML-документы, Netflix с помощью нее сделали предварительную выборку пакета JavaScript и CSS для последующих страниц.

Примечание. Конфигурация заголовка HTTP-ответа Netflix сделана так, чтобы предотвратить кэширование HTML с помощью XHR (не кэширует HTML второй страницы). В противном случае ссылка prefetch работает должным образом, как она работала бы с HTML, даже если до определенного момента кеша не было вообще.

Используя эти два способа, Netflix сократил время до интерактивности (time to interactive) на 30%.

Оптимизация сайта Netflix: выводы и результаты

За счет оптимизации кода на стороне клиента сервис смог значительно улучшить многие свои показатели.

• Время до интерактивности сократилось на 30%.
  Вывод: Прорабатываем предварительную загрузку страницы с помощью встроенного API браузера и предварительной выборки XHR.
• Скорость сайта (Time-to-Interactive) увеличилась на 50%.
  Вывод: Мы не выступаем ярыми противниками React. Это, безусловно, полезная библиотека, но она не в состоянии решить абсолютно все проблемы. Поэтому не паримся и удаляем React из кода на стороне клиента на странице регистрации.
• React используется на стороне клиента в течение всего процесса регистрации одностраничного приложения.
  Вывод: Выпиливаем React из главной страницы, но предварительно выбираем его для последующих.

Если вы хотите узнать больше о том, как Netflix оптимизирует свой ресурс, то послушайте доклад инженер-программиста сервиса Тони Эдвардса.

Заключение

Сервис смог достичь идеального компромисса между сервером и клиентом: серверная визуализация целевой страницы с помощью React и предварительная загрузка последующих страниц. Это позволило значительно повысить производительность при первой загрузке и ускорить процесс регистрации, чей пакет JS гораздо тяжелее, чем у других процессов и страниц.

Если вы хотите провернуть такое же со своим сайтом, то сначала проверьте, располагает ли он для этого необходимыми ресурсами с помощью инструментов повышения производительности для разработчиков.

Еще из опыта Netflix

• Сначала сервис хотел перейти на библиотеку Preact, но нативный JavaScript оказался более подходящим для его стека.
• Главная страница сервиса довольно динамична. Ее эффективность он постоянно проверяет с помощью A/B тестов, а искусственный интеллект используют для настройки сообщений и изображений в зависимости от местоположения, типа устройства и других факторов.