Audit rychlosti webu: co zdržuje načítání a jak to opravit

Co je audit rychlosti webu a kdy dává smysl

Audit rychlosti webu je rozbor toho, jak rychle se stránky načítají, jak rychle reagují na kliknutí a jestli se při načítání neposouvá obsah. Výsledkem není jedno číslo, ale seznam konkrétních příčin a doporučení, jak je odstranit.

Dává smysl, když Search Console hlásí stránky se slabými Core Web Vitals, když web působí pomalu hlavně na mobilu, nebo když se zpomalil po přidání nových skriptů (měření, chat, recenze). Samotné změření rychlosti webu zvládnete zdarma, třeba v bezplatné službě Search Console. Audit k tomu vysvětlí, co z čísel plyne pro váš konkrétní web.

Core Web Vitals: LCP, INP a CLS

Core Web Vitals jsou tři metriky, kterými Google popisuje uživatelský zážitek ze stránky:

Metrika	Co měří	Dobré	Špatné
LCP (Largest Contentful Paint)	jak rychle se zobrazí největší prvek, často hlavní obrázek	do 2,5 s	nad 4 s
INP (Interaction to Next Paint)	jak rychle stránka zareaguje na kliknutí nebo klepnutí	do 200 ms	nad 500 ms
CLS (Cumulative Layout Shift)	jak moc se obsah při načítání nečekaně posouvá	do 0,1	nad 0,25

Hodnoty mezi tím jsou „vyžaduje zlepšení“, prahy uvádí web.dev. Hodnotí se 75. percentil návštěv, zvlášť pro mobil a desktop: stránka projde, když dobrou hodnotu mají aspoň 3 ze 4 návštěv. Metrika FID už mezi Core Web Vitals nepatří, 12. března 2024 ji nahradil INP. Podrobnosti jsou na web.dev.

Proč PageSpeed Insights ukazuje jiná čísla než Search Console

PageSpeed Insights ukazuje dva druhy dat:

• Polní data z Chrome User Experience Report (CrUX): reálné návštěvy uživatelů Chromu za posledních 28 dní. Ze stejného zdroje čerpá i přehled v Search Console.
• Laboratorní data z nástroje Lighthouse: jedno simulované načtení stránky, na mobilu se středně výkonným telefonem a zpomalenou sítí, z datacentra Googlu.

Laboratorní měření má podle web.dev předem dané zařízení a síť, obvykle prázdnou mezipaměť a nezachytí scrollování ani klepání. Skuteční lidé mají různé telefony a stránky otevírají opakovaně, takže čísla se běžně liší. Search Console navíc seskupuje podobné URL a stav skupiny určuje nejhorší metrika. Proto se výsledek skupiny může lišit od jedné stránky v PageSpeed Insights.

Dvě věci, které je dobré vědět:

• Lighthouse při načtení stránky INP nezměří. Při pouhém načtení nikdo neklikne. Místo toho ukazuje TBT (Total Blocking Time), dobu, kdy hlavní vlákno prohlížeče blokují dlouhé úlohy, typicky JavaScript. Podle web.dev je to užitečná náhrada, ne totéž co INP.
• Skóre 0–100 není hodnocení Core Web Vitals. Je to vážený průměr laboratorních metrik, který se navíc mezi běhy může lišit.

Rozdíly podrobně popisuje web.dev (anglicky).

Pro koho se audit hodí a pro koho ne

Hodí se majitelům firemních webů a e-shopů, kteří chtějí vědět, proč je web pomalý, dřív než začnou cokoli přepisovat. Typicky e-shopům na Shoptetu nebo WooCommerce, kde se nasbíralo hodně doplňků a skriptů.

Nehodí se, pokud:

• hledáte rozbor toho, kde lidé na webu váhají nebo proč nedokončí nákup. To řeší UX audit webu;
• web teprve vzniká. Rychlost je levnější řešit rovnou při tvorbě firemního webu;
• čekáte příslib konkrétního skóre nebo pozice ve vyhledávání. Ten poctivě nedá nikdo.

Jak audit probíhá

1. Rozsah. Celý web, nebo jen vybrané typy stránek: úvodní stránka, kategorie, detail produktu, košík. Každý typ má jinou šablonu a jiné problémy.
2. Polní data. Pokud je web má, projdou se data z CrUX a Search Console. Ukážou, kde mají problém skuteční návštěvníci.
3. Laboratorní rozbor. Lighthouse a nástroje pro vývojáře v Chromu ukážou proč: který prvek je LCP, co blokuje vykreslení, které skripty zatěžují prohlížeč, co posouvá obsah.
4. Doporučení. Ke každému nálezu oprava a kdo ji může udělat: úpravou šablony, nastavením, nebo na straně platformy či hostingu.
5. Volitelně implementace. Opravy může webrocks i provést. V polních datech se zlepšení projeví postupně, protože CrUX podle dokumentace PageSpeed Insights pracuje s posledními 28 dny.

Nejčastější příčiny pomalého webu

Doporučení na web.dev se točí kolem stejných příčin:

