Jak zjistit, co zpomaluje webové stránky?

Čtvrtek, 13. Prosinec 2012

Dnešní den jsem se rozhodl věnovat tématu zrychlování stránek. Internet je svižný, ale i tak řeší hodně lidí otázku, proč se jejich stránky načítají pomalu. Tohle téma mě už dlouho zajímá, takže zde jsou mé rady.

Začněme od kořenů, hostingu a tak vůbec

Žádné stránky nebudou rychlé na blbém hostingu / serveru. Proto je vždy dobré vybírat s opatrností a rozvahou. Je třeba vybrat hosting, kde je kešování, gzip, .htaccess a podpora na telefonu samozřejmostí. Jestli se vám někdo snaží namluvit, že gzip je staré a už nemá cenu, jděte jinam.

Taky nepočítejte s tím, že free hostingy budou na nějaké úrovni. Zkrátka se nebojte za pořádný server zaplatit. Kvalitní hosting stojí do tisícovky za rok. To není moc a hosting určitě není místo, kde by se mělo šetřit. Kde hostuji aktuálně já poznáte podle ikonky v pravém postranním sloupci (dole). Já si vybírám velmi dobře, takže se nemusíte bát, že by šlo o nějaký šmejd.

Hosting vybírejte také podle lokace. Pokud máte většinu návštěvníků z USA, bude nejlepší vybrat nějaký hosting odtamtud. Je to kvůli rychlé odezvě. Čím delší vzdálenost, tím delší odezva. Ve výsledku tak můžete mít web s odezvou 9 milisekund, při špatném výběru ovšem i 150.

Web se načítá neskutečně pomalu, co s tím?

Jestli se jedná o dočasný problém, napište e-mail na podporu a uvidíte. Třeba provádí údržbu či je na serveru nějaká dočasná chyba. To ovšem teď řešit vůbec nebudeme. Zaměřme se čistě na trvalé, pomalé stránky.

V prvním kroku si své stránky změřte. Měření můžete provést pomocí Pingdom Tools. Běžné stránky se načítají pomocí nástroje zhruba 4 vteřiny. Všechno nad je už pro návštěvníka znatelné a mělo by se něco dělat. Vždy říkám: „Proč nechat návštěvníky čekat, když to není nutné?“.

Mimo jiné můžete přes Pingdom Tools sledovat vývoj rychlosti načítání stránek v čase, zjistit počet požadavků, jaký typ souboru je datově největší a další užitečné věci, které vám pomohou při urychlování stránek.

Analyzujeme problém webu skrze PageSpeed Insights

Když už víte, že ten bláznivý web je opravdu pomalý, přichází na řadu analýza. Ta může být nudná (jako luštění v kódu), ale i zábavná. Google pro webmastery totiž uvolnil službu PageSpeed Insights, která vše zkontroluje za nás. My tak máme jasný přehled seřazený podle priorit a víme, co brzdí stránky nejvíce. Pak už jen stačí řešit bod po bodě a těšit se na svižný web.

Ty největší chyby jsou na všech webech stejné. Je to o nepoužívání kešování, gzip komprese a špatné optimalizaci obrázků. Jako poslední snad už jen příliš velké JS soubory, které brzdí načítání webu.

Přes tento nástroj by nemělo být problém s trochou šikovnosti udělat jakékoliv stránky rychlé jako blesk. Stačí si chyby přečíst a opravit je. Na to podstatné se vždy snažím napsat nějaký článek, takže o „tutoriály“ nouze není. Je to čistě o tom chtít udělat stránky rychlejší, ušetřit tak návštěvníkům čas a zpříjemnit jim rychlostí webu prohlížení.

A věřte, že to poznají. Z mé ankety vyšlo najevo, že více jak polovina lidí hodnotí tyto stránky jako fantasticky rychlé. To zní skvěle, ne?

Modul mod_pagespeed pro snadné zrychlení stránek

Tento šikovný modul zrychluje stránky díky filtrům, které si nastavíte. Je to mnohem snazší než vše dělat ručně vkládáním kódů do konfiguračního souboru .htaccess. Bohužel jsem ho neměl ještě možnost otestovat a nevím, zda vůbec někdo v ČR tento modul na svém hostingu nabízí.

Jeho výhodou je, že neupravuje stávající obsah. To znamená, že na serveru můžete mít stále své neoptimalizované soubory a on si je sám sjednotí a optimalizuje. To je dobré zvláště pro ty, kteří často zasahují do kódu a potřebují ho čitelný. Jakmile by můj hosting podporoval tento open-source, určitě bych se o něm rozepsal více. Myslím, že toto je budoucnost. Protože jen málo lidí se chce hrabat ve svém kódu a upravovat obrázky.

Jestli máte vlastní server, jděte do do toho.

Jak zjistit, co zpomaluje weby na systému WordPress

