Скоростта на сайта е пари: LCP, CLS и INP без жаргон

Google мери скоростта на сайта ви с три числа: LCP, CLS и INP. Тук са обяснени с човешки думи, без жаргон и без излишни термини. Ще видите какво губите, когато сайтът се влачи на телефон, и как да го проверите сам за пет минути.

Клиентът ви стои на спирката

Човек чака автобус. Една чертичка 4G. Търси „ключар Пловдив“. Отваря първия резултат. Бял екран. Брои до три. Връща се назад и отваря следващия.

Това не е метафора. Това е мнозинството от трафика ви: мобилен, на слаба връзка, без търпение и с ясна алтернатива на един клик разстояние.

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

Затова бавният сайт не е просто „по-неприятен“. Той не бива видян.

Трите числа, които Google мери

Google не гледа как сайтът ви се държи в лаборатория. Гледа как се държи при истински хора, на истински телефони.

Показателите се наричат Core Web Vitals и са три. Праговете по-долу са публикувани от Google и важат за 75% от посещенията.

LCP: кога се появява голямото нещо

Largest Contentful Paint. С прости думи: колко секунди минават, докато най-голямото нещо на екрана наистина се появи. Обикновено това е голямата снимка или заглавието.

Добре: до 2,5 секунди. Зле: над 4.

Какво го чупи: огромни снимки, качени както са излезли от телефона; бавен сървър; шрифт, който бави текста. Към това се добавят и десет скрипта, които се карат кой да зареди пръв.

На телефон това число е крехко. Същата страница, която на офис интернет светва веднага, може да се бави осезаемо повече на слаба мобилна връзка.

CLS: кога съдържанието подскача

Cumulative Layout Shift. Това е моментът, в който посягате към „Купи“. Точно тогава се зарежда банер, всичко скача надолу и вие натискате „Изтрий“.

Добре: под 0,1. Зле: над 0,25.

Какво го чупи: снимки без предварително запазено място; реклами; известието за бисквитки; шрифт, който сменя размера, след като текстът вече е показан.

Това е показателят, който хората усещат директно, без да могат да го назоват. Страница, която подскача, се чете като немарлива, дори когато съдържанието ѝ е добро.

INP: колко бавно реагира на пръста ви

Interaction to Next Paint. От март 2024 г. Google използва него вместо стария показател FID.

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

Добре: до 200 милисекунди. Зле: над 500.

Какво го чупи: твърде много JavaScript, който върши своята работа точно тогава, когато потребителят иска нещо от страницата.

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

Защо това са пари, а не точки

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

Такива числа зависят от бранша, цената и трафика. Всеки, който ви ги обещава като гаранция, продава.

Сметката е по-проста и е изцяло ваша. Отговорете си на три въпроса:

• Колко души влизат в сайта ви на месец? (Вижте в Google Analytics или Search Console.)
• Колко от тях си тръгват, без да са видели нищо, особено от телефон?
• Колко струва един клиент за вас?

Умножете. Това е сметката. Не ви трябва изследване — трябват ви вашите собствени числа.

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

Откъде идва бавният сайт и какво се прави по въпроса

Почти никога от лош късмет. Обикновено от едно решение, взето в началото: „да сложим готова тема и да ѝ добавим това, което липсва“.

Оттам нататък всяка липсваща функция става още една добавка. Всяка добавка носи още код. А посетителят на спирката тегли целия този товар през 4G.

Затова не строим върху WordPress и не купуваме теми. Не от снобизъм, а защото бавнината в тях не е бъг, а сбор от компромиси.

Няма магия. Има шест скучни неща, направени докрай.

1. Снимките. Снимка от телефон е тежка. На сайта трябва да е лека, в модерен формат (WebP или AVIF), и в няколко размера. Затова една снимка се подготвя в няколко версии, а браузърът избира подходящата. Телефонът няма нужда да тегли версията за 4K монитор.
2. Запазено място. Всяка снимка и всеки банер получават размери предварително, за да не подскача страницата, докато се зарежда. Мястото се пази още преди файлът да е пристигнал.
3. По-малко JavaScript. Всеки скрипт е обещание, което браузърът трябва да изпълни, преди да ви послуша. Всяко външно парче код идва и със собствената си връзка към чужд сървър. Три чата, два пиксела и един слайдер правят точно това лошо INP.
4. Шрифтове. Текстът трябва да се вижда веднага, дори специалният шрифт още да не е дошъл. Той идва после и заменя временния, без текстът да изчезва.
5. Сървър близо до човека. Съдържанието се раздава от мрежа с точки по целия свят, при нас Cloudflare, а не от една машина в един град. Разстоянието до сървъра се плаща от посетителя, в секунди чакане.
6. Кеширане. Втората страница не бива да се тегли отново от нула. Браузърът и мрежата трябва да пазят това, което вече са донесли.

Проверете си сайта за пет минути

1. Отворете pagespeed.web.dev и пуснете вашия адрес. Гледайте мобилния резултат, не десктопа. Тестът е безплатен и не изисква регистрация.
2. Ако горе се появи секция с данни от реални потребители, това е истината за сайта ви. Останалото е лабораторен тест.
3. Отворете Google Search Console → Core Web Vitals. Там Google ви казва точно кои страници падат и защо. Отчетът групира страниците, така че виждате проблема, а не отделни адреси.

Честно докъде стига скоростта

Строим така, че да се целим в 95–100 точки в Lighthouse. Но да сме точни какво значи това число.

Lighthouse е лабораторен тест. Сто точки на празна визитка са лесни. Сто точки на истински магазин с четиристотин продукта, чат и рекламни пиксели не са.

Числото е полезно като посока, не като диплома. То показва дали основата е сложена както трябва.

Затова числото, което наистина значи нещо, е другото: как се държи сайтът при вашите хора, на техните телефони, по техните мрежи.

Ако някой ви показва зелено число, а сайтът се влачи на 4G, зеленото число не е вашето.

И една граница, която трябва да се каже. Бърз сайт с нищо не се класира по-добре от бавен сайт с точния отговор.

Google казва по същество същото в насоките си за Page Experience. Добрият опит на страницата не замества полезното съдържание. Според тези насоки страница с наистина полезна информация може да се класира по-напред дори когато опитът ѝ е по-слаб. Това е преразказ на смисъла, а не дословен цитат.

Скоростта решава друго. Тя решава дали хората изобщо ще стигнат до съдържанието ви и дали ще останат достатъчно, за да го прочетат.

Първо направете сайта полезен. После го направете бърз. Не обратното.

Как гледаме на това ние

Скоростта не е услуга, която се добавя накрая. Тя е следствие от решенията, взети в началото.

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

И мерим при реални посетители, не само в лабораторен тест. Числото има смисъл само ако вашите хора усещат разликата на своя телефон.

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

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