PageSpeed Insights без паника: как да четете отчета

Отваряте теста за скорост на Google, въвеждате адреса на сайта си и виждате червено число. Преди да звъннете на програмиста си с настояване за спешни промени, струва си да разберете какво всъщност показва този екран. Отчетът на PageSpeed Insights не е присъда за бизнеса ви, а технически инструмент - и се чете по определен начин.

Две части в отчета: реални посетители и лабораторен тест

Отчетът има две отделни части, които често показват различни неща. Горе са данните от реални посетители, а под тях е лабораторният тест. Разликата между двете е ключът към целия отчет.

Реалните данни идват от Chrome User Experience Report (CrUX) - база, в която Google събира как се зареждат страниците при истински посетители. PageSpeed Insights показва какво са преживели те през последните 28 дни: на собствените си телефони и компютри, със своята интернет връзка, от мястото, където са били. Ако имате пекарна в Пловдив и клиентите ви отварят сайта предимно от телефона си в града, тези данни показват точно това.

Важно е и кой влиза в тези данни. Броят се само посетители с Chrome на компютър или на Android, които са разрешили изпращането на статистика за ползването и синхронизирането на историята си. Посетителите с iPhone не се броят, дори да ползват Chrome. И още нещо: ако страницата няма достатъчно посещения, PageSpeed Insights показва данните за целия сайт, а ако и сайтът има твърде малко трафик, горната част остава празна. За много малки фирмени сайтове това е нормалното положение и не значи, че нещо е счупено.

Лабораторният тест е едно посещение при предварително зададени условия. За мобилната версия той симулира телефон от среден клас на мобилна мрежа, а за компютърната - компютър с кабелна връзка. Целта му е да открие технически проблеми в страницата, а не да покаже как реалните ви клиенти усещат сайта днес.

Защо мобилният резултат обикновено е по-нисък от настолния

Почти всеки собственик на сайт забелязва, че оценката за телефон е осезаемо по-ниска от тази за компютър. Това е очаквано и има обяснение:

• Лабораторният тест за телефон нарочно симулира по-слабо устройство и по-бавна мобилна връзка, а тестът за компютър - кабелна връзка.
• Телефоните наистина имат по-слаби процесори от компютрите и обработват по-бавно тежки страници с много скриптове.
• Мобилният интернет, дори когато е бърз, обикновено отговаря с по-голямо закъснение от кабелната връзка у дома или в офиса.

Затова не сравнявайте двете числа помежду им. Сравнявайте мобилния резултат с мобилния от миналия месец, а най-вече гледайте реалните данни за телефон, ако ги има - те показват как сайтът работи за истинските ви клиенти.

Трите основни показателя и праговете на Google

За да не се загубите в графиките и съкращенията, Google насочва вниманието към три показателя, които нарича Core Web Vitals - основните показатели за преживяването на посетителя. При всеки от тях Google гледа 75-ия персентил: показателят е добър, ако поне три от всеки четири посещения са в зелената зона. Праговете по-долу са от документацията на Google за PageSpeed Insights и от web.dev.

LCP (Largest Contentful Paint) - кога се появява основното съдържание

Това е времето, за което се появява най-големият елемент в първия екран - обикновено основната снимка или голямото заглавие. За посетителя това е моментът, в който страницата изглежда готова.

• Добро: до 2,5 секунди.
• Нуждае се от подобрение: от 2,5 до 4 секунди.
• Лошо: над 4 секунди.

INP (Interaction to Next Paint) - колко бързо реагира страницата

Този показател мери колко бързо страницата отговаря на действие на посетителя - натискане на бутон, отваряне на меню, докосване на снимка или натискане на клавиш. Показва дали страницата „замръзва“, когато някой се опита да направи нещо. Превъртането не се брои.

• Добро: до 200 милисекунди.
• Нуждае се от подобрение: от 200 до 500 милисекунди.
• Лошо: над 500 милисекунди.

INP се вижда най-вече в реалните данни, защото иска истински натискания. В лабораторния тест няма кой да натиска, затова там най-близкият заместител е Total Blocking Time - колко време страницата е била заета и не би могла да реагира.

CLS (Cumulative Layout Shift) - стои ли съдържанието на място

CLS мери дали елементите на страницата се местят неочаквано. Сигурно ви се е случвало: посягате към бутон, над него изведнъж се зарежда снимка и натискате нещо друго. Точно това е лош CLS. Числото няма мерна единица - то показва колко голяма част от екрана се е преместила и на какво разстояние.

