Нещодавно я писав про оптимізацію сайту з урахуванням YMYL та згадував таку важливу штуку як Core Web Vitals-метрики, які Google використовує для оцінки швидкості роботи сайтів.
Одна з них – cumulative layout shift (CLS) – метрика, яка вимірює візуальну стабільність сайту. Тому давайте розберемося як впоратися з підвисаннями зручно, швидко і безкоштовно.
Я знайшов цікавий сервіс Cumulative layout shift debugger (https://webvitals.dev/cls). Це безплатний SEO інструмент для виявлення і вимірювання цих самих зрушень. З основних переваг звітів, який робить інструмент:
- Кроссплатформеність в плані девайсів.
За допомогою інструменту можна аналізувати CLS візуалізації мобільних девайсів і отримувати дані мобільного тестування. Але можна дивитися і на CLS десктопів і також аналізувати результати десктопних тестів. Крім цього тул визначає HTML-елементи, які викликають зрушення макетів як на мобільних, так і на десктопних девайсах.
- Можливість вимірювання CLS різних типів.
Інструмент може вимірювати CLS реального користувача для протестованого URL або для імені хоста (походження). Це реально круто.
Не обійшлося і без мінусів – щоб перевірити одну сторінку доведеться чекати приблизно півтори хвилини. Але це не так критично на тлі доступності і функціоналу інструменту.
––––
Звичайно, це не єдиний інструмент для оцінки. Є рідні від Google-Chrome user experience report (https://developers.google.com/web/tools/chrome-user-experience-report) (in the field testing) і Chrome DevTools (https://developer.chrome.com/docs/devtools/) (in the lab testing). Є пару і від сторонніх розробників. Найпопулярніший з них Lighthouse (https://developers.google.com/web/tools/lighthouse/). Але всі вони генерують загальні звіти по всіх метриках Core Web Vitals і не показують окремими блоками HTML-елементи які підвисають.
Пишіть свої думки з приводу цих інструментів і досвід роботи з ними в коментах. Може хто використовує інші-обов’язково діліться.