Proč mne baví zrychlovat načítání stránek

Středa, 9. Leden 2013

Trošku netradiční článek, v kterém se zamyslím nad zrychlováním stránek. Zkusím tu popsat proč mě to baví a proč si myslím, že má něco takového smysl. Uvedu i pár, snad zajímavých čísel.

Nač nechat lidi čekat, když to není nutné?

Dalo by se říct, že tato věta je stěžejní v mém uvažování. Proč zkrátka nechat návštěvníky čekat, když stačí trochu snahy a stránky můžete mít rychlejší klidně o polovinu. Já jsem tento weblog podle měření zrychlil o 40 %. Slušný výsledek, ne? Skutečně není problém mít stránky rychlé jako blesk.

Navíc s rozmachem mobilního internetu, který běží většinou na 3G a dalších „pomalých“ sítích to jen zesiluje. Jsou i dokonce studie, které dokazují, že lidé toho (kupodivu) na rychlém webu stihnou více a tím tržby stoupají. I zde mám z dotazníku velmi dobré ohlasy, co se týče rychlosti této stránky.

Rychlý web má lepší pozice ve vyhledávačích

Tohle je něco, co bych tu chtěl uvést na správnou míru. Google před lety uvedl zprávu, že rychlost načítání stránek bude mít vlil na řazení ve výsledcích. Hned se objevilo plno článků a webů, které na tom chtěly těžit. Jenže to, že zlepšíte rychlost načítání stránky vám nezaručí dobré pozice. Je to něco, co by se mělo dělat pro návštěvníky, aby jim prohlížení webu bylo příjemnějším prožitkem. Stejně jako dobrý obsah či cokoliv jiného.

Neříkám, že snížení času potřebného pro načtení určité stránky nemá vliv na vyhledávaní. Jenže, když vezmu v potaz, že Google má takových pravidel třeba 230… dosáhnete zlepšení možná tak půl procenta, což není nic.

Jak začít, když chci zrychlit své stránky?

Rychlost načítání webové stránky je vždy určena tou nejpomalejší částí.

V prvním kroku bude nejlepší si o tématu něco přečíst. Zjistit požadavky (zda server podporuje potřebné moduly) a ujasnit si svá očekávání. Mé doporučené postupy jsou využívat gzip kompresi kde to jen jde, u neměnných souborů aktivovat kešování a až potom se zaměřit na obrázky a problémová místa. Jestli chcete optimalizovat obrázky ihned, pak určitě vyzkoušejte polský nástroj Kraken.

Posléze přichází na řadu hromada doporučení. K takovým patří třeba odebrání řetězce dotazu z CSS a JS, správné uspořádání souborů v kódu, zadávání rozměrů u obrázků a třeba asynchronní načítání skriptů, které stránka nepotřebuje k vykreslování. Takových článků typu „10 doporučení, jak udělat stránky rychlejší“ najdete na internetu tuny…

Nejčastěji opomíjené praktiky pro urychlení webu

Už dlouho jsem si chtěl udělat takový průzkum rychlosti stránek v praxi. Například kolik mých oblíbených stránek používá kompresi a tak podobně. A na to se v téhle části článku podíváme. Vzal jsem svých 30 nejčastěji navštěvovaných stránek a hodil jsem je do nejrůznějších online nástrojů, abych zjistil, jak si stojí. Níže si můžete prohlédnout, jak to dopadlo.

Podpora gzip a kešování na stránkách

Četnost využívání gzip a kešování na stránkách mě prvně zklamala, ale je třeba brát v potaz, že ne každý své stránce v tomto ohledu věnuje pozornost. V podstatě mě to utvrdilo v tom, že nemá smysl vymýšlet pokročilé postupy, jak urychlit nějaké stránky, když většina webmasterů nevyužívá ani gzip.

Graf o kolik by šlo zrychlit stránky

Ukázalo se, že webové stránky nejsou v oblasti optimalizace obrázků tak pozadu a většina by šla optimalizovat „jen“ o několik desítek procent. Druhý graf už jen ukázal to, co se dalo čekat. Průměrné stránky by nebylo problém zrychlit i o 40 a více procent. Něco takového by bylo sakra znát, ale číslům se nedivím. Pro úplnost, k testování jsem použil tento srovnávací test.

Datový objem stránek

Z posledního grafu je pak patrné, že datový objem je u více jak poloviny testovaných stránek mezi 200 a 800 kB. Což je v dnešní době cirka jedna vteřina stahování. To beru dost pozitivně a jsem s tím velmi spokojený.

Zajímavé nástroje pro komfortnější práci

Pokud se už rozhodnete na stránkách něco měnit, určitě těmito nástroji nebudete opovrhovat. Na internetu je podobných sice celá řada, ale snažil jsem se vyzdvihnout jen ty nejlepší.

  • GIDZipTest je příjemný nástroj na rychlé otestování, zda stránka využívá gzip a kešování pomocí čtení z HTTP hlavičky.
  • CSS Compressor vám pomůže snížit velikost CSS souborů smazáním mezer. Pro znovu čitelný kód můžete použít například PSPad.
  • Smush.it je šikovný nástroj pro bezztrátovou kompresi obrázků. Velice s ním doporučuji optimalizovat veškeré webové obrázky.
  • Pingdom Tools zobrazí pomocí sloupcového grafu analyzované stránky a seskupí o nich vše důležité do pár tabulek.

