Zrýchlite načítavanie vašej stránky

Prečo by vás mala trápiť rýchlosť stránky? Podľa Kissmetrics až 47% užívateľov opustí stránku po 2 sekundách načítavania a 40% užívateľov po 3 sekundách. Google oficiálne zahrnul parameter rýchlosti webu do vyhľadávacieho algoritmu už v apríli 2010. Vychádzal vtedy z viacerých svojich interných štúdií, ktoré preukázali, že na pomalom webe používatelia strávia oveľa menej času. V skratke: nižšia odchodovosť zo stránky (bounce rate), lepšie pozície vo vyhľadávači (SEO), návštevník si pozrie viac obsahu/článkov/produktov a bude kľudnejší ak na to nebude musieť 10 sekúnd čakať 😉

Ako si otestovať rýchlosť stránky

Na internete nájdete obrovské množstvo voľne dostupných toolov na meranie rýchlosti webu

• PageSpeed Insights – priamo z dielne Google Developers, analyzuje hneď aj mobilnú verziu stránky
• GTmetrix – veľmi šikovný a prehľadný tool, ktorý ponúka aj návody, ako si vylepšiť rýchlosť vašej stránky
• WebPageTest – môžete si nastaviť v ktorom meste bude prebiehať test a na akom zariadení (iPhone, iPad, Nexus 5/7, …). V prípade desktopového testu si môžete zvoliť prehliadač (u Internet Explorer aj verziu)

Na ktoré hodnoty sa treba zamerať

• Page Load Time / čas načítania stránky – je hneď prvý faktor, ktorý by vás mal trápiť. Ak je toto číslo väčšie ako 7 sekúnd, tak by vás mali naháňať nočné mory. Pod 2 sekundy je už slušná rýchlosť. Ak máte načítavanie do sekundy, tak máte u mňa osobné blahoželanie (len v prípade ak na stránke je reálny obsah).
• Total Page Size / celková veľkosť stránky – alebo „koľko vecí musí návštevník stiahnúť do počítača“. Opäť, čím menšie číslo, tým lepšie. Ak má vaša stránka 7 MB, mali by ste sa pozrieť do zrkadla a úprimne sa nad sebou zamyslieť. Čísla okolo 1,5 MB a nižšie sú pekné, ale mobilní používatelia vás stále budú preklínať pokiaľ nemajú 4G.
• Requests / počet požiadaviek – javascript sem, css-ko tam. Je to počet všetkých súborov, ktoré stránka potrebuje na zobrazenie. Sú tam vaše fonty, obrázky, scripty, Facebook plugin… Čím menšie číslo, tým lepšie. Statické stránky s Javascriptovými efektami by mali mať okolo 10-15 requestov. WordPress stránky okolo 25-40, WordPress s WooCommerce alebo s prémiovou šablónou 70-80. Ak máte 150 a viac requestov, mali by ste zrevidovať počet pluginov a scriptov (niektoré WordPress šablóny sú nie zrovna najlepšie napísané a vedia vám sami o sebe vyprodukovať tonu odpadu)

Dosť bolo rečí, poďme s tým niečo spraviť

Ak používate CMS WordPress, nezahlte si stránku 50-timi pluginmi, ktoré sú vám na nič. Pokiaľ nejaký plugin aktuálne nepotrebujete, vypnite ho. Používajte len tie pluginy, ktoré naozaj potrebujete. Na cachovanie stránky môžete použiť plugin WP Super Cache alebo W3 Total Cache. Obidva sú dobré. Ale inštalujte vždy len jeden! Pre tých zdatnejších – vyhnite sa prémium šablónam a pokiaľ je to možné, píšte si vlastné šablóny na WordPress. V prémiových šablónach je zbytočne veľa JavaScriptov a CSS-iek, ktoré sú vám zbytočné a len zaťažujú stránku. Dobrým štartovacím bodom sú základné WordPress šablóny, ktoré si môžete customizovať na nepoznanie. Niekedy však postačí malá zmena pre dosiahnutie WOW efektu. A tou zmenou myslím úpravu súboru .htaccess. Súbor .htaccess nájdete v root adresári webu. Na to, aby ste sa k tomuto súboru dostali, potrebujete vedieť prístupové heslá na FTP server. Po prihlásení sa na FTP (napríklad cez program FileZilla) nájdite daný súbor a stiahnite si ho do počítača.     Pokiaľ na FTP servery tento súbor nevidíte, vo FileZilla vyberte v hornom menu na položku „Server“ a kliknite na „Force showing hidden files“ alebo po slovensky „Vynútiť zobrazovanie skrytých súborov“.

Základný .htaccess pre WordPress vyzerá takto:

Ak CMS WordPress nemáte, pravdepodobne budete mať .htaccess prázdny alebo ho nebudete mať vôbec.

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

 

Do .htaccess pridajte tento magic:

Pokiaľ máte WordPress tento magic vložte za základný .htaccess (nemažte to, čo tam už je). Ak WordPress nemáte, vložte nasledovný kód do .htaccess. Ak nemáte ani taký súbor, otvorte si poznámkový blok, vložte doň kód a uložte ho s názvom „.htaccess“. Ako typ súboru vyberte namiesto textového dokumentu (.txt) druhú možnosť „All files“ alebo po slovensky „Všetky súbory“ a ako „Encoding“ po slovensky kódovanie nastavte „UTF-8“ (na tom fičia servery a je to pre vás najbezpečnejšia voľba).

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##


## compress text, html, javascript, css, xml:##
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
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

<IfModule pagespeed_module>
ModPagespeed on
ModPagespeedEnableFilters
extend_cache,combine_css,combine_javascript,collapse_whitespace,move_css_to_head
</IfModule>

# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</IfModule>
# END Cache-Control Headers

  Nový vylepšený .htaccess nahrajte na váš FTP server. PRO tip: Meňte .htaccess postupne a po pridaní každého bloku kódu pretestujte rýchlosť. Pokiaľ napr.: máte WordPress šablónu, ktorá má optimalizované CSS aj Javascripty, nepotrebujete ich znovu minifikovať. Preto sa môže stať, že niektorý riadok bude vhodnejšie vyhodiť pre lepšiu optimalizáciu rýchlosti.  

Problém: Nahral som nový .htaccess a nič sa na rýchlosti nezmenilo.

Rýchlosť si merajte pomocou toolov spomenutých vyššie. Voľným okom a so zacachovaným webom si zmenu nevšimnete. Ak ani tooly nezaznamenali zmenu, je možné že vám web beží na Nginx serveroch (kód vyššie sú pre Apache). Vyhoďte všetko, čo ste tam dali a hoďte tam toto:

server {
gzip on;
gzip_types text/html text/css application/x-javascript text/plain text/xml image/x-icon;
}

location ~* \.(jpg|png|gif|jpeg|css|js)$ {
expires 500h;
}