Skvělé nástroje pro zrychlování stránek

Nástroje nemusí být pouze „těžké“ programy uložené na vašem počítači. Naopak, mohou to být i snadno přístupní pomocníci z webového prohlížeče. A to z celého světa. Právě na ty se v dnešním článku podíváme. Konkrétně na nástroje, které pomohou udělat vaše stránky rychlejší co se týče doby načítání.

Jednoúčelové nástroje

Začněme u těch jednoúčelových. To jsou takové, které plní jediný účel, ale zato to dělají perfektně.

Přijdou vhod v okamžicích, kdy potřebujete rychle zkontrolovat jedinou věc. Například, zda konkrétní stránka podporuje kešování. Jen připomenu, že celý článek budu psát přátelsky vůči začátečníkům. Nemusíte se tedy bát, že nástroje dostatečně nevysvětlím a data z nich pro vás budou nepochopitelná. Zkušenosti zde nerozhodují. Můžete se tak do zlepšování stránek pustit i jako naprostý začátečník.

Jako prvním nástrojem zde chci uvést GIDZipTest, který otestuje zadanou webovou stránku a poví vám, zda podporuje GZIP kompresi. A můžete testovat jakékoli dokumenty, které kompresi podporují. HTML, CSS, TXT, soubory s fonty…

Tento nástroj mám velice oblíbený díky své jednoduchosti a rychlosti. Navíc vám ukáže to, kolik bylo kompresí ušetřeno dat při načítání. Kupříkladu hlavní stránka serveru Interval.cz má 76 kB (HTML dokument), ale díky gzip se vám do prohlížeče stahuje jen 14 kB, což je fantastická 81% úspora dat.

Dalším užitečným nástrojem je Website Speed Test, který testuje dobu načítání vaší stránky z mnoha lokací po celém světě. Tento nástroj oceníte při testování velkých stránek, u kterých využíváte CDN (Content Delivery Network). Vaše stránky se načítají z lokací jako je Francie, USA, Polsko, ale rovněž Afrika či Indie. Získáte tak přehled o době načítání z celého světa a ověříte si, zda vaše CDN řešení splňuje účel. Tedy doručuje vaší stránku dostatečně rychle všude tam, kam je potřeba.

Zahrnuté jsou rovněž celkem dostatečné statistiky ke každé otestované lokaci.

GiftOfSpeed plní podobnou funkci. Dělá to však mnohem „levněji“. Jen zadáte adresu, lokaci pro načítání a to je vše. Nástroj vám následně ukáže počet požadavků, rychlost načtení a celkovou velikost stránky. Nic víc.

Check GZIP compression je na první pohled jen dalším Gzip testerem. Oblíbil jsem si ho však kvůli jedné malé funkci – ukázce době odezvy (Execution time of HTTP request v dolní části výsledků). To je doba, po kterou prohlížeč čeká na soubory od serveru. Než začnou přicházet. Tohle číslo je ohromně důležité při optimalizaci, protože ukazuje rychlost vašeho řešení na straně serveru. Zda používáte statické stránky, které jsou logicky rychlé, protože se na nich nic neděje či složité stránky s databází a milionem PHP souborů, které server připravuje mnohem déle.

A v pokročilých fázích optimalizace toto číslo budete jistě řešit. Vyplatí se proto vědět, kde ho hledat.

Vrhněme se nyní na obrázky. V této oblasti je jistě bezkonkurenční nástroj Kraken.io. Nahrajete do něj obrázky a on vám je během okamžiku optimalizuje. Můžete nahrávat i větší množství, ale pro tento účel si musíte stránku otevřít vícekrát. V bezplatné verzi vám totiž nedovolí nahrát třeba 50 obrázků najednou.

To však nevadí, protože nástroj můžete využívat opakovaně. Jen důrazně doporučuji kliknout na LOSSLESS, což bude vaše obrázky optimalizovat bezztrátově. To znamená, že bude zachována jejich obrazová kvalita, ale i přesto se sníží datová velikost. Pamatujte také, že tento režim musíte zvolit před (!) nahráváním svých obrázků.

A když už jsme u nich, při zrychlování stránek se vám bude pravděpodobně hodit i tento CSS sprite generátor. V jednoduchosti sloučí několik vašich obrázků do jednoho a poskytne vám i kompletní CSS s pozicemi jednotlivých obrázků. Což vám výrazně usnadní práci.

Více o výhodách CSS sprite se rozepisuji ve svém starším článku, takže pro podrobnější informace ohledně této metody zamiřte tam. Zde proto není prostor.

Velkým konkurentem CSS sprite je co se týče optimalizace data URI. Ve zkratce jde o převedení malého obrázku na textové znaky, které pak vložíte do HTML či spíše do CSS s dobře nastaveným kešováním. Díky absenci odkazu na obrázek zcela ušetříte jeden HTTP požadavek a stránky se tak budou vykreslovat rychleji. A když ušetříte takových požadavků třeba 20, bude to na rychlosti načítání již poměrně znát.

Pro převedení obrázků na data URI doporučuji tento zahraniční nástroj.

V tomto článku nesmím opomenou ani mnou velmi používaný CSS Compressor. Ten slouží ke zmenšení vašich CSS souborů. Smaže všechny mezery, poznámky (budete-li chtít) a další zbytečnosti. CSS soubor tak bude menší a načítat se rychleji. Není nic neobvyklého ušetřit i 30 % a to je dobré. Používejte ho!

