Rychlost webu: jak ji změřit a proč na ní záleží

Otevřete svůj web na mobilu, třeba v tramvaji na mobilních datech. Kolik vteřin čekáte, než uvidíte něco užitečného? Pokud dost dlouho na to, abyste začali být netrpěliví, vaši zákazníci jsou na tom stejně – jen oni na rozdíl od vás nemají důvod čekat. Rychlost webu rozhoduje o tom, jestli si návštěvník vaši nabídku vůbec přečte. V článku ukážeme, jak si rychlost změřit sami a zdarma, jak číst výsledky a co s pomalým webem dělat.

Proč na rychlosti webu záleží

Lidé nečekají. Kdo hledá restauraci nebo řemeslníka, má ve výsledcích hledání další odkazy. Když se váš web načítá dlouho, vrátí se a klikne na konkurenci.
Většina návštěv je z mobilu. Telefon má slabší výkon než počítač a mobilní připojení bývá pomalejší. Web, který na kancelářském počítači naběhne hned, může být na mobilu nepoužitelný.
Google rychlost bere v úvahu. Rychlost a plynulost stránky patří mezi signály, podle kterých Google hodnotí, jak dobrou zkušenost stránka nabízí. Není to jediné kritérium, ale pomalý web si tím nepomůže.
Pomalý web působí zastarale. Zákazník neřeší technické důvody. Prostě má pocit, že firma o web nepečuje.

Jak změřit rychlost webu: PageSpeed Insights

Nejjednodušší cesta je bezplatný nástroj Googlu PageSpeed Insights (pagespeed.web.dev):

Otevřete stránku pagespeed.web.dev.
Vložte adresu svého webu a klikněte na Analyzovat.
Za chvíli uvidíte výsledky zvlášť pro mobil a pro počítač. Dívejte se hlavně na mobil.

Výsledek má dvě části. Nahoře mohou být data skutečných návštěvníků – jak web za poslední měsíc fungoval lidem, kteří ho opravdu navštívili. Zobrazí se jen u webů s dostatečnou návštěvností. Pod nimi je laboratorní test se skóre od 0 do 100, který proběhne právě teď na simulovaném mobilu.

Jak změřit rychlost webu v Lighthouse přímo v Chrome

Stejný test jako PageSpeed Insights umí i prohlížeč Chrome. Nástroj se jmenuje Lighthouse a hodí se, když chcete měřit opakovaně nebo stránku, která ještě není veřejná.

Otevřete anonymní okno (Ctrl+Shift+N, na Macu Cmd+Shift+N). V anonymním okně neběží rozšíření prohlížeče, jako jsou blokátory reklam nebo správci hesel, která by výsledek zkreslila. Nebudou se načítat ani uložená data z dřívějších návštěv, takže uvidíte web tak, jak ho vidí nový návštěvník.
Načtěte svůj web a stiskněte F12 (na Macu Cmd+Option+I). Otevřou se nástroje pro vývojáře.
Přepněte na záložku Lighthouse. Pokud ji nevidíte, najdete ji pod šipkou » v horní liště nástrojů.
Vyberte zařízení Mobilní a kategorii Výkon (Performance). Ostatní kategorie – přístupnost, doporučené postupy a SEO – můžete nechat zaškrtnuté. Test potrvá o něco déle a navíc ukáže, jestli web dobře funguje pro všechny návštěvníky a jestli mu dobře rozumí vyhledávače.
Klikněte na Analyzovat načítání stránky (Analyze page load) a počkejte zhruba minutu.

Tip: Skóre se mezi jednotlivými měřeními trochu liší – podle vytížení počítače, připojení i serveru. Změřte web dvakrát nebo třikrát a dívejte se na typickou hodnotu, ne na jedno měření. Během testu nechte ostatní programy v klidu.

Co znamenají výsledky

Skóre výkonu od 0 do 100 je souhrn. Zelená (90 a víc) je výborná, oranžová (50–89) znamená, že je co zlepšovat, červená (pod 50) je problém. Důležitější než samotné číslo jsou ale metriky pod ním, protože říkají, co přesně návštěvník zažívá:

Metrika	Co měří	Dobrá hodnota
Vykreslení největšího obsahu (LCP)	za jak dlouho se zobrazí hlavní obsah, třeba velká úvodní fotka nebo nadpis	do 2,5 s
Kumulativní posun rozvržení (CLS)	jestli obsah při načítání „poskakuje“ – třeba když se tlačítko na poslední chvíli posune a vy kliknete vedle	do 0,1
Interakce s dalším vykreslením (INP)	jak rychle stránka zareaguje na klepnutí nebo kliknutí	do 200 ms