Redakční systém WordPress je hodně populární a tak mu budu věnovat také nějaký ten odstavec. Nebudu tu psát ty rady jako vypnout nepoužívané pluginy, ale představím vám malý trik. Díky němu zjistíte, jak se postupně stránky načítají a kde je zádrhel.

Pro představu tu uvedu příklad. Řekněme, že ve své šabloně používáte příliš widgetů a postranní menu trpí. A to tak, že brzdí stránky.

Pomocí funkcí timer stop a get num queries můžete snadno zjistit jaký widget trvá příliš dlouho a jeho odebráním zničit problém pomalého webu. Stačí si stáhnout plugin PHP Code Widget a do něj vložit následující kód.

Stránka vygenerována za <?php echo(timer_stop(0));?> sekund.
Počet dotazů na databázi: <?php echo get_num_queries();?>.

Poté PHP Code Widget vložte před a za problémový prvek a načtěte stránky znovu. Kódy vám ukáží aktuální počet dotazů na databázi a trvání zpracování do bodu, kde je kód vložený. Tím, že kód vložíte před i za zvolený widget zjistíte, jak dlouho se zpracovává. Pokud dlouho, heureka, našli jste problém.

Udělejme web rychlejším a příjemnějším místem

Stojí to za to a není to těžké. Na internetu je plno nástrojů a článků, které vám pomohou. Pro všechny případy, pokud si stále nevíte rady, komentáře jsou tu pro vás. Do budoucna ještě nějaké články na toto téma chystám, takže se nemusíte bát. O návody nouze nebude…

{ Komentáře k článku }

Marek

Děkuji za nakopnutí. Dopoledne jsem si článek přečetl, a celý den mi to vrtalo hlavou. Napsal jsem na hosting, zda potřebné technologie podporují, a večer vše „zapnul“.

A jen zírám :). RSS šlo do čtečky ;).

Tomáš Erlich

A já děkuji za hezký komentář :).

Něco takového vždy potěší mnohem více než stovky přečtení. Asi nejlepší nástroj je PageSpeed Insights, protože je naprosto snadný. Prostě tam dáš URL svých stránek a máš to. Pak už jen stačí ty největší chyby (červené a žluté) opravit a podívat se, jak se stránky načítají rychleji.

Na ty nejčastější nedostatky se vždy snažím napsat návod takže pokud budeš trpělivý, ještě několik článků s tipy a návody jak správně stránku optimalizovat zde určitě nalezneš.

Marek

Jistě, na tom odkazu jsem začal a vše zkoumal. A pak také zde na webu přečetl i ostatní návody :).

A jeden tip – doposud jsem měl problém s „jednoduchou“ optimalizací obrázků. Žádný prográmek jsem nenašel, on-line služby nepovažuju za ideální řešení… a nyní jsem zjistil, že ty PageSpeed Insights existují i jako doplněk do Chrome, a nejen že web stejně analyzují, ale například u neoptimálních obrázků nabízejí k uložení i jejich optimalizovanou verzi. Což je z mého pohledu bomba :).

Tomáš Erlich

Ano,
plugin pro prohlížeče existuje a dokonce zkrátí i JS a CSS soubory, které si následně můžete stáhnout. Pokud by i ostatní měli zájem, na stažení je na stránkách nástroje. O optimalizaci obrázků psát budu, takže se můžete těšit. Ještě mám v záloze pár článků. O obrázcích vyjde v lednu, nyní už nic publikovat nebudu.

Rozeberu tam jaké formáty jsou pro jaké druhy obrázků vhodné, proč obrázky optimalizovat, jak na to přes normální programy a jak si pomoct přes online nástroje. Nevynechám ani přehled efektivity jednotlivých nástrojů a tak dále. Zkrátka se budu snažit o plnohodnotný návod jako jsou tyto.

Kalper

V souvislosti se zrychlením stránek ve Wordpressu mohu také doporučit plugin WP Super Cache.

Forest

Příjemný článek :).

Tomáš Erlich

Tak hurá do optimalizace. Schválně jsem tvé stránky vložil do PageSpeed Insights a vyskočilo na mne „Aktivujte kompresi“ a „Optimalizujte obrázky“. Jen aktivací gzip by jsi ušetřil 190 kB. Optimalizací obrázků pak dalších 170. To máš už jen za tohle 360 kB, což je u většiny internetového připojení vteřina načítání.

Takhle stačí jít bod po bodě a máš stránky hned o mnoho rychlejší. Pokud na to tedy máš čas a záleží ti na tom.

Forest

Určitě do toho jdu :). Hodně toho dělají ty obrázky v článcích, které jsou v indexu kompletní (bez náhledu).

Tom

Díky za článek,
už druhý den nedělám nic jiného než optimalizuji :).

PS: Zkuste také OctaGate SiteTimer.

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í.