18.9. 2013

Zajímavé nástroje II: rychlost načítání stránek

Zajímavé nástroje II: rychlost načítání stránek

Vítejte u dalšího dílu našeho seriálu o zajímavých nástrojích. Dnešek bude na téma zrychlování stránek. Představíme si tu plno nástrojů pro analýzu, ale i pro samotnou práci při urychlování webu. A já pevně věřím, že vám tento seznam nástrojů pomůže při práci a minimálně vás k ní inspiruje.

A proč zrovna téma zrychlování stránek?

Jeden z důvodu je, že rychlé stránky jsou prostě sexy. A ten druhý důvod by mohl být ten, že rychlost stránek nikdo moc na české scéně neřeší a to mi přijde škoda. Svižné stránky jsou totiž (překvapivě) pro uživatele mnohem lepší než ty pomalé. Zároveň rychlost vnímají a líbí se jim, když se stránky načítají velmi rychle. Takže se zkrátka vyplatí investovat čas do urychlování svých stránek.

Nehledě na to, že Google na rychlost načítání stránek hledí také. A těm dobře optimalizovaným stránkám dává malé bodíky navíc. Ano, je to jen jeden parametr z nějakých dvěstěpadesáti, ale každý bod k dobru se hodí...

Vezměme to pěkně od samotného počátku

A není rozumnějšího řešení, než začít analýzou. V této části článku vám tedy představím pár užitečných nástrojů, které vám v této práci moc dobře poslouží. Pojďme na to.

Website Speed Test od Pingdom je první nástroj, který vám tu chci prezentovat. Je poměrně slavný a dokáže vám ukázat počet požadavků, dobu potřebnou pro kompletní načtení, datovou velikost stránky a další užitečné věci. Hlavní výhodou je vypsání všech souborů, které se na stránce načítají. Můžete se tak snadno podívat, co vaše stránky brzdí, jak jsou soubory objemné a tak vůbec. Perfektně jsou pak v třetí záložce u výsledků vypracované statistiky, které uspokojí naprosto každého.

Podobnou službou je pak GTmetrix. Ten vám po vypracování zprávy ukáže hezky vypadající hodnocení v procentech a místa, která by šla z pohledu výkonu vylepšit. Nejzajímavější mi ovšem přijde ukázka průběhu načítání vaší stránky. Snadno tak zjistíte, co se načítá příliš dlouho a kde třeba musel prohlížeč čekat kvůli stahování jiného prvku. Už jen kvůli tomu se tento nástroj opravdu hodí používat...

PageSpeed Insights je nástroj z dílny samotného Googlu a je velmi pěkně zpracovaný (i když dříve byl přehlednější). Jeho největší výhodou je rychlé ukázání slabých míst analyzované stránky. Po rozkliknutí konkrétního problému ovšem nedostanete jen tupou hlášku o nějakém nedostatku na vašich stránkách, ale Google vám rovnou nabídne odkaz na jeho článek. V něm pak najdete vše potřebné. Prostě nádhera.

Comparison Test je pak vhodný nástroj pro všechny nedůvěřivce, kteří žijí v domění, že jejich stránky jsou naprosto perfektní a žádnou optimalizaci nepotřebují. Tento nástroj vám totiž po pár minutách čekání vyplivne jednoduché srovnání vaší současné stránky a stránky naplno optimalizované. Uvidíte tak potenciál, který optimalizace stránek ve vašem případě má. Někde je rozdíl velký, někdy malý, ale pro přibližnou představu to bohatě stačí. Navíc tento nástroj nemá žádnou konkurenci...

A po dlouhém analyzování je třeba jednat

A na takovou práci se už hodí zcela jiné nástroje. Je jich opravdu plno a proto se budu snažit být maximálně stručný. Každopádně pokud vás tu něco zaujme, stačí se ozvat a já to v samotném článku rozvedu do větší hloubky. Teď už ovšem pojďme na samotný přehled nástrojů.

