Бързодействие на сайта: Core Web Vitals (LCP, INP, CLS) и как да ги подобрите

Посетителят не мери сайта в секунди, а усеща дали страницата се появява бързо, дали реагира, когато натисне бутон, и дали текстът не подскача, докато чете. Google е превърнал тези три усещания в три показателя, наречени Core Web Vitals. Тук обясняваме какво мери всеки от тях, кога резултатът е добър и откъде да започнете, ако не е.

Трите показателя

Оценката се прави по 75-ия персентил на зарежданията, отделно за мобилни устройства и за компютри. Страницата минава проверката само ако и трите показателя са в зелената зона. С други думи, поне три от четири посещения трябва да са добри.

INP замени по-стария показател FID (First Input Delay) през март 2024 г. Ако четете по-стари съвети за FID, те вече не важат.

Какво точно мери всеки показател

LCP гледа най-големия елемент, видим при зареждането: изображение, кадър или постер на видео, елемент с фоново изображение от CSS или блок с текст. Браузърът пренебрегва невидими елементи и такива, които покриват целия екран и вероятно са фон.

INP следи всички щраквания, докосвания и натискания на клавиши по време на посещението. Забавянето на едно взаимодействие се мери от действието на потребителя до момента, в който браузърът покаже следващия кадър. При много взаимодействия най-лошото на всеки 50 се пропуска, за да не развали резултата едно изключение. Превъртането и посочването с мишката не се броят.

CLS събира неочакваните измествания в групи. Ново изместване влиза в групата, ако е станало по-малко от секунда след предишното, а една група трае най-много пет секунди. Резултатът е сборът на най-лошата група.

С какво да мерите

Има два вида данни. Полевите идват от реални посетители, лабораторните от симулирано зареждане.

• Полеви данни: докладът за Core Web Vitals в Google Search Console, PageSpeed Insights (взима данни от Chrome User Experience Report) и библиотеката web-vitals, ако искате да събирате данните сами.
• Лабораторни данни: Lighthouse и инструментите за разработчици в Chrome. Lighthouse мери LCP и CLS, но не и INP, защото в теста няма реален потребител. Вместо него показва общото време на блокиране (Total Blocking Time).

Лабораторният тест помага да откриете причината, но оценката на Google идва от полевите данни.

Как да подобрите LCP

web.dev разделя времето до LCP на четири части: време до първия байт от сървъра, забавяне преди изображението да започне да се тегли, самото теглене и забавяне преди показването. Съветите за всяка:

• Бърз сървър. Избягвайте излишните пренасочвания и използвайте кеширане. Бавен първи байт често значи слаб хостинг или липса на кеш; вижте видовете хостинг.
• Изображението да се вижда в HTML. Ако главната снимка е зададена само в CSS или JavaScript, браузърът я открива късно. Тогава помага предварително зареждане с rel="preload".
• Приоритет. Атрибутът fetchpriority="high" на главното изображение ускорява тегленето му. Слагайте го на едно-две изображения, не на всички.
• Без отложено зареждане за главната снимка. loading="lazy" е полезно за изображенията по-надолу, но забавя LCP, ако е на главното.
• По-леки файлове. Модерни формати като WebP или AVIF, компресия и размер, съобразен с екрана.
• Малко блокиращ код. Намалете CSS, който спира показването, и избягвайте синхронни скриптове в <head>.

Как да подобрите CLS

• Задавайте width и height на всяко изображение или запазвайте място с CSS aspect-ratio.
• Запазвайте място предварително за реклами, вградени видеа и iframe.
• Не вмъквайте съдържание над вече показания текст. Ако трябва, нека потребителят го извика с действие.
• При уеб шрифтовете използвайте подходяща стойност на font-display и резервен шрифт с близки размери.
• Анимирайте с transform, а не със свойства като top и left, които местят оформлението.

Как да подобрите INP

Забавянето при взаимодействие има три части: изчакване, докато браузърът се освободи, изпълнение на кода на събитието и време до показването на промяната. Най-честата причина е много JavaScript, който заема браузъра дълго. Премахнете ненужните скриптове и разширения, разделяйте дългите задачи на по-малки и не правете тежка работа в обработчиците на щракване. При WordPress проверете кои разширения зареждат скриптове на всяка страница. Повече за избора на по-лека основа има в статията как да изберем платформа.