Скорость сайта простыми словами: LCP, CLS и заявки

Скорость сайта измеряют не «секундами загрузки вообще», а несколькими показателями: LCP — когда человек увидел главное содержимое экрана, CLS — насколько страница прыгает во время загрузки, INP — насколько быстро сайт отвечает на нажатия. Их называют Core Web Vitals, и поисковики их учитывают.

Почему это про деньги, а не про технику

Человек с телефона в метро не будет ждать. Каждая лишняя секунда до появления заголовка и кнопки — это ушедшие посетители, причём самые нетерпеливые обычно и есть самые горячие. Медленный сайт не «чуть хуже», он просто не получает часть заявок, и в отчётах это выглядит как «мало трафика».

Второй эффект тише, но противнее: страница, которая прыгает при загрузке, заставляет промахиваться по кнопкам. Человек нажимает «Отправить», в этот момент подгружается картинка, кнопка уезжает вниз — и нажатие уходит в пустоту.

Три показателя, которые стоит знать

• LCP — время до появления самого большого элемента первого экрана: обычно заголовка или главной картинки. Хорошо — до 2,5 секунды на телефоне.
• CLS — суммарный сдвиг вёрстки. Хорошо — почти ноль. Главные виновники: картинки без указанных размеров, баннеры, которые появляются сверху, и шрифты, которые подменяются на ходу.
• INP — задержка ответа на действие. Хорошо — до 200 миллисекунд. Страдает от тяжёлых скриптов: чатов, карт, аналитики, которые грузятся все сразу.

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

Картинки. На большинстве сайтов 80% веса — это фотографии в исходном размере с фотоаппарата. Сжатие и современный формат вроде WebP уменьшают страницу в разы, и это ничего не стоит.

Сторонние скрипты. Каждый чат, пиксель и виджет — это запрос к чужому серверу, который вы не контролируете. Посчитайте, сколько их у вас, и уберите то, чем никто не пользуется.

Указанные размеры картинок и предзагрузка шрифта. Две строчки в коде, а прыжки вёрстки исчезают.

Частые вопросы