Jestli používáte i jiné nástroje, zkuste mi o tom dát vědět. Myslím ovšem, že tyto pro většinu prací budou stačit. Alespoň pro začátek.

A jaký byl záměr tohohle článku?

Chtěl jsem ukázat, že řešit rychlost stránek má i v dnešní době smysl, že to nemusí být vůbec těžké a jde bez obtíží dosáhnout znatelného zrychlení. Často lidi trápí, že jim jejich web přijde zoufale pomalý a neví, jak stránky zrychlit. Nebo netuší jaká část stránky vykreslování brzdí. Pokud tedy chcete s něčím podobným poradit, klidně napište do komentářů.

Doufám, že vám článek v něčem pomohl a přinejmenším ho budete brát jako takový zajímavý průzkum, jak si v současné době stojí stránky v oblasti zrychlování a kde mají ještě prostor na zlepšení.

Nabízíme vám širokou škálu zdravotnických potřeb.
V sortimentu www.dentimedshop.cz máme například inkontinenční pomůcky, zdravotní kompresní punčochy nebo ortézy. Pomůžeme vám s výběrem.

{ Komentáře k článku }

Zbyněk Moravec

Pěkný článek.

Osobně používám lepší CSS kompresi, která např. nahradí některé zápisy úspornějšími apod. avšak komprese se provádí „automaticky“ po změně, takže mi to nesahá na můj kód.

Osobně také komprimuji (odstraňuju whitespaces, komentáře) šablon při jejich kompilaci. Neušetří to moc, ale proč to nepoužít…

Tomáš Erlich

Díky. Přesně tak, každá troška je znát a jen díky tomu můžeš udělat opravdu rychlé stránky. Jinak… o jakou „lepší“ kompresi jde? Já znám kompresi jen pomocí gzip.

Zbyněk Moravec

No hledal jsem spoustu CSS kompresorů, ty základní jen odstraní whitespaces (jako Vámi zmíněný), ty složitější například sjednocují margin. Asi nejlepší kompresní poměr z těch co jsem našel má Devilo.us – ale v jistých případech je schopno ten CSS poškodit.

Já používám svůj kompressor CSS (lze vidět i způsoby komprese, pokud zadáte formátovaný výstup) nemá momentálně tolik funkčnosti, ale neměl by ničit validní CSS jako devilo. Zároveň mi osobně to CSS může zpracovávat po každé úpravě.

Nutno dodat, že ta komprese zase není o tolik větší než v případě, kdy se jen odstraní mezery. Jinak samozřejmě gzip o který se stará mod_deflate, aby to nemuselo řešit „pomalé“ PHP.

Karlos

Já pro optimalizování PNG používám TinyPNG.

Tomáš Erlich

Ahoj,
díky za odkaz.

Článek o optimalizaci obrázků se už chystá a TinyPNG tam také zmiňuji. Snažím se obrázky probrat do hloubky a ukázat, co má smysl, jak optimalizovat přes počítač, webové nástroje a jaké formáty jsou pro co vhodné.

Určitě to i pro Tebe bude zajímavé čtení.

Radek Novák

A kdy bude online? Zrovna plánuji převést všechny JPG obrázky (300×100 a 160×120) na PNG a prohnat je přes TinyPNG (resp. PNGquant). A všechny nové obrázky dávat už jen do PNG.

Tak jestli má smysl čekat nebo se do toho mohu rovnou pustit.

Tomáš Erlich

Na webu bude do čtrnácti dnů. Alespoň tak přibližně. Jde o to, že nemám jen toto téma a během té doby vyjdou určitě i jiné články. Ale jestli můžeš počkat, počkej si.

Jestli si dáš za 15 dní do kalendáře poznámku „Zkontrolovat článek o optimalizaci obrázků“, nebudeš na to muset myslet a článek tu už bude.

JPG obrázky převádět na PNG nedoporučuji.

JPG slouží na barevné fotografie a PNG na webovou grafiku, která na barvy moc bohatá není. Převedením by jsi úplně zničil barevné spektrum. Rychlost webu je důležitá, ale udělat nekvalitní obrázky… to je špatná cesta ke svižnému webu. Pokud nemáš kvůli obrázkům vyloženě pomalé stránky, raději počkej.

Kallak

Pro testování rychlosti načítání stránek jsem si oblíbil nástroj PageSpeed.

Nejen, že webovou stránku ohodnotí z hlediska rychlosti načítání, ale zobrazí i seznam věcí, které je možné zlepšit s odkazem na návod, jak na to. Existuje i jako rozšíření pro Chrome a Firefox. Alternativou je ještě rozšíření YSlow od Yahoo, které si pro nás připravilo i článek s vyčerpávajícím seznamem možných optimalizací.

Komentáře jsou pro tento článek již uzavřeny.

Předchozí příspěvek:

Následující příspěvek:

Tato stránka již není udržována. Děkuji za pochopení.