SEO-курс #6: Скорость загрузки сайта

С каждым годом скорость загрузки сайта становится все более важным фактором SEO. Ключевым событием в этой области стал май 2020 года, когда Google официально объявил, что скорость загрузки сайта станет значимым фактором SEO-оптимизации, начиная с мая 2021 года. С того момента все SEO-специалисты познакомились с новым термином - Core Web Vitals.

Что такое Core Web Vitals?

Это показатель и SEO-фактор, который измеряет скорость загрузки сайта, реакцию страницы на различные действия пользователя и визуальную стабильность сайта. По сути, это оценка того, насколько приятно и удобно пользоваться сайтом посетителям.

Указанные факторы производительности сайта Google объединил вместе с протоколом HTTPS (рассматривали в предыдущей главе SEO-курса), адаптивностью для мобильных устройств и некоторыми другими факторами, назвав их "сигналами качества страницы" (page experience signals), которые теперь являются важной частью оптимизации скорости сайта и технического SEO.

Как видно на изображении выше, Core Web Vitals состоит из 3 частей:

1. LCP (Largest Contentful Paint) - объясняет скорость загрузки.
2. FID (First Input Delay) - отображает интерактивность.
3. CLS (Cumulative Layout Shift) - анализирует визуальную стабильность.

LCP - Largest Contentful Paint

Проще говоря, это метрика, оценивающая скорость загрузки основного контента страницы. Ранее вы, возможно, слышали от разработчиков или в SEO-аудите о таких проблемах, как DOM или DOMContentLoad. Это нечто похожее, только Google утверждает, что это гораздо более простой показатель, который рассматривает время рендеринга самого большого видимого изображения или текстового блока. Другими словами, если на сайте есть большое и тяжелое изображение, видео или любой другой фон, загрузка которого занимает много времени, это проблема.

Также, если на сайте большое количество блокирующих рендеринг JS или CSS решений, или ваш сайт настроен с использованием клиентского рендеринга, возможно, в ближайшие месяцы придется выделить ресурсы на улучшение показателя LCP, чтобы сайт лучше соответствовал рекомендациям Google по SEO.

FID - First Input Delay

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

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

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

Задержка первого ввода (FID) помогает определить это потенциальное недовольство пользователя. Важно учитывать, что FID не измеряет время обработки событий или время, необходимое для рендеринга макета или изменений контента, а только задержку обработки события, инициированного пользователем.

CLS - Cumulative Layout Shift

Наверняка каждый хоть раз был на сайте, где контент внезапно прыгал вверх или съезжал вниз? Иногда смещаются даже несколько элементов или движение происходит несколько раз.

Ощущение почти такое, будто макет страницы меняется каждый раз, когда на ней что-то новое загружается. Да, наконец-то Google определяет эту проблему как плохой пользовательский опыт.

Google опубликовал это видео, где наглядно показан такой опыт:

Отличное видео, показывающее, что сначала загрузилась только часть страницы, где отображается количество товаров в корзине и задается вопрос, подтверждает ли пользователь покупку. Пользователь, понимая, что что-то не так, хочет нажать "Нет, вернуться назад", но в этот момент на странице загружается рекламный баннер, и вся страница сдвигается вниз, в результате чего пользователь нажимает "Да, подтверждаю". Мы можем только представить возмущение пользователя и его оценку опыта посещения сайта после этого инцидента.

Итак, как мы понимаем и решаем эту проблему? По сути, ресурсы и контент загружаются на страницу после и поверх существующего контента. Возможно, изображение слишком большое, и оно загружается только после того, как загружен основной контент. Может быть, есть реклама, которая сдвигает контент вниз после того, как загрузилось все остальное на сайте. Может быть, есть боковое меню, которое сдвигает основной контент вправо и тому подобное. Все это примеры нестабильности макета, которые учитываются в совокупном сдвиге макета (Cumulative Layout Shift), измеряемом количеством баллов на основе суммы всех неожиданных сдвигов макета.

Как анализировать свой сайт?

Теперь понятно, что это за зверь Core Web Vitals и что у него внутри. Что делать дальше, как оценить свой сайт и понять, что еще нужно исправить? Во-первых, каждый может войти в свой аккаунт Search Console и посмотреть результаты своих страниц. Правда, здесь результаты видны только для крупных сайтов, для небольших придется использовать инструмент PageSpeed Insights.

Инструмент точно покажет все проблемы на сайте, характеризуя пользовательский опыт в рейтинге отдельно для мобильных устройств и компьютерной версии. Как видно на изображении, у нашего сайта MMN компьютерная версия идеальна. Рейтинг мобильных устройств всегда ниже, это нормально, так как оптимизировать мобильную версию сложнее.

Как видно, измеряются не только упомянутые FID, LCP и CLS, но и другие показатели. При нажатии на каждый конкретный фактор появляется более детальный отчет со всеми потенциальными улучшениями и подробным анализом показателей. В принципе - это руководство по проблемам для специалистов по разработке сайтов, от которых затем нужно требовать решения этих проблем.