Гуглери оновили рекомендації з Core Web Vitals — основних інтернет-показників. Їх постаралися…

Гуглери оновили рекомендації з Core Web Vitals — основних інтернет-показників. Їх постаралися зробити на основі того, що має реальний великий вплив на продуктивність, релевантно для більшості сайтів, а також легко імплементувати.

**Коротко:

LCP**

1. Найчастішою проблемою LCP становляться зображення або інші елементи, в яких неможливо встановити джерело. Щоб запобігти цьому:

• завантажуйте зображення в <img> з використанням src або srcset, не використовуйте data-src- надавайте перевагу SSR замість CSR
• використовуйте <link rel="preload">, коли потрібне посилання з зовнішнього CSS або JS.

2. Пріоритизуйте завантаження елемента LCP. Для цього можна використовувати новий атрибут fetchpriority="high". І переконайтесь, що ви не відклали його завантаження, наприклад, з loading="lazy". А ось некритичні ресурси навпаки краще відкласти.

3. Можливо вам стануть у нагоді CDN. Також намагайтесь віддавати перший байт контенту якомога швидше — оптимізуйте TTFB. Що в деяких випадках і допомагає зробити CDN.

CLS

1. Зміщення контенту можна нейтралізувати за допомогою атрибутів width і height у зображень і aspect-ratio в CSS для деяких інших елементів. Якщо потрібних даних для динамічного контенту немає, то краще задати хоча б min-height, ніж нічого.

2. Переконайтесь, що сторінки можуть використовувати bfcache. В DevTools є окремий тест для цього.

3. Уникайте анімації, яка спричиняє CLS.

FID Нова метрика INP замінить FID.

1. Уникайте тривалих завдань — 50+ мс. Розбивайте їх на менші. Також можете використовувати API: isInputPending і Scheduler API.

2. Уникайте непотрібного JS

3. Уникайте великих оновлень рендерингу і оптимізуйте його:

• не використовуйте requestAnimationFrame() для роботи, що не стосується візуальної частини
• DOM має бути невеликим
• використовуйте обмеження CSS