Osobní blog Dominika Fryče

Poslední dny jsem trochu pracoval na rychlosti načítání této stránky, proto jsem se rozhodl o tom napsat krátký článek. Rychlost načítání stránek je určitě důležité věc pro všechny návštěvníky. Když je web pomalý, dlouho se načítá, návštěvník jej brzy opustí. Proto je i pro mě rychlost načítání důležitá. Momentálně nemám čas na to, abych každý obrázek zkomprimoval a opět nahrál na blog, takže to ještě chvíli nebude takové, jaké by to mohlo být po kompletním zmenšení. Pokud chcete mít za pár minut mnohem rychlejší web než kdy dříve, čtěte dále.

Komprese obrázků

Obrázky hrají poměrně důležitou roli při načítání stránek. Je tu několik možností, jak zabránit dlouhému načítání. Ještě než uložíte obrázek, vyberte při ukládání možnost Progresivní (tuto funkci samozřejmě nemá každý grafický program, podporují např. Adobe Photoshop nebo Gimp). Obrázek se nyní bude načítat v plné velikosti z nejhorší do nejlepší kvality, místo postupného načítání od shora dolů.

Na následujícím příkladu je vidět, že v původního obrázku o velikosti 2,28 MB se dá obrázek zmenšit na pouhých 391 kB, což je teda zmenšení o 83%:

První metoda, kterou já osobně používám je komprese obrázků ve Photoshopu nebo jiném programu pro úpravu obrázků. Můžete použít tento online webový kompresor obrázků. Obrázku se zmenší velikost, kvalita trochu zmenší, ale je to k nepoznání. Další možnost je vložit jednoduché a malé obrázky na web pomocí metody Sprite. To znamená, že v jednom obrázku budete mít "namačkané" i jiné malé obrázky a při načítání stránek se nemusí načítat každý zvlášť. Pak je tu třeba použití URI, což je vlastně možnost, jak mít v internetu obrázek/soubor, bez potřeby vlastního hostingu. Můžete vyzkoušet třeba tento generátor URI. Má to jednu nevýhodu a to, že tato adresa je tak dlouhá, že se špatně kopíruje/vkládá třeba do článků.

Komprese javascriptu a css

Další věci, které jsou podle mě vhodné ke kompresi, jsou soubory javascriptu a kaskádové styly. Javascriptové kompresory vymažou ze souboru všechny zbytečné mezery a komentáře. Vlastně to samé dělají CSS kompresory. Někde si můžete zvolit, jak moc chcete soubor komprimovat a jestli chcete smazat vepsané komentáře. Například můj původní style.css měl asi 39,6 kB a po kompresi asi 33,5 kB. Nějak podobně to bylo s javasriptovými soubory. Ale i to se vyplatí.

Gzip komprese

Nejprve by bylo asi dobré říct, co to vůbec je. Je to takový způsob jak "zabalit" web a při návštěvě si ho prohlížeč "rozbalí". Téměř 70% webů používá gzip kompresi. Proč jí využít? Díky gzip kompresi můžete snížit velikost souborů až o 80%. Co na to potřebujete? Pouze hosting s podporou mod_deflate a vlastní soubor .htaccess.

Následující kód vložte do vašeho souboru .htaccess:

Kešování souborů

Kešování neboli ukládání do mezipaměti prohlížeče je další způsob, jak si efektivně zrychlit web. Při první návštěvě si prohlížeč stáhne různé prvky webu (obrázky, javasripty, kaskádové styly atd.) a při příští návštěvě je použije, takže se nemusí všechny obrázky, styly a soubory znovu načítat.

Následující kód vložte do vašeho souboru .htaccess:

Navíc můžete nastavit, jak často se mají dané prvky aktualizovat - stahovat znovu. Já to mám nastavené na týden (604800) a javascript na dva týdny (1209600). Pokud obrázky, styly nebo jiné věci na webu často aktualizujete, můžete je nastavit na den (86400), pokud naopak neaktualizujete, nastavte si je třeba na měsíc (2592000).

Závěr

Na konec bych jen chtěl ještě ukázat, jak se gzip komprese vyřádila na mém blogu. Na obrázku grafu můžete vidět světle modrou část jako aktuální velikost stránky oproti původní, před kompresí. Z původních 13,7 bytů se zmenšila na 4,2 bytů, což je asi 70%. Toto měření jsem provedl na jedné stránce gzip testu, kde si tedy můžete ověřit, jestli máte na webu aktivovanou gzip kompresi a o kolik byla snížena velikost celé stránky.

Po úspěšném přečtení článku a zrychlení vašeho webu si můžete ještě otestovat rychlost vašeho webu, buď pomocí tohoto testu nebo testu PageSpeed Insights. V prvním testu je vidět, kolik je při vstupu na váš web žádostí, čas načtení a velikost stránky. V druhém se můžete dozvědět, co na webu můžete upravit, aby se načítal rychleji. Doufám, že jsem vám pomohl, a že budete mít rychlejší web.

(Zdroje: vlastní, Osobní blog Tomáše Erlicha a další)