INP zobrazuje jen PageSpeed Insights v datech skutečných návštěvníků. Laboratorní test v Lighthouse místo něj ukazuje celkovou dobu blokování (TBT) – jak dlouho je stránka při načítání zaneprázdněná a nereaguje.

Pod metrikami najdete seznam doporučení, co zlepšit, seřazený podle toho, kolik by to přineslo. Některá jsou technická, ale i bez znalosti programování z nich poznáte, kde je hlavní problém – třeba když na prvních místech svítí obrázky.

Co web nejčastěji zpomaluje

Velké fotky. Fotka přímo z fotoaparátu nebo mobilu má několik megabajtů. Na webu stačí zlomek. Je to nejčastější a nejsnáze řešitelná příčina.
Moc pluginů. U webů na WordPressu každý plugin přidává kód, který se načítá na každé stránce – i tam, kde ho nikdo nepotřebuje. Dvacet pluginů je dvacet důvodů ke zpomalení.
Těžká šablona. Univerzální šablony umí všechno pro všechny. Na vašem webu se z toho použije desetina, načítá se ale všechno.
Vložené skripty třetích stran. Měřicí kódy, chaty, mapy, videa, reklamní pixely. Každý z nich něco stahuje a zdržuje.
Pomalý hosting. Nejlevnější hosting sdílí jeden server se stovkami dalších webů. Když je přetížený, čeká i ten váš.

Opravit, nebo udělat nový web?

Některé věci jdou spravit rychle a levně: zmenšit fotky, odstranit nepoužívané pluginy, vyhodit zbytečné skripty. Pokud vám po takové úpravě skóre na mobilu vyskočí do zelených čísel, máte vyhráno.

Když ale problém sedí hlouběji – v šabloně, v desítkách pluginů, na kterých web stojí, nebo ve způsobu, jakým je web postavený –, opravy bývají drahé a výsledek nejistý. Pak se často vyplatí web udělat znovu, rovnou správně. Při rozhodování pomůže porovnat náklady na několik let dopředu, jak popisujeme v článku Kolik stojí web pro malou firmu.

Jak stavíme rychlé weby my

V Puretech weby neskládáme ze šablon a pluginů, ale programujeme je v moderní technologii Next.js. Na webu je jen kód, který opravdu potřebuje, žádné nepoužívané funkce navíc.

Obrázky web posílá v moderních formátech a ve velikosti podle zařízení – telefon nestahuje fotku určenou pro velký monitor. A protože obsah si spravujete v Puretech CMS, nehrozí, že by rychlost časem pokazila obří fotka nahraná do článku: fotky se při nahrání do CMS samy zmenší a uloží v úsporném formátu. Víc o tom, co si v CMS měníte sami, najdete v článku Správa obsahu webu, kterou zvládne každý.

Vyzkoušeli jsme to na vlastním webu. Náš web puretech-dev.cz jsme změřili v Lighthouse přesně podle postupu výše, v anonymním okně Chrome. Na počítači má skóre 100 ve všech čtyřech kategoriích – výkon, přístupnost, doporučené postupy i SEO. Na mobilu má výkon 94 a ostatní kategorie 100. Změřte si ho sami.

Časté otázky

Musím mít skóre 100?

Ne. Skóre je orientační. Důležité je, aby web na mobilu rychle ukázal hlavní obsah, nic při načítání neposkakovalo a stránka reagovala na klepnutí. Zelená čísla u hlavních metrik jsou dobrý cíl.

Proč mám v PageSpeed Insights jiné skóre než v Lighthouse?

PageSpeed Insights měří ze serverů Googlu, Lighthouse v Chrome z vašeho počítače a přes vaše připojení. Výsledky se proto trochu liší. Pro porovnání před a po úpravě používejte vždy stejný nástroj.

Proč měřit v anonymním okně?

Rozšíření prohlížeče, například blokátor reklam, se do měření promítnou – mohou web zpomalit, nebo naopak zablokovat skripty, které vaši zákazníci normálně načítají. V anonymním okně rozšíření neběží, takže výsledek odpovídá tomu, co zažije běžný návštěvník.

Stačí změřit jen úvodní stránku?

Začněte jí, ale změřte i stránky, na které lidé chodí nejčastěji – třeba jídelní lístek, ceník nebo článek, který vám přivádí návštěvy z Googlu.

Shrnutí

Rychlost webu si změříte za pár minut a zdarma: v PageSpeed Insights, nebo v Lighthouse v anonymním okně Chrome. Dívejte se hlavně na výsledky pro mobil a na to, jak rychle se zobrazí hlavní obsah. Nejčastější brzdou jsou velké fotky, přebytečné pluginy a těžké šablony. Některé věci spravíte rychle, jindy se vyplatí nový web postavený rovnou pro rychlost.

Chci rychlý web→