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 миллисекунд. Давай следующую метрику!
React
Отличный план — вот обновлённые цифры после разделения асинхронной библиотеки, внедрения критического CSS и сжатия Brotli: время первой отрисовки 860 миллисекунд, время до интерактивности 2.9 секунды, общий размер бандла 1.2 мегабайта. Главный поток ещё немного снизился, на 120 миллисекунд. Давай перейдём к следующему этапу и посмотрим, насколько мы сможем это улучшить.