• Obrázky. Hlavní obrázek ve zbytečně velkém rozlišení, ve starém formátu místo WebP či AVIF, načítaný líně (lazy loading) nebo až z JavaScriptu. Pomáhá správná velikost a fetchpriority="high" na jednom až dvou klíčových obrázcích, viz průvodce LCP.
• Prvky bez rezervovaného místa. Obrázky bez width a height, reklamy, vložená videa nebo dodatečně vložené lišty posouvají obsah a zhoršují CLS, viz průvodce CLS.
• Webové fonty. Pomalý font zdrží text a jeho výměna posune rozložení. Pomáhá WOFF2, omezení znakových sad, vhodný font-display a podobné záložní písmo, viz doporučení k fontům.
• JavaScript třetích stran. Měřicí kódy, chatovací okna, widgety recenzí nebo mapy mohou zpomalit načítání i odezvu. Řeší se odložením (async, defer), líným načtením a hlavně odstraněním nepoužívaného, viz průvodce skripty třetích stran. U měřicích kódů se vyplatí projít, co v Google Tag Manageru a GA4 opravdu potřebujete.
• Dlouhé úlohy v JavaScriptu. Kód, který běží dlouho v kuse, zablokuje odezvu na kliknutí. Pomáhá ho rozdělit a odložit, co nespěchá, viz průvodce INP.
• Pomalý server. Doba do prvního bajtu (TTFB) je podle průvodce LCP součástí LCP. Pomáhá mezipaměť, CDN a méně přesměrování, často ale jde o hosting.

Co dostanete

• Stav Core Web Vitals z polních dat, pokud je web má, zvlášť pro mobil a desktop.
• Nálezy ke každé metrice: příčina, dotčené stránky a postup opravy.
• Pořadí oprav podle dopadu a u každé, kdo ji může udělat.
• Volitelně implementaci oprav a kontrolní měření.

Na co si dát pozor

• Nehoňte skóre 100. Skóre 100 neznamená splněné Core Web Vitals a nižší skóre neznamená, že skuteční návštěvníci mají problém, protože laboratorní a polní data se liší.
• Vliv na Google nepřeceňujte. Google uvádí, že Core Web Vitals používá při řazení výsledků, ale nejde o jediný signál a dobré výsledky v nástrojích přední pozice nezaručují. Relevantní obsah může být nahoře i s pomalejším webem, viz dokumentace Google.
• Malé weby často polní data nemají. Do CrUX se stránka podle metodiky CrUX dostane, jen když je veřejně dohledatelná a dostatečně navštěvovaná. Přesné minimum Google nezveřejňuje. Pak zbývá laboratorní měření, případně vlastní měření u návštěvníků.
• CrUX nevidí iPhony. Data podle metodiky CrUX sbírá jen Chrome na desktopu a Androidu. Safari ani Chrome na iOS do něj nepřispívají.
• Každý nový skript má cenu. Chat nebo další pixel se přidá snadno, zpomalení se projeví až později.

Kolik audit rychlosti stojí

Ceník uvádí audit webu nebo e-shopu dle zadání a orientační hodinovou sazbu od 500 Kč/hod. Cena závisí na rozsahu a složitosti projektu. Implementace oprav je volitelná.

Cenu zvyšuje víc typů stránek k rozboru, velké množství skriptů třetích stran a implementace oprav. Snižuje ji jasně vymezená část webu, třeba jen detail produktu nebo košík, a přístup do Search Console, ze kterého je hned vidět, kde je problém.

Pokud chcete audit nebo opravy, popište web a co vás trápí přes kontaktní formulář. Odpověď přijde do 24 hodin.

Časté otázky

Co jsou Core Web Vitals?

Tři metriky Googlu pro uživatelský zážitek: LCP (zobrazení hlavního obsahu), INP (odezva na interakci) a CLS (stabilita rozložení). Dobré hodnoty jsou LCP do 2,5 s, INP do 200 ms a CLS do 0,1, a to aspoň u 75 % návštěv.

Jak změřit rychlost webu zdarma?

Zadejte adresu do PageSpeed Insights. Nahoře uvidíte polní data, pokud je web má, níže laboratorní měření Lighthouse. V bezplatné Search Console se podívejte na přehled Core Web Vitals.

Je skóre 0–100 v PageSpeed Insights faktor hodnocení?

Google to tak neuvádí. Skóre počítá Lighthouse z jednoho laboratorního měření, kdežto v dokumentaci k vyhledávání Google mluví o Core Web Vitals jako o metrikách skutečného uživatelského zážitku.

Je součástí auditu i implementace oprav?

Volitelně ano. Audit dodá nálezy s doporučeními, podle kterých může opravy udělat kdokoli. Pokud chcete, webrocks opravy v šabloně, CSS a JavaScriptu i provede.

Dá se zrychlit e-shop na Shoptetu nebo WooCommerce?

Část ano: obrázky, fonty, vlastní CSS a JavaScript a skripty třetích stran se dají ovlivnit na úrovni šablony. U Shoptetu jdou úpravy hlavně přes šablonu, viz úprava Shoptet šablony. U WooCommerce hraje roli i hosting a pluginy, viz úprava WooCommerce. Kolik se dá získat, ukáže až rozbor konkrétního e-shopu.