Rychlost načítání webu má vliv na hodnocení od Googlu. Ovlivňuje bodování a tím pádem i pozici ve vyhledávačích. Jak rychle se web načítá, to si můžeme snadno ověřit například v aplikaci PagesSpeed. Zadáme URL webové stránky a dáme ji analyzovat. Jako odstrašující případ jsme vybrali doménu jednoho nejmenovaného webu. Výsledek analýzy rychlosti zobrazení webové stránky se objeví za několik sekund. Vlevo nahoře si můžete vybrat, jestli chcete zobrazit hodnocení pro mobilní zařízení nebo počítač. Vzhledem k tomu, že většina uživatelů se připojuje přes mobilní zařízení, vybrali jsme si ho i pro náš příklad. Mobilní zařízení nevyužívá mezipaměť prohlížeče.
Obr. č. 1 Základní bodování webu a laboratorní data
1.
Tento web obdržel pouze 2 body ze 100 možných. Opravdu katastrofální hodnocení!
0–49 bodů označují červeně
To je velmi špatné. Bude potřeba na optimalizaci webu hodně zapracovat.
50–89 bodů je označeno žlutě
To znamená, že něco není v pořádku a je nutné to vylepšit, aby se hodnocení zvýšilo na maximum.
90–100 bodů dostává zelenou
Tohle hodnocení značí výborný výsledek. Můžeme být s nastavením webu spokojení a není třeba provádět změny.
2.
Rychlost vzorového webu se ocitla v červené a to rozhodně není nic dobrého.
První vykreslení obsahu webu – First Contentful Paint (FCP) se objevilo až za neuvěřitelných 10,5 s. Tak dlouho by přece žádný uživatel internetu nevydržel čekat, než se mu zobrazí alespoň základní obrysy stránky.
Index rychlosti – Speed Index (SI) udává dobu do vykreslení celého viewportu. Viewport je definovaný výřez zobrazení používaný u responzivních webů.
Dobu do interaktivity označujeme jako Time to Interactive (TTI). Uplynulý čas ukazuje, do kdy stránka musí komunikovat se serverem.
První smysluplné vykreslení – First Meaningful Paint (FMP) se objevilo až za 10,8 s. To znamená, že než se mu zobrazilo z načítané stránky konečně něco zajímavého, pravděpodobně usnul nebo už dávno načítá konkurenční web.
První nečinnost procesoru – First CPU Idle (FCI) nastala až po 10,8 s. Potom teprve si mohl procesor dát pohov a konečně došlo k úplnému načtení stránky.
Maximální potenciální prodleva prvního vstupu
Nazýváme to First Input Delay (FID) a znamená, za jak dlouho od prvního kliku stránka zareaguje. V našem případě to bylo 370 ms.
Obr. č. 2 Co způsobuje, že se web tak dlouho načítá?
Time To First Byte (TTFB) je metrika, která hlídá dobu odpovědi serveru na dotaz prohlížeče při načítání webové stránky. Vykreslení stránky nazýváme jako renderování. Většina prohlížečů podporuje přednačítání prvků ve formě tagů v hlavičce HTML. Může se přednačíst i následující předpokládaná stránka, kterou by mohl uživatel chtít navštívit.
Konkrétní příklady:
<link rel="prerender" href="/domena.cz">
<link rel="prefetch" href="//obrazek.png">
<link rel="preload" href="//skript.js" as="script">
Prázdná políčka v obrázku znamenají, jak rychle se webová stránka zobrazila v porovnání s jinými stránkami. V tomhle případě vidíme obrázek stránky až v úplně posledním políčku.
Další hodnoty vysvětlují konkrétní problémy. V levém sloupci vidíme příležitosti, které se mohou využít pro zlepšení výkonu stránky, a v pravém sloupci spatříme odhadovanou časovou úsporu.
Rozebereme si ty nejpodstatnější:
Nepoužívejte několik přesměrování stránky
Při přesměrování stránky dáváme prohlížeči příkaz, aby při otevírání stránky A otevřel stránku B. Nejlepší je vyhnout se přesměrování stránek úplně. Každé přesměrování totiž snižuje bodování a může způsobit propad pozice ve vyhledávači.
Eliminujte zdroje, které blokují vykreslení
Příliš velká datová velikost obrázků, videa a dalších souborů, které je potřeba v pozadí stránky otevřít, aby se zobrazily, načítání rozhodně zdržuje. Už při vkládání obsahu na web by měl autor dbát na to, aby rychlost načítání byla co možná nejmenší. K tomu se využívá optimalizace webdesignu a optimalizace obrázků, kterou by měli provádět zkušení grafici.
O správných formátech obrázků se více dočtete v našem článku: Správné velikosti obrázků na web.
Odstraňte nepoužívané styly CSS
V HTML kódu občas zůstanou už nepoužívané styly CSS, které zbytečně zdržují renderování stránky. Než zdlouhavý kód vyhledávač rozluští, čas utíká jako voda. Odstraněním zbytečných CSS dosáhneme kratší odezvy serveru, tím pádem můžeme pozitivně ovlivnit rychlost webu.
Zobrazujte obrázky ve formátech nové generace
Doporučujeme vyhnout se především formátu GIF, protože má nekvalitní barvy, nízkou kvalitu a jsou opravdu hodně velké. Místo PNG raději používáme JPG. Komprese obrázků do přiměřené velikosti i formátu je vhodná a žádaná. Nahrávejte na web obrázky rovnou v požadované velikosti, která se má návštěvníkům zobrazovat. Nedoporučujeme zmenšovat obrázky pomocí HTML nebo CSS.
O nových formátech obrázků píšeme v článku: Nové formáty obrázků.
Minifikujte JavaScript (JS)
Na rychlost načítání má vliv počet odeslaných dotazů na server, proto je potřeba co nejvíce zkrátit a zjednodušit také JS. Využívá se sjednocení, pokud možno, všech zdrojových JavaScriptových souborů, které jsme si sami napsali do jednoho. Minifikací JS můžeme v některých případech výrazně snížit počet dotazů na server.
Obr. č. 3 Další informace o výkonu
Minimalizujte práci v hlavním procesoru
Hlavní vytížení CPU způsobuje zpracování JS souborů a následné vykreslení „pohyblivých prvků“, např. sliderů. Jakmile má někdo na hlavní stránce obrovský slider s velkým množstvím obrázků, k tomu videa z YouTube a ještě nějaký efekt pro animaci, zaměstná CPU až na 30 s, než to všechno načte a zvládne vykreslit. Není tedy dobré to přehánět s množstvím takovýchto souborů. Minimalizace práce v hlavním procesoru by se potom měla projevit na výsledné rychlosti načítání webu.
Zajistěte, aby text při načítání webfontů zůstal viditelný
Ve funkci font-display stylů CSS je do definice písma potřeba doplnit přístup k vykreslení. Chceme docílit toho, aby se text při načítání webfontů zobrazoval uživatelům. Potřebujeme dostat font-display do fontů z Googlu. Více o tom pojednává článek: Controlling Font Performance with font-display.
Příklad:
@font-face {font-display: fallback; ... }
Doporučený plugin PostCSS se vkládá do všech definic @font-face ve font-display.
Statické podklady zobrazujte s efektivními zásadami pro preload
Kešování souborů znamená, že stránka se jakoby „vyfotí“. Celá statická stránka se potom uloží do mezipaměti, tzv. cache (keše). Při dalším stahování stránky prohlížeč načítá data už z mezipaměti. Kešování výrazně zrychluje načítání webové stránky.
Nepoužívejte příliš velký DOM (Document Object Model)
Objektový model DOM definuje hierarchii struktury, obsahu a stylu dokumentu, které prohlížeč podporuje. W3C DOM jsou rozděleny do několika úrovní, tzv. DOM levelů. Každý level má za úkol specifikovat jinou oblast (Level 1 – navigace dokumentu a manipulace s obsahem, Level 2 – podpora jmenných prostorů, Level 3 – mechanismus načítání a ukládání XML schémat). I tady platí, že čím jednodušší variantu DOMu zvolíme, tím kratší bude doba načítání.
Předejděte přenášení enormního množství dat
Jak už bylo zmíněno výše, mezi nejdůležitější úkoly spojené se zrychlením webu patří snížení všech stahovaných dat, která jsou potřeba k úplnému zobrazení webové stránky. Shrneme si to.
Načítání stránek závisí také na rychlosti hostingového serveru a rychlosti návštěvníkova zařízení i na kvalitě připojení k internetu. Na rychlost webu má tedy vliv mnoho faktorů. Zaměřit bychom se měli ideálně na všechny jeden po druhém. Optimalizovat velikost grafických souborů a datovou velikost obrázků, správně naprogramovat CSS a JS, upravit délku HTML kódů a aktivovat kompresi (gzip, GNU zip). Komprese může snížit velikost souborů o 50–80 %. Využívat bychom měli i načítání prohlížeče do mezipaměti – cache.
Pochopení přesného nastavování všech těchto komponent vyžaduje alespoň základní programátorské vědomosti. Neodborným zasahováním do HTML kódu a nesprávným nastavením CSS a JS může snadno dojít k vážnému narušení struktury webu, které se potom obtížně napravuje!
Jako snazší a pohodlnější se jeví přenechat tuto problematiku programátorům, kteří se v tom skutečně vyznají. Můžete kontaktovat naše programátory.
Mohlo by vás ještě zajímat:
