Как измерить и оптимизировать самую большую содержательную отрисовку для превосходного UX

Когда дело доходит до успеха в Интернете, есть много способов добиться этого. Одним из таких способов является оптимизированный пользовательский опыт. Google будет использовать различный пользовательский опыт и связанные с ним показатели для ранжирования веб-сайтов для SEO. Он продолжает выпускать несколько инструментов для повышения производительности сети. Ниже мы рассмотрим некоторые способы, которыми Google стремится улучшить взаимодействие с пользователем.

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

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

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

Для начала давайте посмотрим на Largest Contentful Paint (LCP). Это одна из основных метрик Web Vitals. Он измеряет время загрузки самого большого компонента контента в области просмотра, когда он становится видимым. Альтернативные метрики, такие как TTFB и First Contentful Paint, совместно облегчают работу с живой страницей, они исчезают, когда страница становится «значимой» для пользователя.

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

Проверка времени LCP

Согласно Google, категории частей, рассматриваемых для Largest Contentful Paint, следующие:

• <img> элементы
• Элементы <image> внутри элемента <svg>
• Элементы <video> (используется постер)
• Элемент с фоновым изображением, загруженным через функцию URL
• Элементы уровня блока, состоящие из текстовых узлов и/или других текстовых элементов встроенного уровня.

Как измеряется LCP?

Конечно, есть несколько способов измерения LCP вашей веб-страницы. Самый простой способ сделать это — использовать одну из доступных платформ, включая Lighthouse, PageSpeed ​​Insights, Search Console, а также отчет об опыте использования Chrome. Например, Google PageSpeed ​​Insights в своем отчете указывает компонент для расчета LCP.

Что такое хороший ЛКП?

Чтобы обеспечить достойный уровень пользовательского опыта, вы должны попытаться поддерживать LCP на своем сайте на уровне 2,5 секунды или ниже. Большинство загрузок вашей страницы должно происходить ниже этого порога. Теперь, когда мы все знаем, что такое LCP и какова наша цель, давайте рассмотрим способы улучшения LCP.

(Пожалуйста, добавьте изображение с именем Большинство страниц должны загружаться с LCP 2,5 секунды или меньше.jpg)

Как оптимизировать наибольшую содержательную отрисовку (LCP)

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

Оптимизируйте свои фотографии

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

Чтобы оптимизировать ваши изображения, вы должны использовать сторонний CDN для изображений, например ImageKit.io. Преимущество использования сторонней CDN для изображений заключается в том, что вы просто ориентируетесь на свой реальный бизнес и оставляете оптимизацию изображений на CDN изображений.

Преобразование в реальном времени для адаптивных изображений

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

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

Кэшируйте изображения и улучшите время доставки

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

Предварительная загрузка основных ресурсов

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

Теперь, если вы спрашиваете: «Как мне предварительно загрузить самое большое изображение Contentful Paint?», ответ прост. Вы сможете предварительно загрузить их, используя тег с атрибутом rel= «preload» в верхней части вашего документа на языке гипертекстовой разметки.

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

Сокращение времени отклика сервера

Если ваш сервер загружается дольше, чем считается нормальным, то время, необходимое для загрузки страницы на экране, увеличивается. Это негативно влияет на каждую метрику скорости страницы, включая LCP. Чтобы увеличить время отклика сервера, вы можете:

• Анализируйте и оптимизируйте свои серверы
• Используйте сеть доставки контента
• Предварительное подключение к сторонним источникам
• Обслуживайте кэш контента в первую очередь с помощью сервисного работника
• Сжать текстовые файлы

Улучшить время отклика клиентского устройства

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

• Встраивание основного CSS
• Минимизация и прессование содержимого
• Оптимизация LCP для рендеринга на стороне клиента
• Использование рендеринга на стороне сервера
• Использование предварительного рендеринга

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

Биография автора

Гиа Марневик — писатель, менеджер социальных сетей и цифровой менеджер. Она пишет контент для Aumcore и увлечена поиском новых способов обмена информацией с миром.