V dnešnej dobe nestačí mať len perfektný dizajn webstránky, vyšperkované animácie a kľúčový obsah. Vlastník webstránky musí vedieť, že spoločnosť Google používa algoritmus, v ktorom je rýchlosť načítania webstránky jeden z dôležitých faktorov, ktoré ovplyvňujú pozíciu stránky vo výsledkoch vyhľadávania.

Podľa spoločnosti Adobe až 39% ľudí zatvorí webové stránky, ak ich zobrazenie trvá príliš dlho. Čo z toho vyplýva? Ak trvá načítanie vášho webu užívateľovi alebo samotnému Google-u nadpriemerne dlho (viac než 3 sekundy), Google odzrkadľuje túto skutočnosť, bohužiaľ, negatívne vo výsledkoch vyhľadávania. Je teda dôležité, aby ste váš web zrýchlili.

Techník existuje mnoho. V nasledujúcich riadkoch si ukážeme, ako jednoducho optimalizovať a zlepšiť rýchlosť načítania WordPress webstránky (ale aj iných) pomocou .htaccess optimalizácie bez veľkého úsilia.

Čo je .htaccess?

.htaccess je konfiguračný súbor, ktorý používa Apache web server a nachádza sa v tzv. root directory, teda v koreňovom adresári webstránky. Umožňuje ovládať konkrétny adresár/priečinok alebo časť servera/adresárov, ktorá je v ňom špecifikovaná. Pomocou súboru .htaccess dokážeme zmeniť konfiguráciu web serveru (Apache) a zapnúť, resp. vypnúť niektoré jeho súčasti. Môžeme napríklad:

  • optimalizovať rýchlosť webstránok,
  • skrátiť čas načítania webstránky,
  • zaheslovať adresáre,
  • blokovať vybrané IP adresy
  • a mnoho ďalších.

Kde sa nachádza .htaccess vo WordPress inštalácii?

Súbor .htaccess by sa mal nachádzať v koreňovom adresári vašej inštalácie WordPress. Súbor .htaccess začína bodkou (.), ktorá napovedá, že ide o skrytý súbor. Preto na ňu nezabudnite, ak súbor nevidíte vo vašom FTP klientovi “show hidden files” (zobraziť skryté súbory).

Prečo nemôžem nájsť .htaccess súbor?

V prípade, ak neviete nájsť .htaccess súbor WordPress webstránky, je možné, že súbor nie je vygenerovaný. Na overenie stačí, ak vo WordPress admine pregenerujete trvalé odkazy (permalinks) v podstránke Nastavenie → Trvalé odkazy.

Ak tento krok nepomôže, mali by ste skontrolovať oprávnenia na zápis súborov vo vašom koreňovom adresári WordPress inštalácie.

Optimalizácia .htaccess

1.Kompresia

Jednoducho povedané, kompresia (compression) zmenší veľkosť výstupného dokumentu. Táto metóda je najviac efektívna pre optimalizáciu prenosov HTML, CSS, JS a XML súborov. Vo všeobecnosti kompresia zredukuje veľkosť týchto súborov na ceste ku klientovi o 60 – 80% pôvodnej veľkosti. Táto zmena, samozrejme, zredukuje aj čas odozvy webstránky a objem prenášaných dát, ktoré musí váš webserver poslať vašim návštevníkom.

“Kompresia zredukuje veľkosť vybraných súborov o 60 – 80% pôvodnej veľkosti.”

Najlepšie ako povoliť kompresiu je pomocou mod _ gzip alebo mod_deflate modulu pre Apache webserver. Oba moduly robia prakticky to isté – kompresiu dát, pričom mod_deflate má lepšiu podporu a dokumentáciu a je jednoduchší na konfiguráciu. Ak mod_deflate nefunguje na vašom webhostingu, samozrejme, môžete použiť aj mod_gzip. Obe kompresné metódy vyžadujú pridanie vlastného kódu do .htaccess súboru.

mod_deflate

[code]# BEGIN DEFLATE COMPRESSION
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>
# END DEFLATE COMPRESSION[/code]

mod_gzip

[code]# BEGIN GZIP COMPRESSION
<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>
# END GZIP COMPRESSION[/code]


2. Ukladanie do vyrovnávacej pamäte prehliadača

Tým, že nastavíte ukladanie do vyrovnávacej pamäte prehliadača, poviete prehliadaču vášho návštevníka, aby uchoval vybrané súbory na určitú dobu v lokálnej pamäti (vyrovnávacej pamäti). Keď je súbor znova potrebný (napríklad logo webstránky), prehliadač súbor načíta zo svojej lokálnej jednotky (pamäte) namiesto toho, aby ho znova sťahoval z webservera WordPress stránky.

“Ukladanie vybraných súborov do vyrovnávacej pamäti je veľmi dôležitým krokom k optimalizácii rýchlosti WordPress webstránky.”

Na tento účel môžeme použiť dva moduly Apache webservera – mod_expires a mod_headers. Obe metódy je možné nastaviť pomocou .htccess súboru:

mod_expires

[code]#BEGIN EXPIRES HEADERS
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default expiration: 1 hour after request
ExpiresDefault “now plus 1 hour”
# CSS and JS expiration: 1 week after request
ExpiresByType text/css “now plus 1 week”
ExpiresByType application/javascript “now plus 1 week”
ExpiresByType application/x-javascript “now plus 1 week”
# Image files expiration: 1 month after request
ExpiresByType image/bmp “now plus 1 month”
ExpiresByType image/gif “now plus 1 month”
ExpiresByType image/jpeg “now plus 1 month”
ExpiresByType image/jp2 “now plus 1 month”
ExpiresByType image/pipeg “now plus 1 month”
ExpiresByType image/png “now plus 1 month”
ExpiresByType image/svg+xml “now plus 1 month”
ExpiresByType image/tiff “now plus 1 month”
ExpiresByType image/vnd.microsoft.icon “now plus 1 month”
ExpiresByType image/x-icon “now plus 1 month”
ExpiresByType image/ico “now plus 1 month”
ExpiresByType image/icon “now plus 1 month”
ExpiresByType text/ico “now plus 1 month”
ExpiresByType application/ico “now plus 1 month”
# Webfonts
ExpiresByType font/truetype “access plus 1 month”
ExpiresByType font/opentype “access plus 1 month”
ExpiresByType application/x-font-woff “access plus 1 month”
ExpiresByType image/svg+xml “access plus 1 month”
ExpiresByType application/vnd.ms-fontobject “access plus 1 month”
</IfModule>
#END EXPIRES HEADERS[/code]

mod_headers

[code]#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[/code]
Pomocou týchto jednoduchých techník budete okamžite pozorovať rýchlostné zlepšenia načítania vašich stránok. Ak by ste napriek tomu potrebovali s optimalizáciou vašej WordPress webstránky pomôcť, neváhajte nás kontaktovať.