21 tipů pro zrychlení načítání stránek

Článek vydán se souhlasem autora ANTstudo.cz.

Rychlost webu má čím dál tím větší vliv na obchodní výsledky, proto se zrychlováním načítání stránek bude muset dříve nebo později zabývat každý, podobně jako optimalizací zobrazení pro mobilní zařízení. Rychlost načtení stránky není důležitá jen jako faktor ovlivňující pozice ve vyhledávačích, ale hlavně pro vnímání uživatelů. Pojďme se podívat rychlosti na zoubek.

Jak uživatel vnímá rychlost načítání stránky?

• Do 100 milisekund bere odezvu jako okamžitou.
• 100 – 300 ms nepostřehnutelné lehké zdržení.
• 0,3 – 1 vteřina postřehnutelná prodleva, ale stále se na web soustředí.
• 1 vteřina a víc – „přepnutí“ myšlenek na něco jiného.

Ideální čas načtení stránky je do 1 vteřiny. To nutně neznamená, že do té doby musí být načtena celá stránka. Stačí zobrazit alespoň část stránky, aby ji mohl alespoň omezeně používat. A poté na pozadí načíst zbytek. Takže pokud se celá stránka načte za cca 3-5 s je to dostačující.

Dopady pomalosti/rychlosti webu v číslech

1. Menší návštěvnost. Dle čísel z Chrome Dev Summit 2015  znamená  1 vteřina prodlevy při načítání o 11 % méně zobrazení stránek a o 16 % menší spokojenost návštěvníků.
2. Díky pomalému načítání máte méně stránek ve výsledcích vyhledávání. Méně stránek, znamená méně návštěv.
3. Větší rychlost načítání snižuje míru okamžitého opuštění stránky a zvyšuje konverzi eshopů.
4. Rychlost webu má již dlouho vliv na pozice ve výsledcích vyhledávání.
5. Rychlost šetří vaše peníze v reklamní síti Google AdWords. Rychlost je totiž jeden z hodnotících faktorů. Proto můžete být se svým inzerátem na vyšší pozici i s nižší cenou za proklik než konkurence.

Další přínosy si můžete přečíst ve výsledcích studie rychlého načítání stránky (angl.).

Jak můžu měřit rychlost?

• Google Analytics – Chování > Rychlost webu
• Page speed Insights
• WebPagetest
• Website speed test od Pingdom
• GTmetrix
• Doplněk do prohlížeče YSlow

a další. Většina testovacích nástrojů nejen změří rychlost načítání stránky, ale i poradí co zlepšovat.

 Chci pomoc se zrychlením webu

Pojďme se podívat na praktické možnosti zlepšení rychlosti načítání stránek.

5 tipů pro optimalizaci obrázků

Nejlepší optimalizace obrázků je se jim úplně vyhnout, ale to v praxi moc nejde. Když už obrázky použijete, zkuste se řídit následujícím radami.

1. Formát: Zvolte správný formát obrázku (SVG, JPG, PNG) a přiměřenou kompresi.
2. Rozměry: V dnešní mobilní době je důležité doručit správnou velikost obrázku (šířka x výška v px) pro správné zařízení. Použití jediného velkého obrázku pro všechny typy zařízení není příliš vhodné. Jako universální řešení dnes doporučujeme použití tzv. srcset & sizes.
3. Malé obrázky: Využijte místo malých obrázku (typicky ikon) fonty nebo slučte malé obrázky do jednoho většího. Další možností je vložit obrázek přímo do HTML stránky pomocí tzv. dataUri. Vložení přímo do stránky je vhodné jen pro měnící se obrázky, které jsou uživatelsky závislé, např. pro poslední navštívené produkty apod.
4. Načítání: Použijte Lazy loading tzv. „líné načítání", pro obrázky, které nejsou důležité nebo nejsou vidět ve viditelné části stránky.
5. Atributy obrázku height a width: Vložte do HTML kódu ke každému obrázku atributy height=“yy“ width=“xx“. Prohlížeč pak bude stránku vykreslovat rychleji.

Minimalizace a minifikace

Obecně každá stránka, kterou si zobrazíte, se skládá z mnoha různých zdrojů. HTML kód stránky, CSS stylové soubory, JS knihovny a již zmíněné obrázky. Načtení každého takového zdroje znamená jeden HTTP požadavek a ten stojí čas. A proto:

