Diablo & React

React

Привет, я тут погрузился в оптимизацию критических путей отрисовки. Думал, можем обменяться опытом, как победить самые серьезные узкие места в приложении с большой нагрузкой. Как насчет небольшого соревнования по производительности?

Diablo

Ну, давай разберёмся с этой задержкой. Приноси данные, я принесу мотивацию. Посмотрим, кто ускорит спринт приложения. Готов?

React

Хорошо, скину последние данные Lighthouse и статистику по бандлу. Будет детальный разбор критического пути, ленивой загрузки и правок service worker'а. Прихвати метрики, посмотрим, кто сколько миллисекунд сэкономит. Погнали.

Diablo

Пришли цифры, дави по полной. Я готов порвать этих заказчиков как нож масло — превратим загрузку в спринт. Выкладывай, что есть.

React

Вот что у меня получилось: 1.1 – первый проход покраски, 3.4 – время до интерактивности, полный бандл 1.7 МБ, CSS 300 КБ, JS 1.2 МБ. Критический путь – 450 миллисекунд в основном потоке. Я выгрызаю 200 миллисекунд из разбора JS и еще 150 миллисекунд из блокировки CSS, перенеся шрифт в конец и разделив CSS. Посмотрим, что твоя "магия" сможет урезать.

Diablo

Отличный проём – уже срезали 350 миллисекунд. Пора заставить основной поток работать в двойном режиме. Переносим тяжёлые библиотеки в асинхронную обработку, остальное разбиваем на чанки, встраиваем критический CSS, и подгружаем шрифт заранее с префетом. Добавляем Brotli на CDN, используем HTTP/2 push для сторонних скриптов, и хорошенько проучим этот TTI в 3.4 секунды – снизим до 100 миллисекунд. Давай следующую метрику!