Zrychlete načítání vaší stránky

Zrychlete načítání vaší stránky

Proč by vás měla trápit rychlost stránky? Podle Kissmetrics až 47 % uživatelů opustí stránku po 2 sekundách načítání a 40 % uživatelů po 3 sekundách. Google oficiálně zahrnul parametr rychlosti webu do vyhledávacího algoritmu už v dubnu 2010. Vycházel tehdy z vícerých svých interních studií, které prokázaly, že na pomalém webu uživatelé stráví mnohem méně času. Ve zkratce: nižší odchodovost ze stránky (bounce rate), lepší pozice ve vyhledávači (SEO), návštěvník si prohlédne více obsahu/článků/produktů a bude klidnější, když na to nebude muset 10 sekund čekat. 😉

Jak si otestovat rychlost stránky

Na internetu najdete obrovské množství volně dostupných toolů na měření rychlosti webu:
  • PageSpeed Insights – přímo z dílny Google Developers, analyzuje hned i mobilní verzi stránky.
  • GTmetrix – velmi šikovný a přehledný tool, který nabízí i návody, jak si vylepšit rychlost vaší stránky.
  • WebPageTest – můžete si nastavit, ve kterém městě bude probíhat test a na jakém zařízení (iPhone, iPad, Nexus 5/7…). V případě desktopového testu si můžete zvolit prohlížeč (u Internet Exploreru i verzi).

Na které hodnoty je třeba se zaměřit

  • Page Load Time / čas načítání stránky – je hned první faktor, který by vás měl trápit. Jestli je toto číslo větší než 7 sekund, tak by vás měli nahánět noční můry. Pod 2 sekundy je už slušná rychlost. Pokud máte načítání do sekundy, tak máte u mě osobní blahopřání (jen v případě, pokud je na stránce reálný obsah).
  • Total Page Size / celková velikost stránky – nebo „kolik věcí musí návštěvník stáhnout do počítače“. Opět, čím menší číslo, tím lépe. Jestli má vaše stránka 7 MB, měli byste se podívat do zrcadla a upřímně se nad sebou zamyslet. Čísla okolo 1,5 MB a nižší jsou pěkná, ale mobilní uživatelé vás stále budou proklínat, pokud nemají 4G.
  • Requests / počet požadavků – javascript sem, css tam. Je to počet všech souborů, které stránka potřebuje na zobrazení. Jsou tam vaše fonty, obrázky, scripty, Facebook plugin… Čím menší číslo, tím lépe. Statické stránky s javaskriptovými efekty by měly mít kolem 10–15 požadavků. WordPress stránky kolem 25-40, WordPress s WooCommerce nebo s prémiovou šablonou 70–80. Pokud máte 150 a více požadavků, měli byste zrevidovat počet pluginů a scriptů (některé WordPress šablony nejsou právě nejlépe napsané a umí vám samy o sobě vyprodukovat tunu odpadu).

 Dost bylo řečí, pojďme s tím něco udělat

Pokud používáte CMS WordPress, nezahlťte si stránku 50 pluginy, které jsou vám na nic. Pokud nějaký plugin aktuálně nepotřebujete, vypněte ho. Používejte jen ty pluginy, které opravdu potřebujete. Na cachování stránky můžete použít plugin WP Super Cache nebo W3 Total Cache. Oba dva jsou dobré. Ale instalujte vždy len jeden! Pro ty zdatnější – vyhněte se premium šablonám a pokud je to možné, pište si vlastní šablony na WordPress. V prémiových šablonách je zbytečně mnoho JavaScriptů a CSS, které jsou pro vás zbytečné a jen zatěžují stránku. Dobrým startovacím bodem jsou základní WordPress šablony, které si můžete customizovat k nepoznání. Někdy však postačí malá změna pro dosažení WOW efektu. A tou změnou myslím úpravu souboru .htaccess. Soubor .htaccess najdete v root adresáři webu. Na to, abyste se k tomuto souboru dostali, potřebujete znát přístupová hesla na FTP server. Po přihlášení se na FTP (například přes program FileZilla) najděte daný soubor a stáhněte si ho do počítače. htaccess Pokud na FTP serveru tento soubor nevidíte, ve FileZilla vyberte v horním menu položku „Server“ a klikněte na „Force showing hidden files“ nebo česky „Vynutit zobrazování skrytých souborů“.

Základní .htaccess pro WordPress vypadá takto:

Pokud CMS WordPress nemáte, pravděpodobně budete mít .htaccess prázdný nebo ho nebudete mít 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 přidejte tento magic:

Pokud máte WordPress, tento magic vložte za základní .htaccess (nemažte to, co tam už je). Pokud WordPress nemáte, vložte následovný kód do .htaccess. Pokud nemáte ani takový soubor, otevřete si poznámkový blok, vložte do něj kód a uložte ho s názvem „.htaccess“. Jako typ souboru vyberte místo textového dokumentu (.txt) druhou možnost „All files“ nebo česky „Všechny soubory“ a jako „Encoding“ (česky kódování) nastavte „UTF-8“ (na tom fičí servery a je to pro vás nejbezpečnější volba). htaccess2
## 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: Měňte .htaccess postupně a po přidání každého bloku kódu protestujte rychlost. Pokud např.: máte WordPress šablonu, která má optimalizované CSS i Javascripty, nepotřebujete je znovu minifikovat. Proto se může stát, že některý řádek bude vhodnější vyhodit pro lepší optimalizaci rychlosti.

Problém: Nahrál jsem nový .htaccess a nic se na rychlosti nezměnilo.

Rychlost si měřte pomocí toolů uvedených výše. Pouhým okem a se zacachovaným webem si změny nevšimnete. Pokud ani tooly nezaznamenaly změnu, je možné, že vám web běží na Nginx serverech (kódy výše jsou pro Apache). Vyhoďte všechno, co jste 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; } Katarína Novotná

Další články, které by tě mohly zajímat

Které inzerenty u nás najdete?