1. Minimalizujte počet CSS souborů nejlépe na jeden nebo maximálně dva CSS soubory.
2. Minimalizujte počet JS souborů  nejlépe jen na jeden.
3. Ne vždy to jde, ale snažte se minimalizovat i počet obrázku.

Minifikací CSS, JS a HTML kódu můžete snížit objem přenášených dat řádově až o desítky procent. Tím se potřebné soubory mohou přenášet za kratší čas.

Naší snahou je, aby minifikace a minimalizace probíhala automaticky. Využíváme nástroj Gulp.

Odezva serveru

Odezva serveru je čas mezi požadavkem prohlížeče na zobrazení stránky a přijetím prvních dat prohlížečem. Tento čas se označuje zkratkou TTFB (z angl. Time To First Byte). Čím kratší je tento čas, tím lépe. Například dle Google PageSpeed insights doporučení je optimální odezva do 200 ms.

Jak dosáhnout odezvy do 200 ms?

1. Rychlost odezvy serveru se dá ovlivnit již samotným způsobem přípravy stránky na straně serveru. Začněte posílat data stránky co nejdříve. Nečekejte na to, až se připraví obsah pod viditelnou částí stránky.
2. Optimalizujte načítání neměnících se zdrojů použitím cache. Může pomoci i samotný upgrade verze PHP. Ptejte se také programátorů, zda sledují úzká hrdla aplikace.
3. Požádejte správce hostingu/serveru nebo si nastavte kompresi na všechny přenášené typy souborů.
4. Nastavte časy platnosti načítaných zdrojů tak, aby se zbytečně nenačítaly opakovaně, pokud to není třeba. Cílem je maximálně správně využít možností lokální cache prohlížeče.
5. Minimalizujte počet přesměrování.
6. Optimalizujte načítání statických zdrojů stránky (obrázky, CSS apod.) tak, aby se společně s nimi automaticky nezasílaly cookies.
7. Použijte správné technologie a hardware. Např. nový http/2 protokol, Google PageSpeed modul, rychlé SSD apod.

Kritické CSS

Složité stránky mohou mít velmi rozsáhlé CSS soubory čítající i tisíce řádek kódu. Aby prohlížeč vůbec mohl začít vykreslovat HTML stránku, musí celý CSS soubor stáhnout a analyzovat. Pro prvotní načtení stránky potřebujeme jen malý zlomek CSS stylů, tzv. „kritické CSS styly“. Doporučení tedy zní:

1. Rozdělte CSS styly na kritické a nekritické. Ideálně automatizovaně.
2. Nekritické CSS styly načítejte neblokujícím způsobem.
3. Pokuste se zajistit při prvním načtení stránky vložení kritických CSS stylů přímo do kódu HTML stánky a na pozadí nechte načíst soubor se stejnými styly. Při dalších zobrazeních styly do HTML kódu již nevkládejte, ale nechte pracovat cache prohlížeče.

Další nekritické zdroje

1. Načítejte méně důležité části stránky jako jsou tlačítka sociálních sítí, velké obrázky na pozadí, ale i fonty a externí knihovny neblokujícím způsobem.
2. Dodržujte obecné pravidlo, a umísťujte neblokující zdroje v HTML stránce těsně před značkou < /body >. Lze také použít služeb specializovaných malých JS knihoven pro asynchronní načítání.
3. Načítejte fonty dle článku Efektivní načítání webfontů.

Závěrem

Doporučujeme nepodceňovat rychlost načítání stránek. Cílem optimalizace načítání stránky by mělo být zobrazit ji v co nejkratším čase. Rychlost je dnes důležitá nejen z pohledu uživatele, ale i z pohledu vyhledávačů a Google AdWords.

Zkontrolujte si rychlost webu v některém z uvedených testovacích nástrojů. Opravte nebo si nechte opravit ty nejzávažnější hlášení. Aplikujte základní uvedená pravidla a doporučení. Při optimalizaci rychlosti načítání stránky vždy zvažte náklady versus přínos optimalizace. 

Téma rychlosti je dnes velice populární a podle nás díky „mobilnímu světu“ stále bude. Proto se v budoucnosti můžeme těšit na další nové technologie či vylepšení prohlížečů, které budou sami o sobě načítání stránek zrychlovat.

U nás děláme rychlé weby. Chcete také rychlý web nebo e-shop? Neváhejte nás kontaktovat nebo se podívejte na nabídku zrychlení webových stránek.