• Добро: до 0,1.
• Нуждае се от подобрение: от 0,1 до 0,25.
• Лошо: над 0,25.

Защо всеки от трите показателя струва клиенти, с примери от ежедневието, разказахме в статията за скоростта на сайта и показателите LCP, CLS и INP без жаргон.

Оценката от 0 до 100: какво значат цветовете

Голямото число в лабораторната част е общата оценка за производителност. Тя се смята от няколко лабораторни измервания, сред които LCP, CLS и Total Blocking Time. Цветовете са три: от 0 до 49 е червено (лошо), от 50 до 89 е оранжево (има какво да се подобри), от 90 до 100 е зелено (добро). Оранжевата оценка за телефон не е тревога сама по себе си - погледнете първо какво казват реалните данни.

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

Под лабораторния тест инструментът показва списък с препоръки и диагностики. Много собственици се опитват да отметнат всяка от тях и плащат за работа, която клиентите им няма да усетят.

Започнете от промените, които посетителите наистина усещат. Ето кои обикновено дават най-голям ефект:

• Тежките снимки. Снимка, качена направо от телефона или от фотосесия, често тежи няколко мегабайта, а на екрана се показва в малък размер. Намаляването и компресирането ѝ обикновено е най-бързата видима полза.
• Подскачащото съдържание (CLS). Когато бутоните и текстът стоят на място, посетителите не натискат погрешка, докато поръчват или се записват за час.
• Излишните външни скриптове. Всеки чат, брояч, пиксел и вградена карта добавя код от чужд сървър, който телефонът трябва да изтегли и изпълни. Проверете кои от тях наистина ползвате и махнете останалите.

Кои технически препоръки могат да почакат

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

Ако сайтът ви е за автосервиз, адвокатска кантора или квартален магазин, следните препоръки обикновено не са спешни:

• Неизползван CSS или JavaScript. Такова съобщение се появява при много сайтове, изградени с готова система или тема. Изчистването му докрай може да отнеме много часове работа, а посетителят рядко усеща разликата.
• Снимките в стари публикации от архива. Ако имате стотици стари статии, преработката на всяка снимка поотделно рядко си струва. Започнете от страниците, които наистина носят посещения.
• Дребни подобрения, които спестяват части от секундата в лабораторния тест, когато реалните данни вече са зелени. Тогава времето е по-добре вложено в ясни текстове за услугите ви.

Защо резултатът се мени при всяко пускане на теста

Пуснете теста три пъти подред и вероятно ще получите три различни числа, например 65, 72 и 68. Това не значи, че сайтът се чупи или че някой го променя в момента.

Колебанията идват от условията около самия тест:

1. Мрежата: пътят на данните през интернет и натоварването на връзката се менят от минута на минута.
2. Сървърът на сайта: на споделен хостинг същият сървър обслужва и други сайтове и времето за отговор зависи от тяхното натоварване.
3. Външните услуги: реклами, чат, карти и пиксели от други доставчици отговарят ту по-бързо, ту по-бавно, а рекламите може да са различни при всяко зареждане.
4. Машината, която прави теста: колко е заета в момента на измерването, също се отразява на резултата.

Затова гледайте на точките като на ориентир, а не като на кантар. Пуснете теста няколко пъти и гледайте средата. Ако резултатът се движи в един и същ диапазон седмица след седмица, сайтът е стабилен. Голям спад, който се повтаря при всяко пускане, вече е повод да попитате какво се е променило.

Как да подходите разумно към скоростта на сайта си

Скоростта е важна, защото посетителите не обичат да чакат, а Google я отчита при класирането. Тя обаче е една от частите на добрия фирмен сайт, а не цел сама по себе си.

Ако за сайта ви има реални данни, преглеждайте ги веднъж месечно. Освен в PageSpeed Insights, същите три показателя се виждат и в отделен отчет в Google Search Console, където страниците със сходни проблеми са събрани в групи.

Преди да предприемете каквото и да е, отворете сайта от собствения си телефон при нормална връзка. Опитайте да изпратите запитване, да намерите телефона си, да разгледате снимките на свършената работа. Ако страницата се появява бързо, бутоните реагират веднага и нищо не подскача, сайтът ви върши работата си.

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

Темискорост на сайтаPageSpeed InsightsCore Web Vitalsоптимизация на сайтподдръжка на сайт