Оптимизация AMP core web vitals lcp требует сосредоточения внимания на самом большом изображении или текстовом блоке, отображаемом в пределах начальной области просмотра (viewport) мобильного устройства. Разработчики добиваются этого, обеспечивая эффективную загрузку среды выполнения AMP и приоритизируя определенные главные элементы с помощью атрибута data-hero. Поскольку Google рассматривает страницы AMP как любой другой индексированный контент, достижение порога в 2,5 секунды остается ключевым требованием для поддержания качественного и быстрого пользовательского опыта.
Что такое LCP в контексте AMP?
Largest Contentful Paint (LCP) измеряет время, необходимое для того, чтобы основной контент страницы стал видимым для пользователя. На большинстве страниц AMP элементом LCP обычно является избранное изображение, крупный заголовок или постер видео. Несмотря на то, что фреймворк создан для скорости, медленный сервер или неоптимизированные ресурсы все равно могут сдвинуть LCP за рекомендованные 2,5 секунды.
Google использует эту метрику для оценки воспринимаемой скорости загрузки страницы. Если основной контент появляется слишком долго, пользователи часто покидают сайт до того, как он полностью загрузится. Для AMP эта метрика особенно важна, поскольку фреймворк позиционируется как высокоскоростное решение. Невыполнение целевого показателя LCP может свести на нет преимущества использования этой технологии.
Google Search индексирует AMP-страницы так же, как и другие веб-страницы, и применяет один и тот же стандарт ко всем страницам, независимо от технологии, используемой для их создания.
Google Search Central
Как Google измеряет Core Web Vitals на AMP?
Google собирает данные из отчета об удобстве использования Chrome (CrUX), чтобы определить производительность ваших AMP-страниц. Эти данные поступают от реальных пользователей, которые посещают ваш сайт в различных сетевых условиях. Если ваша страница AMP обслуживается из кэша Google AMP Cache, производительность часто выше, так как кэш использует предварительный рендеринг и глобальные сети доставки контента.
Однако если пользователь заходит на страницу AMP напрямую с вашего исходного сервера, скорость полностью зависит от вашего хостинга и конфигурации сервера. Google рассматривает 75-й перцентиль всех загрузок страниц. Это означает, что если у 75% ваших посетителей показатель LCP составляет менее 2,5 секунд, ваша страница проходит оценку.
Почему некоторые страницы AMP по-прежнему не достигают целевых показателей LCP?
Распространенное заблуждение заключается в том, что использование фреймворка AMP автоматически гарантирует успешный результат LCP. Это не всегда так. Несколько факторов могут задерживать рендеринг элемента наибольшего контента. Например, если элементом LCP является неоптимизированное изображение, браузер должен дождаться загрузки всего файла, прежде чем сможет его отобразить.
Другая проблема — задержка, вызванная самой средой выполнения AMP. Среда выполнения должна загрузить и рассчитать макет страницы перед отображением определенных элементов. Если в разделе head содержится много расширений или сторонних скриптов, инициализация среды выполнения может занять больше времени, что отодвигает время LCP.
- Медленное время ответа сервера (TTFB) от исходного сервера.
- Блокирующие рендеринг пользовательские файлы CSS или крупные файлы шрифтов.
- Отсутствие атрибутов ширины и высоты у изображений, что приводит к пересчету макета.
- Изображения, не приоритезированные с помощью атрибута data-hero.
- Слишком много компонентов AMP (таких как карусели или социальные виджеты) в видимой зоне первого экрана (above the fold).
Как улучшить загрузку изображений в AMP?
Изображения являются наиболее частой причиной медленного LCP. Чтобы исправить это, вам следует использовать атрибут data-hero для основного изображения страницы. Этот атрибут сообщает среде выполнения AMP и кешу AMP начать загрузку этого изображения как можно скорее, еще до того, как среда выполнения полностью завершит расчеты макета.
Кроме того, вы должны использовать атрибут srcset для всех элементов amp-img. Это позволяет браузеру выбирать наиболее подходящий размер изображения в зависимости от разрешения экрана пользователя. Меньшему экрану не нужно изображение шириной 2000 пикселей. Предоставляя меньшую версию, вы уменьшаете размер в байтах и ускоряете LCP.
Пользователи должны иметь возможность видеть тот же контент и выполнять те же действия на страницах AMP, что и на соответствующих канонических страницах, где это возможно.
Google Search Central
Роль AMP Optimizer
AMP Optimizer — это инструмент, который выполняет оптимизацию на стороне сервера для вашего AMP HTML. Он может автоматизировать многие ручные задачи, необходимые для ускорения LCP. Например, он может предварительно отрендерить макет AMP на сервере, что устраняет необходимость для браузера ждать запуска среды выполнения AMP. Этот метод может сократить LCP на несколько сотен миллисекунд.
Когда вы используете оптимизатор, он также преобразует ваши изображения и меняет порядок элементов в шапке (head) вашего документа. Это гарантирует, что самые критически важные ресурсы загружаются в первую очередь. Многие современные системы управления контентом имеют плагины, которые автоматически интегрируют AMP Optimizer, что упрощает маркетологам поддержание высокой производительности.
Как Alien Road применяет amp core web vitals lcp
Alien Road управляет производительностью AMP, начиная с подробного аудита отчета Core Web Vitals в Google Search Console. Мы определяем, какие URL-адреса не проходят по порогу LCP, и выявляем конкретный элемент, ответственный за задержку. В типичном аккаунте это часто главное изображение в записи блога или главное изображение товара на странице электронной коммерции.
Наш процесс включает в себя несколько конкретных шагов. Во-первых, мы внедряем AMP Optimizer на стороне сервера, чтобы гарантировать, что стандартный CSS не блокирует первичный рендеринг. во-вторых, мы применяем атрибут data-hero к основному визуальному элементу. Например, в магазине Shopify, продающем товары для дома, мы следим за тем, чтобы главный снимок продукта был помечен для приоритетной загрузки. Мы также отслеживаем TTFB (Time to First Byte), потому что если сервер работает медленно, никакая оптимизация фронтенда не исправит LCP.
После внедрения мы используем API PageSpeed Insights для проверки изменений. Мы ищем устойчивую тенденцию к улучшению полевых данных в течение 28-дневного периода. Такой подход, основанный на данных, позволяет нам предоставлять клиентам четкие отчеты о том, как скорость мобильных устройств влияет на их общую видимость в поиске.
Стоит ли удалять AMP для улучшения LCP?
Некоторые разработчики рассматривают возможность удаления AMP, если они не могут достичь желаемых показателей скорости. Хотя это и вариант, к нему следует относиться осторожно, чтобы избежать потери позиций в поисковой выдаче. Если вы решили отказаться от AMP, вы должны убедиться, что ваши страницы без AMP работают так же быстро и соответствуют всем рекомендациям веб-стандартов.
По данным Google, у вас есть три варианта удаления контента AMP. Вы можете удалить все версии страницы, удалить только версию AMP, сохранив каноническую страницу без AMP, или использовать CMS для управления удалением. Если страница AMP является канонической, вы должны настроить новую каноническую страницу без AMP и правильно перенаправить старый URL-адрес, чтобы предотвратить ошибки 404.
- Проверьте, поддерживает ли ваша CMS автоматическую оптимизацию AMP.
- Определите элемент LCP для 10 самых посещаемых страниц.
- Проверьте разницу между скоростью загрузки кешированных и некешированных страниц.
- Убедитесь, что структурированные данные одинаковы в версиях AMP и без AMP.
- Еженедельно проверяйте отчет Core Web Vitals в Search Console.
С чего начать на этой неделе
Начните с открытия Google Search Console и перехода в раздел Core Web Vitals. Отфильтруйте отчет, чтобы отображать только мобильные URL-адреса, и найдите предупреждение «Проблема с LCP: дольше 2,5 с». Нажмите на отчет, чтобы увидеть конкретные группы URL-адресов, затронутые этой задержкой.
Получив список, выберите один пример URL-адреса и проверьте его с помощью инструмента PageSpeed Insights. Определите элемент LCP в разделе «Диагностика». Если это изображение, проверьте, есть ли у него атрибут data-hero. Если это текстовый блок, проверьте задержки загрузки шрифтов. Внесение этих небольших корректировок на ваши самые популярные страницы может привести к значительному улучшению общей производительности вашего сайта и удержания пользователей.