Tím prvním je CSS Compressor. Jak už z názvu asi tušíte, pomůže vám stlačit velikost CSS souborů na minimum. Jednoduše to funguje tak, že vymaže zbytečné řádky a mezery. Zní to tupě, ale je to velmi užitečné, protože ušetříte datovou velikost. Většinou tak 20 až 30 %. Někdo to nemá moc rád, protože takový kód je nepřehledný, ale já to doporučuji používat všude. Stejně ten kód zas tak často neupravujete...

Případně si můžete nechat komprimaci souborů dělat přímo na serveru, pomocí PHP. Tak návštěvníci dostanou datově menší verzi a vy u sebe budete mít stále ten nezmenšený originál. Na něco takového pak na internetu najdete plno návodů.

GIDZipTest je pak prostý gzip tester. Do políčka prostě vložíte adresu na soubor a nástroj vám následně ukáže, zda je soubor zabalen. Tedy jestli vám funguje gzip komprese. Taky ukáže HTTP hlavičku, procentní úsporu díky gzip a to už je vše. Je to jednoduchý nástroj, ale je opravdu užitečný. Sám ho velmi často používám.

Dalším zajímavým nástrojem by mohl být CSS sprite generátor. Ten vám sám složí několik vašich obrázků do jednoho a k tomu vám vygeneruje i příslušné CSS. Takže nemusíte nic spojovat manuálně a už vůbec řešit správné pozice jednotlivých obrázků v tom velkém. Já sám moc CSS sprite nepoužívám, ale pokud tuto metodu chcete užívat, ušetří vám tento nástroj nějaký ten čas...

Dobrou alternativou k CSS sprite jsou data URI. To jsou takové ty dlouhé řádky znaků, které si prohlížeč zpracuje a zobrazí je jako obrázek. A k převedení obrázku na takové znaky samozřejmě potřebujete nějaký nástroj. A já doporučuji tento. Funguje spolehlivě a je jednoduchý. Prostě necháte zaškrtnuto to, co je, vyberete ze svého počítače obrázek, který chcete převést a kliknete na tlačítko s nápisem "Generate Data URI". Výsledný text si pak zkopírujete, vložíte místo URL adresy obrázku a je hotovo.

Nyní se pojďme vrhnout na téma obrázky. Ty musí být na webu optimalizované a k tomu je naprosto perfektní nástroj Kraken.io. Můžete si vybrat, zda chcete obrázky optimalizovat bezeztrátově (okem nerozeznatelné od originálu) či vám naopak nějaké to snížení kvality nevadí. Pak už jen stačí soubor nahrát a nástroj se o vše postará. Téměr okamžitě vám pak ukáže, kolik ušetřil a nabídne vám odkaz ke stažení.

Sluší se zde zmínit i nástroj Smush.it z dílny firmy Yahoo!. Prakticky nabízí totéž, ale optimalizuje o maličký drobet hůře. Já sám ho nepoužívám, protože se nástroj občas načítá až podezřele dlouho. Jako by tak velký gigant neměl na pořádný server. Přesto všechno se ovšem jedná o dobrou alternativu ke Kraken.io.

A posledním nástrojem je TinyPNG. Ten se specializuje výhradně na optimalizaci PNG obrázků a dokáže stlačit datovou velikost velmi dobře, ale je důležité zmínit, že provádí ztrátovou kompresi. To znamená, že snižuje výslednou kvalitu obrázků. Proto tento nástroj nedoporučuji (!) používat pro obrázky, které chcete mít i po optimalizaci kvalitní. Spíše bych ho používal čistě jen pro optimalizaci webových prvků. Tím myslím malé ikonky, různé zkrášlovací prvky na stránce a další nedůležité věci.

A proč jsou některé odkazy na nástroje tučně?

Je to z jednoduchého důvodu. Dlouhou dobu jsem totiž přemýšlel, jak vyznačit nástroje, které jsou opravdu velmi důležité. A zkrátka nevím o lepším řešení, než je tento. Zároveň bych se touto informací pro dnešek rozloučil. Já doufám, že se vám i tento článek líbil jako ten předchozí a budu se na vás opět těšit u dalšího dílu...

Autor: Tomáš Erlich