Rychlost webu ovlivňuje, jak snadno návštěvník najde informaci, odešle formulář nebo se zorientuje v nabídce. Když se stránka načítá pomalu, reaguje se zpožděním nebo při čtení nečekaně poskakuje, lidé mohou úkol odložit. Na druhou stranu rychlý web neznamená jen co nejnižší číslo v jednom testu. Důležité je, jak se stránka chová na různých telefonech, počítačích, připojeních a při skutečné návštěvě.
Praktickým rámcem pro hodnocení této zkušenosti jsou Core Web Vitals. V tomto průvodci vysvětlíme tři metriky, ukážeme, kde začít s měřením a jak z výsledků sestavit plán zlepšení. Nemusíte hned měnit celý web ani kupovat nový server. Nejprve zjistěte, kde vzniká největší překážka pro návštěvníky, potom ověřte jednu změnu po druhé.
Ukázka digitální služby z webu Blue.point Solutions připomíná, že výkon má podporovat hlavní úkol návštěvníka.
Co měří Core Web Vitals
Core Web Vitals sledují tři stránky uživatelské zkušenosti: rychlost zobrazení hlavního obsahu, odezvu na interakci a vizuální stabilitu. Largest Contentful Paint (LCP) měří, kdy se zobrazí největší viditelný obsah, například hlavní fotografie nebo výrazný nadpis. Za dobrý výsledek se považuje LCP do 2,5 sekundy. Interaction to Next Paint (INP) sleduje odezvu stránky na kliknutí, klepnutí či stisk klávesy; dobrá hodnota je nejvýše 200 milisekund. Cumulative Layout Shift (CLS) vyjadřuje, nakolik se obsah během načítání nečekaně posouvá; dobrý výsledek je 0,1 nebo méně.
Hranice pomáhají určit, zda je zkušenost dobrá, potřebuje zlepšení, nebo je slabá. Neslouží však jako samostatná známka kvality celého webu. Google doporučuje hodnotit všechny tři metriky na 75. percentilu načtení a zvlášť pro mobilní a počítačová zařízení. To znamená, že se díváme na zkušenost většiny návštěv, ne pouze na nejlepší laboratorní běh.
Nejdřív měřte skutečné návštěvy i laboratorní testy
Začněte nástrojem PageSpeed Insights, který může zobrazit data Chrome UX Reportu od skutečných uživatelů i laboratorní audit Lighthouse. Data z reálného provozu ukazují, jak si vedou návštěvníci v delším období a na různých zařízeních. Laboratorní test naopak pomáhá opakovatelně hledat technické příčiny problému. Pokud stránka nemá dost návštěv, může být pole s daty uživatelů prázdné. Neznamená to, že web je rychlý nebo pomalý; jen zatím nemusí být k dispozici reprezentativní soubor měření.
Vyberte několik důležitých typů stránek: úvodní stránku, službu, článek, reference a formulář. Otestujte je na mobilu i počítači a poznamenejte si LCP, INP, CLS, případně TTFB a hlavní doporučení. Testujte stejné adresy vícekrát, protože síť i zatížení serveru kolísají. V Search Console můžete sledovat přehled Core Web Vitals založený na reálném používání. Skupiny adres v reportu pomáhají najít typy stránek, které mají podobný problém.
Laboratorní skóre nevydávejte za zkušenost každého návštěvníka. Výsledek závisí na nastavení testu, zařízení a síťových podmínkách. Lighthouse je užitečný při vývoji a hledání možností, ale jeho simulace sama nemůže změřit skutečnou interakci člověka jako INP. Zlepšení proto potvrďte opakovaným testem a podle dostupnosti také daty z reálného provozu.
LCP: pomozte hlavnímu obsahu zobrazit se včas
Nejprve zjistěte, který prvek je pro LCP rozhodující. Na úvodní stránce to bývá velký obrázek nebo úvodní blok textu, na článku může jít o nadpis či titulní fotografii. Pokud se načítá pomalu, prověřte, zda server rychle posílá první odpověď, zda prohlížeč nemusí čekat na několik souborů CSS a zda se hlavní obrázek nestahuje zbytečně pozdě. Obrázek v horní části stránky neodkládejte pomocí lazy loadingu; odložené načítání je vhodné především pro obsah, který návštěvník ještě nevidí.
Používejte rozměry odpovídající místu zobrazení, komprimujte fotografie a zvažte moderní formáty WebP nebo AVIF, pokud je váš systém spolehlivě obslouží. U důležitého obrázku nastavte prioritu načítání uvážlivě. Nepřednačítejte každý obrázek na stránce, protože soutěží o stejné připojení. Prázdná místa v šabloně, příliš velké soubory a zbytečné přesměrování mohou načtení zpomalit stejně jako pomalý hosting. Zkoumejte celý řetězec od serveru po zobrazení prvního podstatného obsahu.
Původní vizuál Blue.point Solutions doplňuje článek o digitálním prostředí a každodenním používání webu.
INP: zkraťte čekání po kliknutí
Stránka může vypadat načtená, a přesto působit pomalu, když tlačítko nereaguje nebo formulář dlouho čeká. INP sleduje dobu od interakce přes zpracování události až po další vykreslení stránky. Problém často způsobují dlouhé úlohy JavaScriptu, příliš mnoho skriptů třetích stran nebo složité překreslování rozhraní. Zaměřte se nejdříve na interakce, které jsou pro návštěvníka důležité: otevření menu, výběr filtru, přidání položky či odeslání poptávky.
Vývojář může rozdělit dlouhé úlohy na menší části, odstranit nepoužívaný kód a odložit práci, která není nutná pro první zobrazení. Ověřte také, zda se při kliknutí nepřepočítává příliš velká část stránky. Měření v prohlížeči pomůže určit, která funkce reaguje pomalu; nestačí automaticky odstranit všechny skripty, protože některé zajišťují důležitou funkci. Po úpravě znovu otestujte skutečný scénář a zkontrolujte, že se nezhoršila přístupnost ani správné odesílání formuláře.
CLS: zabraňte nečekaným posunům
Když se návštěvník chystá klepnout na odkaz a obsah se pod prstem posune, ztrácí jistotu a může omylem otevřít jinou část stránky. Častým důvodem je obrázek bez předem vyhrazené výšky, pozdě vložený reklamní či informační blok, font s výrazně jinými rozměry nebo obsah, který se objeví nad již čteným odstavcem. Pro obrázky a videa vyhraďte místo před jejich stažením pomocí rozměrů nebo vhodného poměru stran. U vložených prvků počítejte s prostorem, který mohou potřebovat.
U textu ověřte, jak se chová při načítání webových fontů a jejich náhrad. Důležité upozornění nevkládejte dodatečně nad právě používaný obsah; pokud se musí zobrazit, ponechte pro něj stabilní prostor nebo jej umístěte níže. Změny velikosti písma a načítání obrázků otestujte na užším displeji. CLS nevzniká jen při prvním načtení. Návštěvník může stránku posouvat, otevřít menu nebo přepnout filtr, proto sledujte také chování po interakci.
Obrázky, písma a soubory optimalizujte podle jejich role
Nejrychlejší soubor je ten, který stránka nepotřebuje stahovat. Zkontrolujte, zda jsou obrázky ve skutečné velikosti, v jaké se zobrazují, zda se na malé obrazovce neposílá zbytečně velká varianta a jestli lze fotografie komprimovat bez viditelné ztráty kvality. Obrázky pod prvním zobrazením načítejte postupně. Nepřevádějte bez rozmyslu všechny grafiky do jednoho formátu: loga, ilustrace a fotografie mohou mít odlišné nároky.
Podobně postupujte u písem, ikon a kaskádových stylů. Každá další varianta písma může znamenat další požadavek. Používejte jen řezy, které design skutečně potřebuje, a ověřte, zda je možné důležitému obsahu zobrazit systémový font dříve. Statické soubory lze obvykle efektivně ukládat do mezipaměti, takže je prohlížeč nemusí při každé návštěvě stahovat znovu. Komprese přenosu a správně nastavená mezipaměť jsou ale úkoly pro člověka, který zná infrastrukturu webu.
Omezte zbytečný JavaScript a závislosti třetích stran
Chat, mapy, analytika, přehrávače videa, widgety a reklamní nástroje mohou být užitečné, ale každý přidává požadavky, skripty nebo práci při vykreslování. Sepište všechny externí služby a u každé si odpovězte, kdo ji používá a jaký přínos přináší. Odstraňte neaktivní měřicí kódy a knihovny, načítejte neklíčové prvky až ve chvíli, kdy je návštěvník potřebuje. Pokud například mapa není hlavním obsahem stránky, lze nejdříve zobrazit její náhled s tlačítkem pro načtení.
Změna musí zachovat transparentnost a požadavky na ochranu soukromí. Neskrývejte ani nevypínejte funkce, které lidem pomáhají dokončit úkol. Smyslem je vyhnout se automatickému načítání věcí, které nepřinášejí hodnotu konkrétní návštěvě. U firemního webu bývá rozumné prověřit také formulářové nástroje a vložený obsah, protože právě tam návštěvníci potřebují rychlou odezvu a spolehlivý výsledek.
Rychlost kontrolujte na mobilu i při běžném používání
Telefon často používá pomalejší síť, menší obrazovku a méně výkonný procesor než vývojářský počítač. Proto testujte mobilní zobrazení jako samostatnou zkušenost: zda se hlavní obsah vejde do přehledné šířky, zda tlačítka reagují, zda je formulář ovladatelný prstem a zda se nic neposouvá. Projděte web také klávesnicí, zvětšete text a ověřte čtečku obrazovky, pokud to typ stránky vyžaduje. Optimalizace výkonu nesmí odebrat čitelné popisky, viditelný fokus ani možnost formulář opravit.
Zpomalování může vznikat pouze na jedné šabloně nebo u určité funkce. Proto nestavte plán podle jediného výsledku z úvodní stránky. Pokud například článek používá malou fotografii, zatímco reference obsahují galerii a video, mají rozdílné potřeby. Vezměte několik reprezentativních adres, porovnejte je před a po změně a zaznamenejte, na jakém zařízení a v jakém režimu test proběhl.
Jak sestavit rozumný plán zlepšení
Každý nalezený problém si zapište spolu s dopadem na návštěvníka, technickou příčinou, odhadem náročnosti a odpovědnou osobou. Začněte opravami, které zlepšují důležitou stránku a lze je bezpečně ověřit. U změny hlavního obrázku, fontu nebo skriptu sledujte nejen skóre, ale také správné zobrazení, konverzní cestu, přístupnost a chyby v prohlížeči. Jedna drobná úprava s jasným výsledkem bývá lepší než několik současných změn, u nichž není možné zjistit, která pomohla nebo uškodila.
Po nasazení zkontrolujte stránku v laboratorním testu a znovu po určité době i v reálných datech. Field data se mění postupně a závisí na chování návštěvníků, takže se nemusí promítnout okamžitě. Pokud výkon po aktualizaci klesne, projděte nasazené změny, nově přidané knihovny a obsah, který se začal načítat. Dohodněte si pravidelnou kontrolu při redesignu, změně šablony nebo přidání nové služby, ne pouze jednorázový audit před spuštěním.
Časté omyly při optimalizaci webu
Prvním omylem je honit se za skóre 100 bez ohledu na skutečný úkol. Laboratorní skóre se může mezi běhy měnit a jeho zlepšení automaticky neznamená, že návštěvníkům web lépe slouží. Druhým omylem je považovat rychlost za jednorázový projekt. Nové obrázky, funkce a marketingové nástroje mohou výkon časem změnit. Třetím omylem je měřit pouze úvodní stránku a přehlédnout formuláře, články nebo mobilní navigaci.
Vyhněte se také bezhlavému mazání funkcí, agresivnímu přednačítání všech souborů nebo odkládání veškerého JavaScriptu bez kontroly. Taková změna může rozbít menu, formulář nebo měření. Každá úprava má vycházet z příčiny, být prověřena na reprezentativních stránkách a mít jasného vlastníka. Pokud doporučení nástroje není srozumitelné, nejdříve zjistěte, jaký prvek a návštěvnický scénář se ho týká.
Co můžete udělat během prvního měsíce
V prvním týdnu si vyberte pět důležitých adres a zaznamenejte jejich stav v PageSpeed Insights na mobilu i počítači. Ve druhém týdnu porovnejte doporučení s podobnými stránkami v Search Console a určete jednu největší společnou překážku. Ve třetím týdnu nechte vývojáře upravit konkrétní příčinu, například příliš velký obrázek nebo blokující skript. Ve čtvrtém týdnu změnu otestujte, zkontrolujte hlavní návštěvnické úkoly a stanovte datum další kontroly.
Pro orientaci využijte také přehled metrik Web Vitals na web.dev, PageSpeed Insights a oficiální doporučení Google Search Central. Google Core Web Vitals doporučuje pro dobrou zkušenost, ale jde o jednu část širšího hodnocení stránky, nikoli o záruku pozice ve vyhledávání. Zaměřte se proto na skutečnou použitelnost: návštěvník má rychle najít informaci, snadno ovládat rozhraní a dokončit to, kvůli čemu přišel.
Rychlejší web začíná lepší zkušeností
Užitečná optimalizace propojuje měření s konkrétními potřebami lidí. Sledujte LCP, INP a CLS, testujte mobilní i počítačové stránky a oddělujte laboratorní výsledky od dat skutečných návštěvníků. Nejprve odstraňte překážku, která má největší dopad, a potom ověřte, zda změna funguje i při běžném používání. Tým, který výkon kontroluje průběžně, může udržovat web srozumitelný, stabilní a připravený na nové služby.
Další rady o srozumitelném návrhu najdete v článcích o testování použitelnosti a přístupném webu. Přehled toho, jak Blue.point Solutions tvoří webové stránky a specializované aplikace, je v sekci Naše služby.
