Rýchlosť webu a Core Web Vitals

Tri čísla, tri otázky

Každé z troch meraní odpovedá na otázku, ktorú si návštevník nikdy nepoloží nahlas, ale cíti ju.

• LCP, Largest Contentful Paint: kedy uvidím to podstatné? Meria čas, za ktorý sa vykreslí najväčší prvok na obrazovke, zvyčajne úvodná fotka alebo nadpis.
• INP, Interaction to Next Paint: reaguje to, keď kliknem? Meria oneskorenie medzi kliknutím alebo ťuknutím a viditeľnou odozvou. V roku 2024 nahradilo staršie meranie FID.
• CLS, Cumulative Layout Shift: neposkočí mi tlačidlo pod prstom? Meria, ako veľmi sa obsah posúva, kým sa stránka načítava.

Laboratórium a skutočnosť

Je rozdiel medzi meraním v nástroji a meraním na ľuďoch. Lighthouse alebo PageSpeed Insights vedia web zmerať hneď, na simulovanom telefóne a pomalšom pripojení. To je laboratórium. Hodí sa na hľadanie chýb.

Google však pri hodnotení používa dáta zo skutočných návštev v prehliadači Chrome, tzv. Chrome UX Report. Pozerá sa na 75. percentil, teda na hodnotu, ktorú dosiahnu aspoň tri štvrtiny návštev. Web, ktorý je rýchly na vašom počítači v kancelárii, môže byť pomalý pre zákazníka v autobuse.

Malé weby skutočné dáta často nemajú, lebo nemajú dosť návštev. Vtedy PageSpeed Insights ukáže len laboratórne meranie. Ani to nie je dôvod ho ignorovať.

Prečo na tom záleží

Google uvádza Core Web Vitals ako súčasť signálov o kvalite stránky pri hodnotení vo vyhľadávaní. Zároveň hovorí jasne, že relevantný obsah má prednosť. Rýchly web s prázdnym obsahom nevyhrá. Pri dvoch podobne dobrých stránkach ale rýchlosť rozhodovať môže.

Dôležitejší je človek. Kto čaká na úvodnú fotku, odchádza. Kto ťukne na „Objednať“ a nič sa nedeje, ťukne znova alebo zatvorí kartu. Kto chce kliknúť na telefón a obsah mu poskočí, klikne na niečo iné. Každé z týchto meraní opisuje chvíľu, keď môžete prísť o zákazníka.

Pri e-shope je to ešte citeľnejšie. Zákazník prechádza zoznam, filtruje, otvára produkty a vracia sa späť. Každý krok, ktorý trvá o chvíľu dlhšie, sa v jednom nákupe zopakuje desaťkrát. Pomalý filter vie pokaziť nákup aj pri najlepšej cene.

Čo web najčastejšie spomaľuje

Pri kontrolách webov sa stále opakujú tie isté príčiny:

• Veľké obrázky v starých formátoch, ktoré telefón sťahuje v plnej veľkosti.
• Video na pozadí celej úvodnej obrazovky.
• Desiatky skriptov tretích strán: chat, mapy, pixely, widgety recenzií, každý so svojou záťažou.
• Písma načítané z cudzích serverov bez rezervy, kým sa stiahnu.
• Obrázky a reklamné bloky bez vyhradeného miesta, ktoré pri načítaní posunú text.
• Redakčný systém poskladaný z pluginov, kde každý pridáva vlastné súbory na každú stránku.

Ako to riešime pri stavbe

Rýchlosť nedolaďujeme na konci, ale staviame s ňou od začiatku. Na platforme Vera sa obrázky prevádzajú do úsporného formátu WebP a pripravujú vo viacerých veľkostiach, aby telefón dostal menší súbor ako monitor. Hotové stránky sa predgenerujú, takže server nemusí pri každej návšteve skladať obsah odznova.

Obrázkom a vloženým prvkom vyhradzujeme miesto vopred, aby obsah neposkakoval. Cudzie skripty pridávame len vtedy, keď majú jasný úžitok, a mapu radšej ukážeme ako ľahký obrázok, než aby web hneď načítal celú mapu Google.

Core Web Vitals sledujeme aj po spustení. Keď pribudne nový obsah alebo nová funkcia, pozrieme sa, či sa čísla nezhoršili. Aj to je dôvod, prečo WordPress nerobíme: každý plugin je ďalšia vec, ktorá vie web spomaliť.

Ako si web zmerať sami

Otvorte PageSpeed Insights od Googlu a zadajte adresu svojho webu. Pozrite sa najprv na mobilné výsledky, nie na počítačové. Ak hore vidíte sekciu so skutočnými dátami, tá je dôležitejšia ako skóre pod ňou.

Druhé miesto je Google Search Console, správa Core Web Vitals. Ukáže, ktoré skupiny stránok majú problém. Ak výsledkom nerozumiete alebo chcete vedieť, čo s nimi, pošlite mi adresu a pozriem sa na ne.