✈️ Оптимизация скорости загрузки основного контента (LCP)

305

Скорость загрузки основного контента (LCP) - наиболее важный, ориентированный на пользователя показатель для измерения воспринимаемой скорости загрузки, так как он отмечает на шкале времени загрузки страницы момент вероятной загрузки основного контента. Низкий показатель LCP убеждает пользователя в полезности страницы.

Из трех показателей Core Web Vitals, LCP - это тот, с которым испытывает трудности наибольшее количество сайтов - только около половины всех сайтов в интернете сегодня соответствуют рекомендуемому порогу

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

Из страниц, где элементом LCP было изображение, 39% этих изображений имели исходные URL-адреса, которые нельзя было обнаружить из источника HTML-документа. Другими словами, эти URL-адреса не были найдены в стандартных атрибутах HTML (таких как <img src="..."> или <link rel="preload" href="...">), что позволило бы браузеру быстро обнаружить их и сразу начать загрузку.

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

Как правило, если ваш элемент LCP является изображением, URL-адрес изображения всегда должен быть доступен для обнаружения из источника HTML. Вот несколько советов, как сделать это возможным:

✔️ Загрузите изображение, используя <img> элемент с атрибутом src или .srcset Не используйте нестандартные атрибуты, например data-src, требующие JavaScript для рендеринга, так как это всегда будет медленнее. 9% страниц скрывают изображение LCP за data-src.

✔️ Предпочтите обработку на стороне сервера (SSR), а не обработку на стороне клиента (CSR), поскольку SSR подразумевает, что в исходном HTML-коде присутствует полная разметка страницы (включая изображение).

✔️ Если на ваше изображение нужно ссылаться из внешнего файла CSS или JS, вы все равно можете включить его в исходный код HTML с помощью <link rel="preload"> тега.

Убедитесь, что ресурс LCP имеет приоритет

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

Например, даже если ваше изображение LCP присутствует в исходном HTML-коде с использованием стандартного <img> тега, если ваша страница включает десяток <script> тегов в <head> вашем документе перед этим <img> тегом, может пройти некоторое время, прежде чем ваш ресурс изображения начнет загружаться.

Самый простой способ решить эту проблему — предоставить браузеру подсказку о том, какие ресурсы имеют наивысший приоритет, установив новый fetchpriority="high" атрибут в теге <img>или <link>, который загружает ваше изображение LCP. Это указывает браузеру загружать его раньше, а не ждать завершения этих сценариев.

Согласно статистике, только 0,03% подходящих страниц используют этот новый API, а это означает, что у большинства сайтов в Интернете есть много возможностей улучшить LCP с минимальными усилиями. Хотя этот fetchpriority атрибут в настоящее время поддерживается только в браузерах на основе Chromium.

Для браузеров, отличных от Chromium, единственный способ обеспечить приоритет ресурса LCP над другими ресурсами — указать его ранее в документе.

Источник новости https://t.me/drmaxseo/215...

<< Вернуться на канал

25.01.2023 08:49