Jak zrychlit svůj web

Jak zrychlit svůj web

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%:

Obrázek o velikosti 2,28 MB bez kompreseObrázek o velikosti 391 kB s kompresí

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:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

<files *.php>
SetOutputFilter DEFLATE
</files>

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:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A600
ExpiresByType text/html A1
ExpiresByType text/css A604800
ExpiresByType text/javascript A1209600
ExpiresByType application/javascript A1209600
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType image/x-icon A604800
</IfModule>

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

Graf gzip komprese na mém blogu

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ší)


Podobné články

Poslední články

· Oprava kamerky Nexusu 5 (04.02.2015)
· Tip na vylepšení Windows... (08.02.2014)
· PS #4: efekt povodeň (01.02.2014)
· Googlím, proč nejde Goog... (01.12.2016)
· Zahraniční stáž v Anglii... (26.09.2016)
· Zahraniční stáž v Anglii... (15.07.2016)

Komentáře

  1. Dominik Fryč

    dne 11. duben 2013 18:57

    Ještě chci upozornit, že tento článek se načítá dlouho kvůli ukázce velikosti obrázků bez a s kompresí na začátku článku.

  2. Carl114

    dne 19. duben 2013 18:17

    Pěkný článek Úsměv. A díky za odkaz, jsem rád, že mé články inspirují další lidi. Čím více zdrojů a návodů bude - tím bude větší pravděpodobnost, že nebudeme narážet na pomalé weby. A to je jedině dobře.

  3. Dominik Fryč

    dne 21. duben 2013 23:46

    Díky za pochvalu. Odkaz jsem přidal rád, hodně si mi toho ve tvých článcích objasnil a vůbec naučil. Doufám, že to někomu pomůže, a že bude více rychlejších webů. Úsměv

  4. Mišo

    dne 09. říjen 2016 18:15

    Ďakujem za rady. Ihneď idem na to. Môj web už asi ani pomalší byť nemôže Smutný

Přidat komentář

Jméno: *
Email: *
Webová stránka:
Komentář:
Vyhledávání
Autor blogu
Dominik Fryč
Dominik Fryč
Je mi 19 let, jsem bloger, student IT a baví mě webdesign.
Anketa
Máte v mobilu NFC?




Doporučuji
TOP Články
Nejčtenější
TOP 10 Android a... (45957)
Zombie apokalyps... (29404)
První zkušenost ... (25392)
Proč je Windows ... (18584)
Čištění notebook... (17659)
Nejdiskutovanější
Zombie apokalypsa 21... (36)
První zkušenost s ... (27)
Proč je Windows 8 l... (22)
První rok studia ob... (11)
Co je to vlastně bl... (10)
Komentáře
Daniel u článku
Googlím, proč nejde Google...
Vladimír Weissman u článku
Rozdíl mezi geekem a nerde...
Radka u článku
Začínám kreslit
Dani3la u článku
Zombie apokalypsa 21. stol...
Lucie u článku
Googlím, proč nejde Google...
Reklama