28.5. 2012

Nejlepší techniky jak zrychlit webové stránky (část 1)

Nejlepší techniky jak zrychlit webové stránky (část 1)

Nikdo nemá rád pomalé stránky, dnes Vám tedy ukážeme čemu se vyhnout a jak snížit čekací čas Vašich návštěvníků.

Vyvarujte se prázdných zdrojů v elementu obrázku

Obrázek s prázdným řetězcem zdroje, dělá více, než byste čekali.

1. HTML <img src="">
2. JavaScript var img = new Image();
img.src = "";

Oba způsoby mají za následek další zbytečné dotazování serveru.

Dělejte favicon.ico malé a cachovatelné

Zkuste dělat favicony s velikostí do 1kB a můžete také nastavit dobu expirace hlavičky dokumentu s favicon. Pokud tedy uvážíte, že Vaše stránky jsou tak nějak hotové, můžete dobu expirace nastavit na několik měsíců do budoucna.

Optimalizujte obrázky

Vyhněte se změny velikosti obrázků pomocí HTML, nebo CSS tagů width a height a vyhněte se GIFům! Převeďte je nejlépe do PNG souborů (umožňují průhledost). Dříve byl problém s jejich podporou v prohlížečích a proto k němu někteří ještě stále mají předsudky, ale to je již minulostí. Pokud Vaše loga, či jiné obrázky nejsou příliž barevně náročné, můžete použít i profily se 4 nebo 256 barvami a ušetřit tak spoustu kB.

Statické komponenty posílejte bez sušenek

Když prohlížeč dotazuje stažení statického obrázku a posílá cookies spolu s dotazem, nemá server pro tyto cookies žádné rozumné využití. Můžete se ale těchto cookies snadno zbavit. Pokud provozujete web na doméně www.example.org, můžete své statické elementy hostovat na subdoméně static.example.org, kterou nastavíte cookies-free. Pokud tedy nemáte ale cookies nastavené na doméně nejvyšší úrovně example.org. Pro ještě lepší výsledky, maximalizujte paralelní stahování. Uděláte to dotazováním několika domén. Vytvořte si static1.example.org a static2.example.org. Ale abyste nebyli zase zpomalováni dotazováním DNS serveru, je doporučeno takto používat 2 až 4 subdomény.

Post-load komponent

Podívejte se na Vaši stránku a řekněte si: "Co je naprosto nejdůležitější k zobrazení obsahu mé stránky?" Ostatní komponenty si mohou počkat. Nejvhodnějším nástrojem pro rozdělení obsahu na dvě části je JavaScript.

Preload komponent

Preload může vypadat jako opak post-load, ale ve skutečnosti je to něco trochu jiného. Preloadem komponent můžete stahovat obrázky, styly, skripty a další elementy, které můžete v budoucnu potřebovat, když se prohlížeč nudí. Tímto způsobem bude další stránka vašeho webu načtena o mnoho rychleji, protože většina součástí již bude připravena v cache. V současnosti existují tři typy preloadingu:

  • Unconditional preload - Jakmile se spustí onload, začnou se načítat extra komponenty z budoucích stránek.
  • Conditional preload - Základem je nějaká akce, která spustí načítání extra obsahu, například když začnete psát do input boxu, začnou se načítat další komponenty, které se vyskytují na stránce s výsledky.
  • Anticipated preload - Chystáte-li se na redesign, tohle může být Váš případ. Uživatelé můžou shledat Vaši stránku s novým designem pomalejší než dřív zejména proto, že  mají cache plnou starého designu. Můžete jim ale do cache načíst některé komponenty z nového designu ještě před spuštěním.

Spláchněte buffer

Když uživatel dotazuje stránku, čeká několik stovek milisekund na sestavení kompletní stránky. Během této doby prohlížeč čeká na data. V PHP existuje funkce flush(). Umožní vám částečně připravenou HTML stránku poslat ze serveru do prohlížeče a ten si může sestavovat a načítat. Vhodné místo pro splachování bufferu je hned za hlavičkou, před tělem stránky. Prohlížeč si načte JavaScript a CSS a ušetříte zase několik chvil.

... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content -->

Snad Vám budou tyto praktiky užitečné a budete na ně při tvorbě webu myslet. V dalším díle si ukážeme některé další tipy pro zrychlení webu.

Autor: Honza Vlasák