Core Web Vitals простыми словами

Три буквы, которые стоит знать

CLS — тот самый эффект, когда вы целитесь в кнопку, в этот момент подгружается баннер, всё съезжает, и палец попадает в рекламу. INP — когда вы нажали «отправить», ничего не произошло, и вы нажали ещё три раза.

Что обычно портит показатели

• Картинки из фотоаппарата. Фотография на 4 МБ в шапке — самая частая причина плохого LCP.
• Шрифты. Текст либо ждёт загрузки шрифта и не показывается, либо прыгает при подмене.
• Блоки без размеров. Браузер не знает, сколько места занять, и вёрстка скачет.
• Скрипты. Три чата, два счётчика и виджет обратного звонка убивают отзывчивость.

Что даёт эффект быстрее всего

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

Влияет ли это на позиции

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

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

Алексей Сафонов, whysafe

Фрилансер-разработчик с 2023 года: игры на Unity, Telegram-боты, сайты и автоматизация на Python. 149 отзывов на Kwork. Пишу о том, что делаю сам каждый день. Есть вопрос по статье? Напишите мне в Telegram, отвечу.