Впервые у нас? Прочитайте наше руководство по SEO для начинающих.

Core Web Vitals: скорость загрузки страницы теперь более важна для SEO

Patrick Stox
Патрик Стокс — консультант по продукту, технический SEO-специалист и амбассадор бренда в Ahrefs. Он является организатором Raleigh SEO Meetup, конференции Raleigh SEO, Beer & SEO Meetup, конференции Findability и модератором /r/TechSEO.
Article stats
  • Linking websites 2
Data from Content Explorer

Shows how many different websites are linking to this piece of content. As a general rule, the more websites link to you, the higher you rank in Google.

Shows estimated monthly search traffic to this article according to Ahrefs data. The actual search traffic (as reported in Google Analytics) is usually 3-5 times bigger.

The number of times this article was shared on Twitter.

    Core Web Vitals или основные интернет-показатели — это метрики скорости, которые являются частью сигналов для Google по работе страниц. Google использует эти сигналы для измерения взаимодействия с пользователем. Метрики измеряют визуальную скорость загрузки по времени рендеринга самого большого элемента (Largest Contentful Paint, LCP), визуальную стабильность — по накопительному сдвигу макета (Cumulative Layout Shift, CLS) и интерактивность — по задержке первого ввода (First Input Delay, FID).

    Взаимодействие со страницей и соответствующие метрики Core Web Vitals будут официально использоваться для ранжирования страниц в 2021 году.

    Источник: Google

    Самый простой способ просмотреть метрики для вашего сайта — воспользоваться отчетом “Основные интернет-показатели” в Google Search Console. С помощью отчета можно легко увидеть, в какую категорию попали ваши страницы, “плохие URL-адреса”, “URL-адреса, требующие улучшения” или “хорошие URL-адреса”.

    В отчете вы также найдете более подробную информацию о конкретных проблемах и список затронутых страниц.

    Факт 1. Метрики делятся на две группы — для настольных систем и для мобильных устройств, но в ранжировании страниц будут использоваться только мобильные сигналы. В марте Google полностью переходит на индексирование с приоритетом мобильного контента, поэтому логично использовать сигналы скорости загрузки на мобильных устройствах, поскольку проиндексированные страницы также будут основаны на мобильных версиях. 

    Факт 2. Данные поступают из Отчета о работе с пользователями Chrome (CrUX), в котором приводятся данные от присоединившихся к программе пользователей Chrome. Метрики будут оцениваться по 75-му процентилю пользователей, поэтому, если 70% ваших пользователей относятся к категории “хорошие”, а 5% — к категории “нуждаются в улучшении”, ваша страница все равно будет оцениваться как “нуждающаяся в улучшении”. 

    Факт 3. Метрики будут оцениваться для каждой отдельной страницы, но Джон Мюллер заявляет, что могут использоваться сигналы для разделов сайта или всего сайта, если данных недостаточно.

    Факт 4. С добавлением этих новых метрик AMP исключается из требований блока “Главные новости” на мобильных устройствах. Поскольку у новых новостей фактически не будет данных о скорости загрузки, вполне вероятно, что для этого могут использоваться метрики более крупной категории страниц или даже всего домена.

    Факт 5. Для одностраничных приложений не измеряются некоторые метрики, FID и LCP, переходы между страницами. Мы поговорим о том, что это такое, через минуту.

    Факт 6. Метрики, как и пороговые значения, могут меняться со временем. Google уже изменил метрики, используемые для измерения скорости загрузки в своих инструментах на протяжении многих лет, а также их пороговые значения для того, что считается быстрым или медленным. Вполне вероятно, что в будущем все изменится снова. Мы поработали над улучшением обработки старых метрик в прошлом году, но нам нужно выполнить еще кое-какую работу с ними, чтобы улучшить обработку новых метрик.

    Чтобы не завышать ожидания, напомним, что существует более 200 факторов ранжирования. Не стоит ожидать существенного эффекта от улучшения метрик Core Web Vitals. Неизвестно, насколько они повлияют на ранжирование, но вряд ли они станут сильным сигналом, особенно учитывая, что многие компоненты взаимодействия со страницей и раньше использовались Google для определения позиций ранжирования.

    Давайте рассмотрим каждую из основных метрик Core Web Vitals подробнее.

    Core Web Vitals включает три составляющих:

    Время рендеринга самого большого элемента (LCP) — загрузка

    LCP — это время загрузки самого большого видимого элемента в области просмотра.

    Источник: web.dev/vitals

    Самым большим элементом обычно является основное изображение или, может быть, тег <h1>. Это также может быть любой из следующих элементов.

    • Элемент <img>
    • Элемент <image> внутри элемента <svg>
    • Изображение в элементе <video>
    • Фоновое изображение, загружаемое с помощью функции url()
    • Блоки текста

    В будущем могут добавиться элементы <svg> и <video>.

    Как проверить LCP

    В PageSpeed Insights элемент LCP можно найти в разделе “Диагностика”. Для протестированной страницы LCP представлена для нашего основного изображения в блог-посте.

    В инструментах разработчика Chrome выполните следующие действия:

    1. Откройте раздел “Performance” (Производительность) и установите флажок “Screenshots” (Снимки экрана)
    2. Нажмите кнопку “Start profiling and reload page” (Запустить профилирование и перезагрузить страницу)
    3. LCP будет указана на графике “Timings” (Тайминги)
    4. Нажмите на узел; это элемент для LCP

    Оптимизация LCP

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

    Ресурсы

    Накопительный сдвиг макета (CLS) — визуальная стабильность

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

    Источник: web.dev/vitals

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

    Вот некоторые распространенные причины CLS:

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

    Как проверить CLS

    Вы найдете список смещающихся элементов в PageSpeed Insights в разделе “Диагностика”.

    Воспользуйтесь WebPageTest. Перейдите в режим просмотра “Filmstrip” и используйте следующие параметры:

    • Выделить сдвиги макета
    • Размер уменьшенного изображения: огромный
    • Интервал уменьшенного изображения: 0,1 с

    Обратите внимание на то, как стиль шрифта изменяется в промежутке с 5,1 с по 5,2 с, смещая макет по мере применения нашего пользовательского шрифта.

    Возможно, вам стоит попробовать Layout Shift GIF Generator.

    У Smashing Magazine также есть интересная техника, которой они поделились: они обвели все элементы сплошной красной линией, толщиной 3 пикселя, и записали загрузку страницы на видео, чтобы выяснить, где происходят сдвиги макета.

    Оптимизация CLS

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

    Ресурсы

    Задержка первого ввода (FID) — интерактивность

    FID — это время с момента взаимодействия пользователя с вашей страницей до момента, когда страница сможет ответить. Этот параметр также можно назвать временем отклика. Это не относится к прокрутке или масштабированию.

    Примеры взаимодействий:

    • нажатие на ссылку или кнопку;
    • ввод текста в пустое поле;
    • выбор пункта раскрывающегося меню; 
    • установка флажка.

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

    Источник: web.dev/vitals

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

    Причины FID

    JavaScript конкурирует за главный поток. Главный поток может быть только один, и JavaScript конкурирует за выполнение в нем задач.

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

    Оптимизация FID

    Я не вижу никаких проблем с FID на нашем сайте, но в целом необходимо разбивать долгие задачи и откладывать выполнение любого некритичного кода JavaScript на потом.

    Ресурсы

    Разница между данными от имитации (lab) и реальных наблюдений (field) заключается в том, что данные наблюдений получены в рамках взаимодействия с реальными пользователями, условиями сети, устройствами, кэшированием и т. д., а данные от имитации загрузки получены в ходе последовательного тестирования в одинаковых условиях в надежде на повторяемость результатов.

    Данные наблюдений

     LCPFIDCLS
    Отчет о работе с пользователями Chrome
    PageSpeed Insights
    Google Search Console (отчет “Основные интернет-показатели”)
    Библиотека JavaScript Web-vitals
    web.dev
    Расширение Web Vitals

    Имитация загрузки страницы

     LCPFIDCLS
    Инструменты разработчика Chrome✘ (используйте TBT)
    Lighthouse✘ (используйте TBT)
    WebPageTest✘ (используйте TBT)
    PageSpeed Insights✘ (используйте TBT)
    web.dev✘ (используйте TBT)

    Мне нравится отчет в GSC, потому что вы можете видеть данные сразу для множества страниц, но данные немного запаздывают и отображают средние показатели за 28 дней, поэтому для отображения изменений в отчете может потребоваться некоторое время. В Chrome 88 Google добавляет Core Web Vitals прямо в инструменты разработчика.

    Вы также можете в любое время найти веса оценок в Lighthouse и увидеть исторические изменения.

    Заключение

    Вам стоит улучшить метрики Core Web Vitals, чтобы сделать взаимодействие пользователей с вашим сайтом максимально комфортным. Пока неизвестно, какое влияние они окажут на SEO, но, как я уже упоминал в своей статье о скорости загрузки страницы, они должны помочь вам собирать больше данных для анализа, что можно считать “полезным”.

    Работайте со своими разработчиками — они эксперты в этом вопросе. Скорость загрузки страницы может быть очень сложной. Если вы одни, вам может потребоваться плагин или сервис, чтобы справиться с ней, например WP Rocket или NitroPack.

    • Linking websites 2
    Data from Content Explorer