Rychlost webu a Core Web Vitals: co opravit jako první

Tři různé problémy, tři metriky

Core Web Vitals sledují načtení hlavního obsahu pomocí LCP, odezvu na interakce pomocí INP a stabilitu rozložení pomocí CLS. Dobré hodnoty podle web.dev jsou LCP nejvýše 2,5 sekundy, INP nejvýše 200 milisekund a CLS nejvýše 0,1. Posuzují se na 75. percentilu návštěv, nikoli podle jediného otevření stránky.

Pro majitele firmy je důležitý význam: jak dlouho zákazník čeká na hlavní obsah, zda web reaguje a zda mu před kliknutím neposkočí tlačítko. Ani splnění všech hranic nezaručí pozice ve vyhledávání nebo získání zakázky.

Odlište simulaci od skutečných návštěv

Laboratorní test pomáhá hledat příčiny za určitých podmínek. Terénní data popisují zkušenost reálných návštěvníků. Výsledky se mohou lišit podle zařízení, sítě i navštívené stránky. U menšího webu nemusí být dost dat; chybějící údaj není potvrzením bezchybnosti.

Změřte hlavní stránku, důležitou službu a stránku s formulářem. Otevřete je také na běžném telefonu. Zapište, co je vidět jako první a zda můžete ihned číst, posouvat a kliknout. Při opakovaném testu srovnávejte stejné adresy a podobné podmínky.

Začněte obrázky a úvodním obsahem

Fotografie nahraná přímo z fotoaparátu může být zbytečně velká pro místo, ve kterém se zobrazuje. Připravte přiměřené rozměry, vhodnou kompresi a více velikostí pro různá zařízení. Kvalitu kontrolujte na skutečné fotografii, ne pouze podle velikosti souboru.

Hlavní obrázek v první obrazovce by neměl čekat na odložené načtení určené pro obsah níže. Obrázkům zároveň vyhraďte rozměry, aby po načtení neposouvaly text. Automaticky přehrávané video zvažte podle přínosu pro nabídku; na telefonu může zabrat prostor i připojení.

Prověřte doplňky a cizí skripty

Chat, mapy, video, reklamní značky a další doplňky mohou přidávat práci prohlížeči. Udělejte jejich soupis a určete, které opravdu používáte. Odstranění opuštěného nástroje bývá užitečnější než ladění efektu, který zákazník téměř nevidí.

Nevypínejte vše najednou na živém webu. Změnu ověřte v náhledu, zejména u formulářů a měření. Mapa může být odkazem nebo se načíst na vyžádání, pokud zákazník stále snadno zjistí adresu a cestu. Konkrétní postup závisí na použitém webu.

Opravy seřaďte podle dopadu

Vytvořte krátký seznam: problém, dotčená stránka, pravděpodobná příčina a způsob ověření. Nejdřív opravte chování, které znemožňuje kontakt nebo čtení. Teprve potom řešte drobné rozdíly ve skóre.

Modelový příklad: na mobilu se nejprve objeví nadpis, potom velká fotografie posune tlačítko a po klepnutí formulář několik sekund nereaguje. Nestačí zmenšit fotografii. Je potřeba vyhradit jí prostor a zvlášť prověřit příčinu pomalé reakce formuláře.

• První priorita: nefunkční nebo výrazně opožděná interakce.
• Druhá priorita: hlavní obsah, na který návštěvník čeká.
• Třetí priorita: poskakování rozložení a rušivé načítání.
• Nakonec: další optimalizace ověřené měřením.

Po úpravě zkontrolujte i obchodní cestu

Opravenou stránku znovu změřte a projděte od příchodu až k doručení poptávky. Ověřte menu, obrázky, jazykové verze a formulář. Změna načítání nesmí odstranit informaci, kterou zákazník potřebuje.

Výsledky reálných uživatelů se nepromění ihned po jedné úpravě. Sledujte je postupně a současně kontrolujte relevantní poptávky. Pokud chcete řešit rychlost se Sitify, pošlete konkrétní URL, zařízení a popis toho, co při používání zdržuje.

Zdroje a další informace

• web.dev: Core Web Vitals a doporučené hranice