По три рекомендації на кожен з CWV, які будуть мати найбільший вплив

1. LCP: 🟢 Зробіть LCP-елементи доступними для якнайшвидшого виявлення, реалізувавши їх або через тег img, або за допомогою попереднього завантаження. 🟢 Використовуйте Fetch Priority API там, де це для вас релевантно, для зменшення затримки завантаження. Для сайтів на JS використовуйте компонент фреймворк. В WP є Performance Lab Plugin. 🟢 Використовуйте CDN, щоб оптимізувати документи і ресурси TTFB.

2. CLS: 🟢 Зазначайте чіткий розмір будь-якого контенту, який завантажується на сторінці. 🟢 Переконайтеся, що сторінки придатні для bfcache. Іноді prefetch і prerender можуть також бути корисними. 🟢 Уникайте анімацій/переходів, які використовують властивості CSS, щоб викликати. Наприклад, не використовуйте top, left, right, bottom для анімації. Замість них використовуйте transform з translate.

3. FID + INP*: 🟢 Уникайте або розривайте довгі завдання. Довгі — це 50 млс або довше. Нові браузерні API: scheduler.postTask, isInputPending і scheduler.yield — допоможуть вирішити, коли і як віддавати основний потік. 🟢 Уникайте непотрібного JavaScript, наприклад, навіть в GTM. 🟢 Уникайте великих оновлень візуалізації.

Детальніше: відео, стаття.

*INP — на Google I/O 2023 було надано більше деталей до зміни в метриках CWV, пов'язаних з чуйністю або швидкістю реагування. Оскільки FID обмежений, тому що вимірює тільки першу взаємодію на сторінці, вирішили створити нову метрику, яка буде вимірювати продуктивність всіх взаємодій на сторінці.

З березня 2024 GSC зупинить відображення FID і замінить її на INP.

Як оптимізувати цей показник, читати на web dev.

#googleio