Исправление ошибки LCP ‘Больше чем’ в Core Web Vitals на GSC

Google выпустил новый отчет в консоли поиска под названием Core Web Vitals. Эти отчеты заменили отчеты о скорости и будут учитываться как фактор ранжирования в 2021 году. Core Web Vitals будут рассматриваться как фактор ранжирования наряду с Page Speed, HTTPS, мобильной дружелюбностью и другими факторами на странице.

Core Web Vital учитывает элементы UX и UI на странице, чтобы определить среднее значение страницы по трем основным метрикам,

1. LCP: Largest Contentful Paint
2. FID: First Input Delay
3. CLS: Cumulative Layout Shift

Нет единого кода для решения этих проблем, но вы можете оптимизировать сайт, чтобы устранить ошибки. Здесь я перечислю некоторые практики, которые могут помочь вам решить проблему с Largest Contentful Paint (LCP) ‘ Больше чем’ для ваших веб-страниц.

Что такое LCP?

Метрика Largest Contentful Paint (LCP) сообщает о времени рендеринга самого большого элемента контента, видимого в области просмотра. Проще говоря, это время, необходимое для загрузки основного элемента на видимом экране после начала загрузки страницы.

Чтобы обеспечить хороший пользовательский опыт, сайты должны стремиться к тому, чтобы Largest Contentful Paint происходил в течение первых 2.5 секунд после начала загрузки страницы.

Какие элементы учитываются для LCP?

Типы элементов, учитываемых для Largest Contentful Paint:

• элементы
• элементы внутри элемента
• элементы
• Элемент с фоновым изображением, загруженным через функцию url()
• Блочные элементы, содержащие текстовые узлы или другие дочерние элементы текстового уровня.

Каковы причины высокого LCP?

• Медленные времена ответа сервера
• JavaScript и CSS, блокирующие рендеринг
• Медленное время загрузки ресурсов
• Клиентская рендеринг

Как оптимизировать сайт для исправления высокого LCP?

Используйте хороший хостинг с хорошим временем отклика и низкой задержкой. Убедитесь, что вы оптимизировали серверы, используйте бесплатные сторонние CDN, такие как Cloudflare, jsDelivr, Statically, для быстрой доставки статических ресурсов. Если вы работаете с WordPress, то существует множество плагинов, которые могут помочь вам в этом.

Используйте сжатые изображения с современными форматами изображений, такими как JPEG XR, JPEG 2000 или WebP. Эти современные форматы помогают ускорить загрузку изображений на 50%. Существуют несколько плагинов для WordPress, которые автоматически помогают вам сжимать и конвертировать изображения на лету. Также используйте CDN для изображений, такие как WP-Photon, чтобы уменьшить пропускную способность сервера и увеличить скорость сайта.

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

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

Другие важные вещи, которые следует учитывать для оптимизации сайта для хорошего LCP:

• Устраните JavaScript и CSS, блокирующие рендеринг
• Отложите не критический CSS
• Минифицируйте ресурсы
• Предварительно загружайте важные ресурсы

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

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

Если у вас есть какие-либо мысли по поводу Исправления ошибки LCP ‘Больше чем’ в Core Web Vitals на GSC, не стесняйтесь оставлять комментарии ниже. Также подписывайтесь на наш канал DigitBin на YouTube для видеоуроков. Удачи!