zrychlení načítání stránky
omezení počtu http dotazů
sloučení velkých obrázků do tapet
Pro každý obrázek se otevírá nové http spojení a to drasticky zpomaluje načítání. Pokud obrázky sloučíme do jednoho velkého, ušetříme http requesty a obrázky potom mžeme zobrazit jako výřez z pozadí:
<a style="background-position:0px 0" href="/odkaz1" title="obraz1"></a> <a style="background-position:-133px 0" href="/odkaz2" title="obraz2"></a>zakódování ikon do css
Viz zakódování ikon do css pomocí base64.
uložení css stylopisu do hlavičky stránky (pokud nemáme v css ikony)
Většina návodů pro webdesign doporučuje používat externí css soubory. Výhoda je v tom, že se css v prohlížeči kešuje, ale první načtení stránky je o to pomalejší a mlže se na pomalém připojení projevovat různými nežádoucími překreslováními vzhledu (napřed se načte stránka, ale stylopis se ještě nedorazil, takže se nejprve zobrazí ošklivý velký font bez pozadí s modrými odkazy a pak teprve se stránka překreslí korektně.)
Pokud se nám podaří důsledně redukovat velikost css stylopisu, (viz dále) dosáhneme rychlejšího prvního načtení stránky tím, že ho vložíme in-line přímo do hlavičky.
Pokud ovšem uložíme ikony do css, naroste velikost css natolik, že je lépe mít css soubor externí.
úsporný zápis css
Velikost css souboru omezíme úsporným zápisem css vlastností: nadefinujeme třídy pro každou jednotlivou vlastnost, která se ve stylopisu opakuje více než 2x a ty pak přiřadíme danému prvku s tím, že nejčastěji používané prvky pojmenujeme jedním písmenem abecedy, prostě šetříme každý bajt kódu, pokud se opakuje.
využívání dědičnosti
Zejména u generovaných menu častou chybou opakování třídy u každého odkazu:
A v generovaném menu už stačí uzavřít odkazy do divu:
odkazy na tuto stránku: blog:2014:faktory ovlivňující rychlost načítání stránek wiki:optimalizace obrázků:zakódování ikon do css pomocí base64