Способы оптимизации Frontend приложений
Введение
В битве за пользователя побеждает не только хорошее предложение, но и быстрое. Дорогой разработчик! Давай поборемся за скорость твоего фронта и попробуем оптимизировать несколько вещей в твоем приложении!
Снижение веса бандла
Стоит осознанно подходить к выбору библиотек. Каждая зависимость тянет за собой еще сотню других. Иногда нам нужно всего лишь работать с форматом даты, а мы тянем целый moment.js, хотя могли бы обойтись более «легкими» аналогами.
Важно следить за размером итоговой сборки, потому что перед тем как отобразить проект на экране, браузер сначала тянет всю сжатую сборку по HTTP, затем распаковывает и парсит весь код. Это очень трудоемкий процесс.
В идеале вес проекта не должен превышать 150–300 КБ gzipped. Более реалистичный пример продакшн сборки - 400–700 КБ gzipped. Всё, что выше, уже проблема. Тяжелые сборки стоит подгружать частями, использовать ленивую загрузку модулей и не забывать про tree-shaking и минификацию кода.
Оптимизация рендера
Рендер дорогое мероприятие, а ререндер еще дороже! Нужно контролировать DOM-дерево и не допускать ненужных перерисовок.
Reflow, Repaint и Composite очень трудозатратный процесс. Изменение одного узла вызвает перерисовку всех дочерних узлов, а иногда и всего дерева. Поэтому стоит быть аккуратным с реактивностью в популярных фреймворках и мемоизировать списки, колбеки и компоненты.
Оптимизация изображений
Правильное использование форматов и разрешений решает уже половину проблем с тяжелой загрузкой картинок.
Для фотографий используйте WebP и AVIF, а для иконок и графиков SVG и PNG. Делайте адаптивные изображения: используйте srcset и sizes, создавая версии под разные ширины (например, 320, 640, 1280, 1920). Это может сократить трафик на мобильных устройствах на 30–70%.
Бэкенд должен по возможности отдавать сжатые картинки, а мы подгружать большие изображения по мере необходимости, когда они находятся в зоне видимости пользователя.
Оптимизация сетевых запросов / работа с данными
Очень часто «собака зарыта» в неоптимальных запросах данных. Дублирующие или долгие запросы, неоправданные цепочки промисов тормозящие поток выполнения.
Убираем дубли запросов. Долгие и тяжелые запросы выполняем в фоне. Разбиваем цепочки промисов и выполняем запросы параллельно там, где это возможно. Кэшируем запросы, если есть такая возможность.
Оптимизация кодовой базы
Пройдитесь по всем ключевым модулям и убедитесь, что кодовая база не содержит сложных абстракций, лишних импортов и неоправданно сложных вычислений, а алгоритмы выполняются по возможности с алгоритмической сложностью O(n). Упрощение наш лучший друг!
Улучшение восприятия скорости (UX-Performance)
Пользователь должен увидеть что-то полезное до того, как всё реально загрузилось. Используем скелетоны. Скелетоны применяются, когда:
долгая загрузка контента (списки, карточки);
тяжелые API.
Если интерфейс пустует первые 1–2 секунды, мозг пользователя решает, что сайт тормозит. Если появляется хоть какой-то каркас, даже пустой, ощущение скорости будет выше.
Короткая, быстрая, «дешевая» анимация может скрыть микролаги и сгладить переходы. Если пользователь нажимает кнопку, он должен сразу получить фидбек, даже если реальный результат придёт позже.
Например:
кнопка мгновенно меняет состояние;
optimistic UI, если концептуально подходит;
disable/loader при реальной необходимости.
Нормальные проекты выигрывают именно за счёт UX-Performance, потому что железная оптимизация бандла и рендера всегда ограничена реальностью. А вот восприятие скорости можно сильно улучшить. Наша задача снижать тревожность при загрузке интерфейса, а не превращать его в мигающий цирк.
Профилирование и Lighthouse
Профилирование можно разбить на три части:
CPU-профилирование
Самое полезное:
частые перерисовки;
«жирные» функции;
рекурсивные или цикличные вызовы;
тяжёлые вычисления на UI-потоке.
Performance таб в DevTools
Обращаем внимание на:
long tasks больше 50 мс;
layout thrashing (Layout → Recalculate → Layout → Repaint — и так по кругу);
миллионы event listeners;
«лишние» рендеры, особенно в React или Vue.
Memory-профилирование
Показывает:
утечки памяти;
незакрытые подписки;
огромные массивы в памяти;
кэши, которые никто не чистит.
Lighthouse
Lighthouse покажет ключевые метрики загрузки (LCP, FCP, TTI), подсветит тяжёлые ресурсы и найдёт очевидные проблемы, например: огромные картинки, неиспользуемый CSS, блокирующие скрипты.
Заключение
В этой статье я собрал джентельменский набор оптимизационных работ. Пройдясь по каждому пункту, можно оптимизировать приложение, пусть и не полностью, но точно попробовать выиграть в битве за скорость.