Четене на PageSpeed Insights: Core Web Vitals на обикновен език
Тествали сте своя уебсайт в PageSpeed Insights и виждате червено число, например 45. Какво означава това и колко сериозно е то? В тази статия ще прочетете как да четете доклада, какво измерват трите Core Web Vitals и какво можете сами да подобрите.
Трите измервания
| Измерване | Какво измерва | Добре | Нужно е подобрение | Лошо |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Колко бързо се показва най-голямата част от съдържанието, често голямата снимка горе | до 2,5 s | 2,5 до 4 s | над 4 s |
| INP (Interaction to Next Paint) | Колко бързо реагира страницата, когато кликнете, докоснете или пишете | до 200 ms | 200 до 500 ms | над 500 ms |
| CLS (Cumulative Layout Shift) | Колко много се измества страницата по време на зареждане (резултат, не време) | до 0,1 | 0,1 до 0,25 | над 0,25 |
Дадена страница постига Core Web Vitals, ако поне 75 процента от посещенията получават добър резултат по и трите показателя, поотделно за мобилни устройства и за настолни компютри. Следователно не Вашият бърз компютър се брои, а опитът на повечето посетители, включително на по-стар телефон. INP замени по-старото измерване FID през март 2024 г. Ако все още срещнете FID, тази информация е остаряла.
Полеви данни и лабораторни данни
PageSpeed Insights показва два вида измервания, които често дават различни числа:
- Полеви данни (горе): измервания при реални посетители с Chrome през последните 28 дни. Те определят дали постигате Core Web Vitals. Ако Вашата страница има твърде малко посетители, ще видите данните за целия Ви сайт или изобщо няма да видите полеви данни.
- Лабораторни данни (отдолу): тест с Lighthouse, който зарежда страницата еднократно на симулиран среден по мощност телефон и връзка. Оттук идва числото от 0 до 100. Lighthouse не може да измери INP, защото никой не кликва.
Използвайте лабораторните данни, за да откриете причините и за да видите веднага дали дадено подобрение помага. Започнете от раздела Мобилни устройства: там обикновено резултатът е по-лош, а Google обръща особено внимание на мобилната версия на Вашия сайт.
Колко тежи това за Google?
Google посочва, че Core Web Vitals се вземат предвид при класирането. Но Google винаги показва най-релевантното съдържание, дори ако тази страница не е най-бързата. Числото от 0 до 100 идва от лабораторния тест и не е оценка от Google; тази оценка идва от полевите данни. Според самия Google постигането на перфектен резултат само заради Google не е най-доброто използване на времето Ви. Погрижете се да сте в зелената или поне в оранжевата зона, особено защото посетителите напускат бавна или трептяща страница.
Какво можете да подобрите в самата страница
- По-малки изображения. Снимка с ширина хиляди пиксели за поле от 800 пиксела е най-честата причина за бавен LCP. Намалявайте снимките преди качване и използвайте съвременен формат като WebP или AVIF.
- Ширина и височина за всяко изображение. Без
widthиheightбраузърът не знае колко място е нужно на дадена снимка и текстът се измества, когато тя се зареди. Това увеличава CLS:<img src="bloemstuk.webp" width="800" height="600" alt="Bruidsboeket met witte rozen">
- Не прилагайте мързеливо зареждане на най-важната снимка.
loading="lazy"е подходящо за снимки по-надолу, но не и за снимката, която вече е видима при отваряне. В противен случай браузърът именно забавя снимката, която определя Вашия LCP. - Не вмъквайте нищо по-късно над съдържанието. Лента за бисквитки, реклама или джаджа, която изтласква страницата надолу, кара всичко да се измести. По-добре поставете такава лента върху страницата, а не над нея.
- По-малко скриптове от трети страни. Лош INP почти винаги се дължи на твърде много JavaScript: тежки теми, слайдери, чат прозорци и тракери. Разгледайте критично всеки плъгин или вградена услуга.
Какво прави сървърът
Всичко започва с първия отговор на сървъра, Time to First Byte (TTFB). Самият той не е Core Web Vital, но при бавен първи отговор добър LCP е почти невъзможен. Като ориентир, 0,8 секунди или по-малко е добре. Причините често са сайт без кеш, недостатъчна изчислителна мощност или пренасочвания. Сървърът също трябва да изпраща текстовите файлове компресирани (компресия с gzip или Brotli). Как да подобрите страната на сървъра, прочетете в Моят уебсайт е бавен или използва твърде много CPU: ето как да го ускорите и в ръководството за DirectAdmin, Моят уебсайт е бавен.
В AI Builder и WordPress
Сайт, създаден с AI Builder, задава ширина и височина за изображенията, чийто размер е известен, зарежда първата снимка на страницата веднага и с приоритет, а останалите едва когато влязат в полезрението, и при публикуване създава по-малка версия на големите снимки. В WordPress най-много помагат плъгин за кеширане и намаляването на изображенията. Прочетете повече за това в безплатния курс за WordPress, уроци Какво прави сайта бавен и как да го измерите? и Изображения, PHP и други начини за по-висока скорост.
Допълнително четене
- web.dev: Web Vitals (на английски)
- Относно PageSpeed Insights (на английски)
- Google: изживяване на страницата и Google Търсене (на английски)
- Google: докладът за основните показатели за уеб
Искате да научите повече? Преминете безплатния курс Видимост онлайн, урок 4.3 Core Web Vitals: LCP, INP и CLS.