Скорость загрузки сайта и Core Web Vitals: как ускорить

Три метрики, и одна из них новая

Core Web Vitals — это три показателя. Важный момент, на котором спотыкаются старые статьи: в марте 2024 года состав изменился. FID убрали, вместо него теперь INP. Если где-то до сих пор написано про FID — материал устарел.

• LCP — как быстро появляется главный элемент экрана (крупная картинка или заголовок). Грубо: за сколько человек видит, что страница загрузилась.
• INP — насколько быстро сайт откликается на действия: нажали кнопку — через сколько что-то произошло. Пришёл на смену FID и оценивает отзывчивость честнее.
• CLS — прыгает ли верстка при загрузке. Когда вы целитесь в ссылку, а она уезжает вниз из-за подгрузившейся картинки, — это плохой CLS.

Что реально тормозит сайт

В девяти случаях из десяти виноваты две вещи: тяжёлые картинки и лишний JavaScript. Не сервер, не «плохой хостинг», не мистика — именно они. Поэтому и начинать надо с них, а не с тонкой настройки протоколов.

Картинки

Картинки — обычно самая тяжёлая часть страницы. Что с ними делать:

• Перевести в современный формат — WebP или AVIF. Он весит в разы меньше JPEG при том же качестве.
• Сжать. Даже WebP часто можно ужать ещё, без видимой потери качества.
• Задать ширину и высоту прямо в коде. Тогда браузер заранее знает, сколько места занять, и верстка не прыгает — это чинит CLS.

Код

Лишний JavaScript бьёт по INP: пока браузер разбирает мегабайты скриптов, он не успевает отвечать на клики.

• Уберите то, что не используется. Часто половина скриптов — остатки старых виджетов.
• Тяжёлое (аналитика, чаты, карты) грузите отложенно, после основного контента.
• CSS и JS минифицируйте — это делается автоматически при сборке.

Что помогает, но не в первую очередь

Есть вещи, которые дают эффект, но браться за них имеет смысл, когда картинки и код уже в порядке.

Сжатие текста (Gzip или Brotli на сервере) уменьшает вес HTML, CSS и JS при передаче. Обычно включается одной настройкой.

CDN раскладывает статику по серверам ближе к пользователю. Нужен, если аудитория разбросана географически. Если все ваши клиенты в одном городе, а сервер рядом — выигрыш будет копеечный.

Чек-лист ускорения

1. Замерьте старт в PageSpeed Insights — увидите, какая из трёх метрик красная.

2. Чините сначала её, а не всё подряд.

3. Картинки — в WebP/AVIF, сжать, проставить размеры.

4. Скрипты — выкинуть ненужное, тяжёлое грузить отложенно.

5. Включить сжатие Gzip/Brotli на сервере.

6. CDN — только если аудитория географически разбросана.

7. Перепроверьте в PageSpeed после каждого шага, чтобы видеть, что помогло.

Как у нас

Сайты мы отдаём уже с закрытой базой: картинки в webp с проставленными размерами, минификация при сборке, отложенная загрузка тяжёлого. Дальше еженедельная проверка следит за скоростью и сигналит, если какая-то страница начала тормозить. Это дешевле, чем разгонять уже разросшийся сайт постфактум: заложить скорость на старте — минута, догонять потом — недели.