PageSpeed Insights обновляет Lighthouse 8.4. Новый аудит выявляет широко распространенную крупнейшую проблему с Contentful Paint.
PageSpeed Insights теперь использует Lighthouse 8.4.0, в котором есть два совершенно новых аудита. Наиболее важное дополнение помогает издателям диагностировать широко распространенную проблему, которая негативно влияет на показатель «Largest Contentful Paint». Этот новый аудит поможет издателям достичь лучших результатов по самому большому содержанию контента (LCP).
Largest Contentful Paint
С Largest Contentful Paint (LCP) существует давняя проблема, которую поможет диагностировать новейшая версия Lighthouse, 8.4.0.
Было обнаружено, что отложенная загрузка изображений – хороший способ сделать основную часть контента видимой и интерактивной на мобильном устройстве быстрее.
До отложенной загрузки изображения, которые находились ниже сгиба (не отображались в окне просмотра экрана браузера), загружались в фоновом режиме.
Это привело к снижению видимости и интерактивности контента, который находился в области просмотра посетителя сайта.
Когда изображения, находящиеся за пределами мобильного окна просмотра, загружаются в фоновом режиме, они фактически замедляют рендеринг видимой части веб-страницы.
Добавляя к изображениям атрибут Lazy Load HTML, браузер узнает, что изображения (находящиеся за пределами области просмотра) загружать не следует до самого позднего времени.
Это увеличивает скорость страницы.
Но ленивая загрузка элементов, которые находятся в окне просмотра Largest Contentful Paint, имеет негативный эффект, и это одна из вещей, которую решает Lighthouse 8.4.0.
Отрицательные последствия отложенной загрузки всех изображений
WordPress 5.4 представил встроенную отложенную загрузку изображений. Перед внесением изменений разработчики протестировали улучшения скорости и обнаружили, что добавление HTML-атрибута отложенной загрузки ко всем изображениям привело к увеличению скорости.
Однако это была несовершенная реализация атрибута отложенной загрузки, потому что WordPress теперь добавлял атрибут отложенной загрузки к показанному изображению, которое является элементом, который обычно находится в области просмотра посетителя сайта при посещении веб-страницы.
Это добавило негативного воздействия на метрику Крупнейшего содержательного рисования (LCP) и привело к небольшому негативному взаимодействию с пользователем.
Выигрыш от добавления ленивой загрузки превзошел потери от попадания в метрику LCP, поэтому WordPress продолжил эту работу.
Однако Google заметил, что после реализации ленивой загрузки в ядре WordPress показатели Lowest Contentful Paint (LCP) начали немного падать.
В статье, опубликованной Google на Web.dev о влиянии слишком большой отложенной загрузки на производительность, они исследовали данные реальных веб-сайтов и обнаружили, что сайты со слишком большой отложенной загрузкой страдают от плохих оценок LCP.
Они обнаружили, что причиной была агрессивная реализация отложенной загрузки, и узнали, что это проблема, специфичная для сайтов WordPress.
Google подтвердил, что оценки WordPress за LCP действительно падают.
Авторы пришли к выводу:
«… Техника отложенной загрузки, используемая WordPress, очень явно помогает уменьшить количество байтов изображения, но за счет задержки LCP».
Lighthouse 8.4.0 добавляет аудит отложенной загрузки LCP
Возможно, издатели заметили, что их рейтинг по самому большому содержанию контента (LCP) снизился, и не понимали, почему они стали хуже. Lighthouse 8.4.0 решает эту проблему, добавляя аудит специально для диагностики этой проблемы.
Все изображения в области просмотра Largest Contentful Paint, той части веб-страницы, которую посетитель видит в первую очередь, не должны загружаться лениво.
Lighthouse 8.4.0 определит, есть ли в области просмотра LCP какие-либо элементы, которые загружаются лениво.
На странице разработчика Chrome описывается, как работает Lighthouse 8.4.0:
«Lighthouse теперь определит, был ли элемент Largest Contentful Paint (LCP) ленивой загрузкой, и порекомендует удалить из него атрибут загрузки».
Официальная страница разработчика Lighthouse 8.4.0 описывает новую функциональность:
«Определите, когда элемент LCP загружается лениво. Изображения над сгибом, которые загружаются лениво, визуализируются позже в жизненном цикле страницы, что может задерживать отрисовку самого крупного контента».
Аудит нового мобильного окна просмотра
Lighthouse 8.4.0 также добавит новый аудит, который определяет отсутствие метатега мобильного окна просмотра в разделе заголовка.
Это важно, потому что отказ добавить этот метатег может привести к снижению оценки задержки первого ввода.
В документации объясняется важность этого нового аудита:
«Согласно недавнему исследованию данных из HTTP-архива, более половины сайтов, получивших оценку 90 или выше в Lighthouse, но не прошедших хотя бы один Core Web Vital, не имели мобильных окон просмотра и не имели FID. В результате секция производительности Lighthouse теперь будет рекомендовать добавить окно просмотра, подобное приведенному ниже, если оно не найдено:
<meta name="viewport" content="width=device-width">"
Lighthouse 8.4.0 уже доступен
Lighthouse 8.4.0 теперь доступен в PageSpeed Insights и вызовет новое предупреждение LCP, если обнаружит ленивый загруженный элемент в окне просмотра Largest Contentful Paint.
Chrome Dev Tools будет включать Lighthouse 8.4.0 в Chrome 95, релиз которого запланирован на 19 октября 2021 года.