<стр>Джон Мюллер указывает на тематическое исследование Google, показывающее, как настраиваемые макеты могут искажать элемент, который браузер измеряет как LCP, а также на исправления.

<стр>Специалист Google Search Джон Мюллер рассказывает о новом тематическом исследовании, объясняющем, почему некоторые улучшения в программе Largest Contentful Paint часто не дают результатов. В макете, который зависит от магазина, браузер может сфокусироваться на неправильном элементе, в результате чего все последующие оптимизации будут нацелены на то, что изначально никогда не было LCP.

<п>Тематическое исследование было опубликовано на web.dev 24 июня и подробно описывает год работы Core Web Vitals на платформе электронной коммерции Nuvemshop. Первоначально команда подозревала, что основными проблемами являются вес изображения или задержка сервера. Однако их анализ указал им на то, как браузер выбрал элемент LCP. Nuvemshop сообщает, что после оптимизации выбора элементов, приоритета изображения, отложенной загрузки и пограничного кэширования доля магазинов с хорошими показателями LCP увеличилась с 57% до 96%.

Как выбирается не тот элемент

<п>В Nuvemshop продавцы могут организовывать разделы своей домашней страницы в любом порядке, в результате чего карусели, баннеры и сетки товаров появляются в разных позициях в разных темах. Согласно исследованию, карусели присутствовали на 85% витрин, и именно здесь при измерении возникла проблема.

Проблема возникла из-за CSS-переходов на каруселях и баннерах. Эти переходы задерживались, когда элементы становились видимыми для обнаружения LCP браузера. Хотя покупатели первыми видели загрузку карусели, браузер иногда идентифицировал баннер ниже как элемент LCP, поскольку его видимость не задерживалась из-за перехода. Следовательно, по мнению Nuvemshop, предыдущие усилия по оптимизации были сосредоточены на элементах, которые никогда не были LCP.

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

Три исправления LCP

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

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

Они также удалили loading=”lazy” из первого изображения в этих верхних разделах. Собственные рекомендации web.dev по этому поводу прямолинейны и предостерегают от отложенной загрузки образа LCP, поскольку это всегда приводит к задержке загрузки.

<п><!– До –> <img src=”slide-1.webp” loading=”lazy” alt=”Рекомендуемый продукт”> <!– После –> <img src=”slide-1.webp” alt=”Рекомендуемый продукт”>

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

<!– До –> <img src=”slide-1.webp” alt=”Рекомендуемый продукт”> <!– После –> <img src=”slide-1.webp” fetchpriority=”high” alt=”Рекомендуемый продукт”>

Что еще сообщает Nuvemshop

<п>Nuvemshop сообщает, что общий показатель прохождения Core Web Vitals за год увеличился с 48% до 72%, а не только показатель LCP.

Компания проанализировала одни и те же бразильские магазины, действовавшие как в январе 2025, так и в 2026 году. Для мобильных посетителей, пришедших через обычный поиск Google, она сообщает о повышении коэффициента конверсии на 8,9% и увеличении количества покупок в корзинах на 8,4%.

<п>Имейте в виду, что это цифры, сообщаемые самими людьми, а количество покупок представляет собой сравнение этой когорты за год, а не контролируемый тест. Nuvemshop связывает это направление со своей работой над скоростью, опираясь на исследование Deloitte, проведенное по заказу Google, которое показало, что сокращение времени загрузки на 0,1 секунды может увеличить конверсию в розничной торговле на 8,4%.

Почему это важно

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

<стр>Наши недавние репортажи приходятся на то же самое место. При рассмотрении основных веб-показателей на платформах CMS данные HTTP-архива показали, что реальный LCP имеет тенденцию ломаться, когда платформа медленно позволяет браузеру обнаружить основное изображение или когда оно заставляет это изображение конкурировать со слишком большим количеством других высокоприоритетных ресурсов, а не только тогда, когда страница тяжелая. Барри Поллард также рассказал, как отследить проблему LCP в PageSpeed Insights, прежде чем прикасаться к любому коду.

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

<ч2>Взгляд в будущее

Это всего лишь опыт одной компании, поэтому прибыль от покупок лучше всего рассматривать как направленную. Сама по себе методика также не нова, поскольку web.dev уже много лет выступает за такого рода работу, основанную на открытиях и приоритетах. Тематическое исследование добавляет проработанный пример определения истинного элемента LCP в планировках, которые различаются от одного магазина к другому, что является сложной задачей на любой настраиваемой платформе.