Швидкість завантаження основного контенту (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 над іншими ресурсами – вказати його раніше в документі.
Ще одним важливим аспектом пріоритизації ресурсу LCP є забезпечення того, щоб ви не робили нічого, що може призвести до втрати його пріоритету, наприклад додавання loading=”lazy” атрибута.
На сьогоднішній день 10% сторінок фактично встановлюють loading=”lazy” на свої LCP-зображення. Остерігайтеся рішень для оптимізації зображень, які без розбору застосовують поведінку відкладеного завантаження до всіх зображень. Якщо вони надають спосіб перевизначити цю поведінку, обов’язково використовуйте його для образу LCP. Якщо ви не впевнені, яке зображення буде LCP, спробуйте використати евристику, щоб вибрати відповідного кандидата.
Відстрочка некритичних ресурсів – ще один спосіб ефективно підвищити відносний пріоритет ресурсу LCP. Наприклад, сценарії, які не керують призначеним для користувача інтерфейсом (як-от сценарії аналітики або соціальні віджети), можна безпечно відкласти до моменту виникнення події, що гарантує, що вони не конкуруватимуть з іншими критично важливими ресурсами (такими як ресурс LCP) за пропускну спроможність мережі.
Підсумовуючи, ви повинні дотримуватися цих рекомендацій, щоб забезпечити раннє завантаження ресурсу LCP і високий пріоритет:
- Додайте fetchpriority=”high” у <img> тег вашого образу LCP. Якщо ресурс LCP завантажується через <link rel=”preload”> тег, не бійтеся, тому що ви також можете встановити його fetchpriority=”high”!
- Ніколи не встановлюйте loading=”lazy” тег <img>вашого зображення LCP. Це призведе до зниження пріоритету зображення і затримки початку його завантаження.
- За можливості відкладайте некритичні ресурси. Або перемістивши їх у кінець документа, використовуючи вбудоване ледаче завантаження зображень або фреймів, або завантаживши їх асинхронно через JavaScript.