Mezery jen zdržují prohlížeč od práce (všechny je přeskakuje) a poznámky si nechte u sebe, návštěvníkům jsou k ničemu. Oni si chtějí jen prohlédnout vaši stránku. Tak proč je mají stahovat? Jsou to zbytečná data navíc…

Doporučuji používat nastavení Super Compact a Strip ALL comments pro maximální účinnost. Optimalizace by neměla za žádných okolností měnit fungování pravidel CSS, ale stejně – udělejte si raději zálohu a zmenšený CSS si nejprve otestujte (zda funguje správně).

Jako posledním jednoúčelovým nástrojem bych rád uvedl W3C Link Checker. Asi se koukáte překvapeně, ale vydržte. I nefunkční odkazy mají co dělat se zrychlováním stránek. V některých případech dokáží pěkně zbrzdit celou stránku. Když máte kupříkladu v hlavičce odkaz na nefunkční CSS. Občas vadí i obrázky. Ty se z 80 % načítají až po vykreslení, takže to tak nevadí. Jsou však případy, kdy i nefunkční odkaz na obrázek dokáže pěkně pozlobit. Zvlášť pokud je v kódu hodně nahoře. Prohlížeče totiž před prvním vykreslením chtějí ukázat alespoň něco, takže načtou i 3 až 4 první obrázky v kódu a ostatní si nechají na potom.

Takže pokud chcete rychlé stránky, hlídejte si i nefunkční odkazy. Hlavně ty v samotné hlavičce, CSS souborech a taktéž důležité obrázky (loga, pozadí a ostatní časté prvky).

Více všestranné nástroje

Pojďme se nyní vrhnout na nástroje, které jsou více všestranné a poskytnou nám mnohem více dat.

Tím prvním nemůže být nic jiného než PageSpeed Insights od Google. Ten analyzuje rychlost vašeho webu a jeho nedostatky vám naservíruje ve dvou přehledných záložkách. Hned ta první hodnotí i použitelnost vašeho webu v mobilních zařízení, ale to nyní neřešme.

Ve obou záložkách (Mobilní zařízení a Počítač) najdeme podmínky, které váš web splňuje (ty jsou zeleně) a které ne (ty jsou označeny žlutě a červeně podle závažnosti). U každého bodu máte navíc slovní doporučení, proč by problém měl být odstraněn a odkaz na článek, který záležitost dále rozvádí. Dozvíte se tak například, že díky aktivování Gzip komprese ušetříte 200 kB na vaší konkrétní testované stránce.

Díky číselnému hodnocení se také můžete snadno poměřovat či sledovat zlepšení v průběhu prací na vašem webu. Obecně jsou čísla nad 80 poměrně dobrá. U webů okolo 90 bodů je optimalizace velice dobrá. Jde říci, že jestliže máte cokoliv pod 70, je zde značný prostor pro zlepšení.

Dalším fantastickým pomocníkem je Pingdom Website Speed Test, který toho umí ještě více. Vyžaduje však už nějaké znalosti a není tak přístupný jako PageSpeed Insights. Musíte zkrátka vědět, po kterých číslech koukat.

Po zadání stránky do políčka se spustí velice svižný test, který vám do půl minuty vše zobrazí. Jako první uvidíte klasická čísla: dobu načítání, počet požadavků, velikost stránky a číselné ohodnocení stránky dle PageSpeed Insights.

Až níže objevíte podrobnější a mnohem zajímavější statistiky. Například počet HTTP požadavků a datové velikosti podle typu souborů (HTML, CSS, obrázky…). Snadno si tak uvědomíte, zda to s obrázky nepřeháníte. Budete vědět, jaké typy souborů vašim návštěvníkům během načítání „žerou“ nejvíce dat.

Následně můžete na stránce zapracovat. Zmenšit obrázky, spojit ty menší do jednoho a ušetřit si tak požadavky… velice často se rovněž zjistí, že je na stránce plno scriptů, které vlastně nejsou potřeba.

Ještě níže pak naleznete klasický vodopád se všemi soubory, které se na stránce načítají. Jejich velikost, zda se kešují a na jak dlouho. Já si tento seznam rád proklikávám, protože tak máte dokonalý přehled o tom, co všechno se pro konkrétní stránku stahuje.

Posledním nástrojem, který zde zmíním je WebPageTest. Na první pohled působí zastarale, ale nenechte se zmást. Určitě nepatří do starého železa.

Hned před spuštěním testu nabízí bohaté možnosti nastavení přes položku Advanced Settings. Můžete si na testované stránce vypnout JavaScript či požádat o nahrávku obrazového záznamu načítání vaší stránky.

Vyhodnocení testu je rovněž velice rychlé a po skončení nabízí pro začátečníka až nepřehledně mnoho možností. Zmínit určitě musím onu nahrávku a filmový pás (Filmstrip View), který zobrazuje klasický vodopád načítaných souborů, ale spojuje je s obrázky, které zaznamenávají postup vykreslování stránky. Můžete tak zjistit, v jakém bodě se vaše stránka začne vykreslovat a co je v onen moment již načteno. Tuto funkci mám velice rád a je cenná při pokročilejších optimalizacích a vůbec pro pochopení, kdy prohlížeč uznává, že je stránka připravena k prvnímu vykreslení.

Slovo závěrem…

Doufám, že se vám dnešní článek líbil. Dejte o něm vědět i ostatním. A jestliže pro vás nebyl ani jeden nástroj něčím novým, pak vězte – Opakování je matkou moudrosti.