3. 9. 2009

Zrychlujeme načítání stránek

Zvýšení rychlosti internetové stránky není nikdy na škodu. Této záslužné činnosti by se měl čas od času věnovat každý internetový vývojář.

Možná si říkáte proč? V době DSL a megabitového internetu? Snadná odpověď! Vzpomeňte si, jak jste čekali na 10 hodinu večerní, kdy se konečně budete moci za levný tarif napojit přes svůj modemem. A vzpomeňte si také na to, že některé stránka se načítala klidně i pár minut – kolik nervů Vás to stálo? Dnes to není jiné, ba právě naopak.

No a pro koho je to nedostatečný důvod, třeba se nechá přesvědčit tím, že zrychlováním stránek (a aplikací) se zabývá také Google a Yahoo.

JavaScript a javascript knihovny

Bez javascript knihoven se dnes obejde málokterý internetový vývojář. Mezi nejúspěšnější zástupce patří například jQuery, Prototype nebo Dojo. O výhodách rozhraní Google Ajax LIBS jsem zde už jednou psal. Existuje cesta, jak jej využít bez jediného zásahu do aplikace. Stačí do .htaccess přidat:

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} jquery.js [nc]
RewriteRule . http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js [L]
</IfModule>

Tento jednoduchý kód bude veškeré požadavky o načtení jquery.js smětovat na Google. Obdobě jej lze upravit také pro ostatní knihovny.

U ostatních javascriptových souborů alespoň zmenšete jejich velikost. Ideálním nástrojem je YUI Compressor od Yahoo (jeho online verze). Dost pomůže také to, když své javascripty umístíte dolů pod obsah stránky.

Kešování obsahu

Další účinnou metodou, jak dosáhnout vyšší rychlosti načítání je, nastavit pro jednotlivé komponenty cache. Cest existuje několik, nejjednodušší vede opět přes htaccess. Cache můžete nastavit například takto:

#1 ROK
<FilesMatch "\.(ico|pdf|flv|swf|mov|mp3|wmv|ppt)$">
Header set Cache-Control "max-age=31536000, public, proxy-revalidate"
</FilesMatch>

# 3 MESICE
<FilesMatch "\.(gif|jpg|jpeg|png|js)$">
Header set Cache-Control "max-age=7257600, public, proxy-revalidate"
</FilesMatch>

# 1 MESIC
<FilesMatch "\.(css)$">
  Header set Cache-Control "max-age=2678400, public, proxy-revalidate"
</FilesMatch>

# 7 DNI
<FilesMatch "\.(txt)$">
Header set Cache-Control "max-age=604800, public, proxy-revalidate"
</FilesMatch>

# 10 MINUT
<FilesMatch "\.(html|htm|xml)$">
Header set Cache-Control "max-age=600, private, proxy-revalidate"
</FilesMatch>

# BEZ CACHE
<FilesMatch "\.(php)$">
Header unset Cache-Control
Header unset Expires
Header unset Last-Modified
FileETag None
Header unset Pragma
</FilesMatch>

Vše samozřejmě závisí případ od případu. Další varianty najdete například zde: htaccess Caching.

PHP

Pominu optimalizaci samotného kódu, o tom se dá najít dost. A raději zde uvedu například PHPSpeedy, nebo pokud máte přístup přímo na server zkuste kešová pomocí APC. Rozhodně také pomůže volba dobrého Frameworku.

GZIP komprese

Zapnutím GZIP komprese obsahu (mod_deflate na apache) můžete dosáhnout snížení objemu přenášených dat. Na druhou stranu tato metoda poněkud více zatížíte server. Kompresi pro JS a CSS soubory zapnete opět velice jednoduše úpravou htaccess souboru:


<IfModule mod_deflate.c>
<FilesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Co je ještě důležité

  1. Dodržujte internetové standardy.
  2. Optimalizujte obrázky pro web, najděte kompromis mezi kvalitou a jejich velikostí.
  3. Šetřete každý request.  Zkombinujte vkládané obrázky, CSS soubory a Javascripty.
  4. Nikdy nezapisujte CSS přímo do HTML.
  5. Zadávat dimenze obrázků (šířku a výšku).
  6. Jedna 404 (chybějící obsah) může prodloužit natahování stránky v řádu sekund.

Užitečné nástroje

Na závěr ještě jednou přehled užitečných nástrojů:

http://jquery.com/
#google, #jak-na-to, #webdesign