Скорость страницы важна для удобства пользователей.

Показатели Google Core Web Vitals также могут влиять на рейтинг в органическом поиске.

В этой статье будут рассмотрены некоторые новые и менее известные подходы к ускорению работы вашего сайта.

Что такое самая большая отрисовка контента?

Наибольшая отрисовка контента (LCP) измеряет, как скоро посетители смогут увидеть основной контент после открытия веб-страницы.

LCP – это один из трех показателей Core Web Vitals, используемых для оценки эффективности веб-страницы. Другие основные веб-показатели:

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

Взаимодействие с следующей отрисовкой (INP), которое измеряет, насколько быстро страница реагирует на действия пользователя.

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

Вот несколько методов, которые можно использовать, чтобы улучшить свои показатели LCP.

1. Добавьте на свой сайт правила спекуляции

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

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

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

Добавить правила спекуляции на свой сайт очень просто. Просто добавьте на свой сайт такой тег скрипта:

2. Оптимизируйте LCP с использованием реальных пользовательских данных

Существует множество инструментов для тестирования производительности веб-сайтов, включая PageSpeed ​​Insights и бесплатный тест скорости веб-сайта DebugBear.

Эти инструменты проводят так называемый лабораторный тест: страница открывается в контролируемой среде тестирования, где проводится измерение производительности.

Однако иногда лабораторные значения LCP не соответствуют реальному пользовательскому опыту. Это может произойти по ряду причин, в том числе:

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

Многие реальные пользователи вошли в систему и испытывают медленную загрузку страниц.

Реальные пользователи имеют другую скорость сети и устройств, чем в лабораторной среде.

У посетителей размер устройства отличается от лабораторного теста.

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

Настоящий инструмент мониторинга пользователей (RUM) поможет вам лучше понять, что происходит на вашем веб-сайте и какие оптимизации окажут наибольшее влияние.

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

Когда Google сообщает о реальной скорости страницы пользователя, он учитывает значение 75-го процентиля. Например, если ваш показатель LCP составляет 3 секунды, это означает, что 75 % ваших пользователей ждали содержимого главной страницы менее 3 секунд, а 25 % ждали дольше.

Однако это всего лишь совокупное значение. Некоторые посетители могут подождать 5 секунд и более – и эти люди, скорее всего, уйдут.

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

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

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

Изображение LCP может различаться у разных посетителей – даже на той же странице. 

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

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

3. Определите медленные части LCP

Для отображения изображения LCP на вашем веб-сайте должны произойти четыре вещи. Эти подразделы LCP:

Время получения первого байта: как быстро сервер отвечает на первоначальный запрос документа?

Задержка загрузки ресурса: насколько быстро браузер обнаруживает изображение LCP?

Время загрузки ресурса: сколько времени занимает загрузка образа LCP?

Задержка рендеринга: изображение LCP появляется сразу после загрузки или есть задержка?

Многие инструменты скорости загрузки страниц созданы на основе бесплатного теста Lighthouse от Google, включая PageSpeed ​​Insights. Здесь, в разделе Диагностика, вы можете найти подробную информацию о самом большом элементе Contentful Paint. Под предварительным просмотром элемента Lighthouse отображается разбивка подразделов LCP.

В зависимости от того, какой компонент LCP вносит наибольший вклад в общий балл, для вашего веб-сайта будут иметь смысл различные варианты оптимизации.

Например, если время загрузки велико, это может означать, что на вашем веб-сайте имеется большое изображение, загрузка которого занимает много времени. В этом случае многообещающей оптимизацией будет изменение размера изображения или использование современного формата изображения, такого как WebP.

Однако недавно компания Google опубликовала статью о распространенных заблуждениях относительно оптимизации показателя LCP, в которой обнаружилось:

Время загрузки часто не имеет большого значения.

Другие подразделы, такие как TTFB и Load Delay, играют большую роль в улучшении LCP.

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

4. Предварительная загрузка и определение приоритета изображения LCP

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

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

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

Оценку LCP можно оптимизировать с помощью атрибута fetchpriority. Этот атрибут HTML сообщает браузеру, важен ли данный ресурс, и его можно просто добавить в тег img следующим образом:

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

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

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

5. Постоянно отслеживайте скорость страницы

Проведение разовых тестов на вашем веб-сайте — отличный способ начать оптимизировать его производительность.

Но действительно ли эти оптимизации работают для реальных пользователей? 

А что произойдет, если произойдет несвязанное изменение, которое ухудшит производительность? 

В этом случае вам понадобится инструмент мониторинга веб-сайта, например DebugBear.

Инструмент мониторинга производительности постоянно тестирует ваш веб-сайт и веб-сайты ваших конкурентов. Вы получите:

Подробные отчеты с предложениями по улучшению скорости вашей страницы.

Оповещение, если производительность вашего сайта ухудшится.

DebugBear включает три типа данных:

Плановые лабораторные исследования.

Данные Google CrUX (которые влияют на SEO).

Реальный мониторинг пользователей.

Получение такой информации о вашем веб-сайте станет основой, необходимой вашей команде для прохождения оценки Google Core Web Vitals. 

Начните бесплатную 14-дневную пробную версию сегодня.

Анонсы наших новых статей в Телеграме

Read More