Kontrola výkonu stránky SEOtest.online ukazuje, že za pomalým načítáním nestojí vždy špatný hosting nebo velké obrázky. Příčiny bývají rozptýlené napříč technickou vrstvou webu a mnohé z nich nejsou na první pohled vidět. Přitom každá sekunda zpoždění při načítání prokazatelně snižuje počet uživatelů, kteří na stránce zůstanou. Pojďme se podívat na nejčastější technické příčiny pomalého webu a vysvětlit si, jak je odhalit bez přístupu ke kódu a bez vývojáře.
Proč rychlost webu není jen technická metrika
Rychlost načítání stránky ovlivňuje tři věci najednou: uživatelský zážitek, míru okamžitého opuštění a pozice ve výsledcích vyhledávání. Google zahrnuje výkonnostní metriky Core Web Vitals do hodnocení kvality stránek od roku 2021, takže pomalý web platí jednak odradí návštěvníky, jednak ztrácí body v organickém vyhledávání.
Problém je, že výkon webu se nezhoršuje najednou a viditelně. Zpomaluje se postupně s každým přidaným pluginem, každou novou reklamní sítí a každým obrázkem nahraným bez optimalizace. Než si toho majitel webu všimne, stránka se načítá o dvě tři sekundy déle než před rokem.
Render-blocking zdroje: brzda skrytá v hlavičce stránky
Jednou z nejčastějších příčin pomalého načítání jsou render-blocking zdroje. Jde o soubory CSS a JavaScript, které prohlížeč načítá dříve, než začne vykreslovat viditelný obsah stránky. Prohlížeč narazí na odkaz na externí skript nebo stylesheet, zastaví vykreslování, stáhne soubor, zpracuje ho a teprve pak pokračuje dál.
Výsledkem je, že server web odeslal rychle, ovšem uživatel čeká se zírajícím se prázdnou obrazovkou, protože prohlížeč teprve dokončuje zpracování desítek souborů. Řešením je načítání skriptů s atributy async nebo defer, případně přesun nekritických stylů mimo hlavní cestu vykreslování.
Kolik render-blocking zdrojů je příliš mnoho
Jeden dva soubory blokující vykreslování jsou běžné a v praxi zanedbatelné. Weby na WordPressu s desítkami pluginů ale nezřídka generují patnáct dvacet takových souborů najednou. V tu chvíli se zpoždění počítá v sekundách.
Velikost DOM a proč na ní záleží
DOM (Document Object Model) je stromová struktura, která reprezentuje všechny elementy na stránce. Čím více elementů stránka obsahuje, tím více práce má prohlížeč s jejím vykreslením a tím více operační paměti spotřebuje. Google doporučuje nepřekročit přibližně 1 400 uzlů DOM, přičemž maximální hloubka stromu by neměla přesáhnout 32 úrovní.
Weby se složitými šablonami, vizuálními page buildery nebo stránky e-shopů s mnoha produktovými variantami tento limit překračují běžně. Nadměrný DOM pak zpomaluje nejen první načtení, ale i veškeré interakce uživatele se stránkou.
Inline CSS a JavaScript, kdy pomáhají a kdy škodí
Malé množství inline CSS přímo v HTML dokumentu urychluje první vykreslení stránky, protože prohlížeč nemusí čekat na stažení externího souboru. Tuto techniku záměrně využívají vývojáři pro tzv. kritické CSS, tedy styly potřebné pro vykreslení části stránky viditelné bez scrollování.
Problém nastává, když inline kód roste nekontrolovaně. Page buildery a šablony WordPress stránek generují inline styly pro každý blok zvlášť. Výsledkem je HTML dokument nafouklý o stovky kilobajtů CSS, který se nedá cachovat a prohlížeč ho musí zpracovat znovu při každém načtení stránky.
Obrázky, nejviditelnější výkonnostní problém
Obrázky tvoří na průměrném webu největší část přenášených dat. Přesto se na ně při optimalizaci výkonu zapomíná nejčastěji. Tři věci rozhodují o tom, zda obrázky web brzdí, nebo ne.
- Za prvé formát. JPEG a PNG jsou formáty z počátku tisíciletí. WebP nabízí při srovnatelné kvalitě o třicet až čtyřicet procent menší velikost souboru, novější AVIF ještě více. Přesto velká část webů posílá návštěvníkům stále původní formáty, protože nikdo při nahrávání obrázků na konverzi nemyslel.
- Za druhé lazy loading. Obrázky níže na stránce, které uživatel možná nikdy neuvidí, není důvod načítat hned při otevření stránky. Atribut loading=“lazy“ říká prohlížeči, aby obrázek načetl až ve chvíli, kdy se uživatel blíží k místu, kde se nachází. Bez tohoto atributu prohlížeč stáhne všechny obrázky najednou bez ohledu na to, kam uživatel scrolluje.
- Za třetí velikost souboru. Obrázek nahraný v rozlišení 4 000 × 3 000 pixelů zobrazený v šířce 400 pixelů je zbytečná zátěž. Správná optimalizace znamená nahrát obrázek v rozměrech, ve kterých se skutečně zobrazuje.
Jak výkonnostní problémy odhalit bez přístupu ke kódu
Pro první orientaci není nutné otevírat vývojářské nástroje prohlížeče ani číst zdrojový kód. Kontrola výkonu stránky SEOtest.online automaticky zkontroluje velikost DOM, přítomnost render-blocking zdrojů, inline CSS a JavaScript, lazy loading obrázků a podporu moderních obrazových formátů. Výsledek dostanete bez registrace a bez technického zázemí, takže se hodí jako první krok před tím, než zadáte opravu vývojáři.
Výkon se nezlepší sám od sebe
Technické výkonnostní problémy mají jednu nepříjemnou vlastnost. Bez aktivní péče se nikdy nezlepšují, pouze zhoršují. Každý nový plugin, každá nová reklamní síť a každý nový obrázek bez optimalizace přidává webu zátěž. Web, který před třemi lety skóroval v PageSpeed výborně, dnes může být výrazně pomalejší, aniž by se na něm cokoliv vědomě měnilo. Pravidelná kontrola výkonu musí být tudíž součást běžné údržby, ne jen jednorázový úkon po spuštění.
