Какие шаги предпринять для оптимизации долгой загрузки страницы

Что проверяют

Пойдёте ли вы от измерения или начнёте перечислять советы из статей десятилетней давности. Хотят увидеть порядок действий: найти узкое место, починить именно его, подтвердить замером. Следом спрашивают, что тормозило на вашем проекте и насколько удалось ускорить.

Как отвечать

Первый шаг всегда измерение, в двух срезах:

• поле: реальные пользователи, CrUX и свой сбор через web-vitals. Ориентиры: LCP до 2.5 с, INP до 200 мс (заменил FID в 2024 году), CLS до 0.1;
• лаборатория: Lighthouse и вкладка Performance в DevTools, обязательно с троттлингом сети и процессора, иначе на быстром ноутбуке всё выглядит прекрасно.

Дальше по водопаду:

• TTFB: серверный рендер, тяжёлые запросы в базу, отсутствие кэша, география. Лечится кэшем, CDN, заголовком Cache-Control со stale-while-revalidate, сжатием brotli, ранними подсказками 103 Early Hints;
• блокирующие ресурсы: CSS блокирует отрисовку, синхронный скрипт в head блокирует парсер. Критический CSS инлайном, остальное асинхронно, скрипты через defer или type="module";
• элемент LCP: найдите его в DevTools, дайте fetchpriority="high" и preload, никакого loading="lazy", картинка в AVIF или WebP с srcset и явными width и height;
• JavaScript: разбиение на чанки, ленивые импорты тяжёлых библиотек, бюджет на размер бандла прямо в CI. Чаще всего основной вес дают сторонние скрипты: аналитика, чат поддержки, тег-менеджер;
• шрифты: свои woff2 с preload, font-display: swap, подмножество символов, size-adjust у запасного шрифта против скачка макета.

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

Где спотыкаются

Начинают чинить, не измерив. Минифицируют то, что и так минифицировано, пока TTFB держится на секунде из-за отсутствующего индекса.

Тащат советы из старых статей: склеить все файлы в один, раскидать статику по доменам. При HTTP/2 и HTTP/3 это вредно, крупный общий бандл ломает кэширование.

Отчитываются баллом Lighthouse на своей машине. Балл синтетический, решения принимают по полевым данным, где живут медленные телефоны и плохая сеть.