visible.cz - buďte vidět

Získejte rychlý přehled o internetovém marketingu.

Blog / Novinky »

Nastupuji do Google Praha

19. leden Od konce ledna se stávám zaměstnancem firmy Google (a to i přes to, že jsem se nedávno kasal, že ...


čtěte dál »

Google Analytics v češtině

13. prosinec Jen krátce: Google Analytics od včerejška běží i v češtině. Stačí ji pouze nastavit (klikněte na ...


čtěte dál »

Návštěva v Google Praha

10. listopad Včera jsem měl možnost navštívit kanceláře Google pro Českou republiku. Jak asi víte, Google má v...


čtěte dál »

11 rad pro zrychlení vašich stránek

Vteřina dělá rozdíl mezi spokojeností a protáhlým obličejem, zvlášť pokud se ta vteřina opakuje s každým kliknutím. Stránka načítaná konstantně za více než 5 sekund musí uživatele opravdu zaujmout, aby na ní vydržel. Zkusme se podívat na pár způsobů, díky kterým budou vaše stránky svižnější a uživatelé spokojenější. (Dřív, než se tento článek objeví v připravované sekci Efektivita webu, rád bych se o něj podělil zde na blogu. Uvítám zpětnou vazbu!)

Rychlý web

Nejdříve ten nejprimitivnější test, jaký můžete provést: jděte na stránku, jejíž rychlost chcete změřit, a stiskněte Ctrl-F5. Všimněte si, za jak dlouho se na stránce zobrazí hlavní text (nebo jiný důležitý obsah), pak také za jak dlouho je vidět vše, a případně kdy váš prohlížeč dokončí stahování dalších ("neviditelných") komponentů. Pro srovnání (měřeno na firemním ADSL připojení programem YSlow):

StránkaPrůměrná doba stahování
Google.cz0.2s
ČeskáTelevize.cz1.0s
Seznam.cz1.2s
iHNed.cz1.5s
Atlas.cz2.7s
Centrum.cz2.7s
Lupa.cz3.0s
Vltava.cz3.0s
iDnes.cz5.0s
Stream.cz5.0s
Invia.cz10.0s

Toto samozřejmě nejsou reprezentativní data (jde jen o velmi omezeně simulovanou "první návštěvu" stránky), ale dávají přinejmenším určitou představu o optimalizaci vstupní stránky jednotlivých hráčů na českém internetovém poli.

Řetěz je tak silný jako jeho nejslabší článek. To samé platí i pro rychlost webu. Proto je důležité uvědomit si, co vše může být na stránce pomalé:

  • sestavení stránky: neefektivní (PHP/Python/Ruby) skripty, SQL dotazy, přetížený server atp.
  • stahování stránky: příliš mnoho stahovaných souborů, příliš vzdálený server, nekomprimovaný přenos
  • renderování stránky: příliš mnoho objektů náročných na výpočetní kapacitu uživatelova počítače

Pomalé sestavení stránky, neefektivní PHP skripty, nulová optimalizace SQL dotazů a špatná konfigurace Apache jsou poměrně časté problémy, jejich řešení ale přesahuje tématické zaměření těchto stránek. Pokud máte pocit, že stránce příliš dlouho trvá, než se vůbec začne načítat, nebo pokud stránka uprostřed vykreslování na nějakou dobu "zamrzne" (nic se nestahuje), máte problém na serveru. Vyhledejte pomoc programátora nebo administrátora serveru.

Tento článek se zaměří na pomalé stahování a renderování stránky, které rujnuje efektivitu nejednoho webu. Co tedy můžete pro rychlost svého webu udělat?

  1. Zmenšete počet stahovaných souborů. Mnoho stránek používá desítky miniaturních obrázků, CSS a JavaScript souborů. Obrázky lze přitom často spojit, a většina stránek si vystačí se dvěma CSS styly (jeden "screen" a druhý "print") a dvěma JavaScript soubory (jeden globální pro celou doménu a druhý specifický).

  2. Zmenšete velikost stahovaných souborů. JavaScript a CSS soubory se časem nafouknou na desítky kB, nehledě na standardní knihovny (script.aculo.us, prototype, dojo Toolkit), které jsou velké už od začátku.

    JavaScript lze úspěšně zkomprimovat například packerem, CSS s poněkud horšími výsledky CSS compressorem. Samozřejmě si nechte původní soubory pro případ, že je budete v budoucnu upravovat.

  3. Pokud to váš webhosting umožňuje, komprimujte komunikaci mezi serverem a uživatelem. Nejčastěji je to řešeno pomocí mod_gzip nebo mod_deflate. Existují však i způsoby, jak komprimovat i bez podpory webhostingu, pokud máte možnost využívat .htaccess. (K tomu se snad vrátím v pozdějších článcích.)

  4. Vyhněte se přesměrování. Posílejte lidi přímo na cílovou adresu, nebo místo redirectu použijte mod_rewrite.

  5. Mějte na stránkách pouze komponenty z vaší domény a žádné jiné. Odkazování na obrázky a JavaScripty z externích domén vás bude stát drahocenné desetiny vteřiny: nejdřív než prohlížeč najde server, kterému externí doména "patří" (DNS Lookup), pak než server soubor "sestaví", a potom než se stáhne.

    Nejčastějšími "hříšníky" jsou nepříliš optimalizovaná počítadla a statistické programy. Pokud potřebujete vytvářet své statistiky externě, zvolte opravdu rychlou službu. (Např. Google Analytics má velmi rychlou odezvu.)

  6. Kešujte. Nastavte na serveru, aby u neměnných souborů posílal Expires Header třeba na 10 let dopředu. Vracející se návštěvník pak z externích souborů nebude muset stahovat ani jeden byte. Vše bude uchováno v interní cache jeho prohlížeče.

    Problém nastává, pokud se rozhodnete některý z "neměnných" souborů změnit. Řešením je pojmenovávat soubory podle verzí: například behavior.2.5.js nebo screen.black.2007.v2.css a při nástupu nové verze prostě odkázat na nový soubor.

  7. Umístěte všechny své skripty a CSS styly do externích souborů. Jak bude uživatel procházet vaším webem, využije je opakovaně.

  8. Dávejte odkazy na CSS styly na začátek HTML souboru (do sekce <header>). CSS tak nebude zdržovat progresivní vykreslování stránky (browser bude mít všechny informace o layoutu už od začátku).

  9. Dávejte skripty (resp. odkazy na ně) na konec HTML souboru (před koncový tag </html>). Pokud dáte JavaScript na začátek, stránka se přestane vykreslovat, dokud nebude externí soubor stažen a spuštěn.

  10. Odstraňte výkonnostně náročné skripty. Že stránka funguje svižně na vašem počítači ještě nic neznamená: velmi pravděpodobně máte nadprůměrně výkonný počítač.

    Efekty typu script.aculo.us vypadají úžasně, ale pokud jsou spouštěny při každém načtení stránky nebo při každém pohybu myši, většina uživatelů je bude brzy nenávidět.

    Vyhněte se také CSS direktivě expression. Ty se totiž spouštějí při každém překreslení stránky: tedy nejen při zvětšování a zmenšování okna, ale i při skrolování a při každém pohybu myši nad daným DOM objektem.

  11. Méně je více. Zeptejte se Googlu.

Snad jsem na nic nezapomněl. Chcete-li získat přesné údaje o rychlosti vašich stránek, doporučuji nový doplněk Firebugu, YSlow (pouze Firefox). Na internetu lze stránky analyzovat pomocí poněkud zastaralého nástroje Web Page Analyzer.

Článek byl inspirován doporučeními Steva Sounderse z Yahoo. (Jeho třináct rad jsem ovšem osekal, pozměnil a doplnil, aby více odpovídaly potřebám českého, nikoli globálního internetu. Pokud tedy chcete vědět víc, následujte odkaz.)

Přidat stránku do: linkuj.cz | jagg.cz | del.icio.us

Zápis v blogu visible.cz z 26. července 2007. Autorem je Filip Hráček. Pro pravidelný příjem novinek o SEM, SEO a internetovém marketingu se přihlaste k našemu RSS Blog RSS Feedu.

Komentáře

kutny, 29. července 2007:

Díky za shrnující článek. Nic podobně komplexního jsem na českém webu ještě nevidel.
Ivia.cz je programátorská šílenost. Kolik by asi ušetřili přenesených dat a o kolik by se ty jejich stránky zrychlily, kdyby vyhodili z úvodky ty stovky řádků inline javascriptu. A už vůbec neřeším jaký dopad to může mít na SEO...
Tenhle článek mi připomněl výborný článek o optimalizaci javascriptu na ThinkVitamin http://www.thinkvitamin.com/features/webapps/serving-javascript-fast

Filip, 29. července 2007:

Díky za reakci a za pochvalu. Upřímně řečeno, pomalost vstupní stránky CK Invia mě hodně zaskočila. Měl jsem za to, že zrovna lidé z Invie si takové věci hlídají ze všech nejvíc.

Martin, 4. srpna 2007:

Tenhle článek mi připomněl
http://developer.yahoo.com/performance/rules.html

Možná by bylo slušné na zdroj alespoň odkázat.

Filip, 13. srpna 2007:

Díky Martine za upozornění, na odkaz na Soundersův článek jsem zapoměl, ale už je na svém místě.

Otázky a odpovědi »

Jak dlouhodobě zvýšit návštěvnost webu?

Pokud jste připraveni na jednorázovou investici peněz a/nebo času, doporučujeme SEO (optimalizaci pro vyhledávače). Nemá sice okamžité výsledky, al...

čtěte dál »

Jak nejlépe začít inzerovat na internetu?

Záleží na tom, kolik máte k dispozici financí a jestli potřebujete zvýšit návštěvnost svého webu rychle a dočasně nebo pomalu a trvale. Neexistuje ...

čtěte dál »

Jaká cena za proklik se ještě vyplatí?

Pokud si odmyslíme všechny "nevyčíslitelné" faktory (viz níže), je postup velmi jednoduchý. Následující vzorec je myšlen pro internetový obchod, al...

čtěte dál »