Расскажите про опыт оптимизации производительности
Что проверяют
Начинаете ли вы с измерения и знаете ли, что именно оптимизировать.
Как отвечать
Первое и главное: сначала метрики, потом изменения. Оптимизация без замера это гадание, а результат невозможно доказать.
Что измерять. Основные пользовательские метрики: время отрисовки главного содержимого, задержка отклика на действие, стабильность разметки. Плюс размер сборки и время до готовности к взаимодействию. Смотреть надо не только на своём быстром ноутбуке, но и на данных реальных пользователей, где устройства и сеть заметно хуже.
Чем измерять: аудит производительности, вкладка записи в инструментах разработчика, профилировщик React, анализатор состава сборки, сбор метрик с реальных пользователей.
Направления работы, по частоте отдачи:
- размер сборки: посмотреть состав, найти тяжёлые зависимости. Классика это библиотека дат или набор иконок целиком вместо нужной части. Дальше разделение кода по маршрутам и ленивая загрузка;
- загрузка ресурсов: современные форматы изображений и правильные размеры, отложенная загрузка вне экрана, предзагрузка критичного, шрифты с корректным поведением при загрузке, чтобы текст не мигал;
- стабильность разметки: заранее заданные размеры под изображения и рекламные блоки, чтобы содержимое не прыгало;
- отрисовка: виртуализация длинных списков, мемоизация горячих компонентов, подавление частых событий, вынос тяжёлых вычислений;
- сеть: кэширование, сжатие, сеть доставки контента;
- серверный рендеринг там, где важна скорость первого показа.
Расскажите один случай целиком: было столько-то, измерили, нашли причину, сделали, стало столько-то. Такой рассказ убедительнее перечня приёмов.
Где спотыкаются
Оптимизируют по ощущениям без замеров.
Мемоизируют всё подряд вместо работы с размером сборки.
Проверяют только на своей машине с быстрой сетью.
Не могут назвать, насколько именно стало лучше.