Joomla! oldalunk sebessége fontos tényező, hiszen értékes látogatókat veszíthetünk, ha oldalunk betöltése túl sok időt vesz igénybe. A megfelelő sebesség eléréséhez, célszerű csökkentenünk oldalunk méretét valamint a betöltésre kerülő scriptjeink számát.
Oldalunk aktuális betöltési sebességét legegyszerűbben a GTmetrix weboldal segítségével mérhetjük le. Itt különböző tesztelési eszközök (Google PageSpeed, Yahoo Yslow) használatával térképezik fel a weboldalunk, amely végeztével egy besorolást kapunk, az elért edeményeinknek megfelelően. Hiányosság esetén további javaslatok nyújt az oldal, a jobb optimalizáció eléréséhez.
Ez előzőek alapján mielőtt elvégezzük a szükséges alapbeállításokat érdemes lemérnünk az oldalunk jelenlegi sebességét, hogy legyen egy kiindulási alapunk.
1. Gyorsítótárazás bekapcsolása
Lépjünk be a Globális konfiguráció -> Rendszer -> Gyorsítótárazás beállításaiba, majd a válasszuk ki a BE – Konzervatív gyorsítótárazás értéket.
2. Gzip tömörítés bekapcsolása
Lépjünk be a Globális konfiguráció -> Kiszolgáló -> Kiszolgáló beállításaiba, majd itt kapcsoljuk be a Gzip oldaltömörítést az Igen érték kiválasztásával.
3. Oldalgyorsító tár bekapcsolása
Lépjünk be a Bővítmények -> Beépülőmodulok -> Rendszer - Oldal gyorsítótár beépülőmodulba, majd bal oldalon A böngésző gyorsítótárának használatát kapcsoljuk ki a Nem érték kiválasztásával, jobb oldalon pdig az Állapot beállításaiban válasszuk az Engedélyezett értéket.
4. JCH Optimize bővítmény letöltése és telepítése
Joomla! oldalaink gyorsításához manapság már viszonylag sok automatizált bővítmény létezik. Ezek közül az egyik legjobb a JCH Optimize. Maga a beépülőmodul automatikus optimalizációval gyorsítja fel a weboldalad betöltési sebességét, a forrás méretének, valamint a http kérések számának csökkentésével.
A bővítmény beszerzéséhez először is látogassunk el a JCH Optimize oldalára és töltsük le a beépülőmodul ingyenes verzióját (Free), vagy vásároljuk meg a bővített verziót (Pro), végül telepítsük fel az oldalunkra. Megjegyzés: a bővített verzióban további finombeállítások alkalmazhatunk, amelyek az ingyenes verzióban tiltásra kerültek.
5. JCH Optimize – Gyorsítótár lejárati idő beállítása
Lépjünk be a Bővítmények -> Beépülőmodulok -> System - JCH Optimize beépülőmodulba, majd az Alapbeállítások (Basic Options) fülben található Egyéb beállításokban (Utility Settings) találhatjuk meg a Gyorsítótár lejárati idő beállítását (Leverage browser caching).
A Gyorsítótár lejárati idő beállításával csökkenthető a betöltési sebesség avval, hogy meghatározzuk az oldalunkon található egyes oldalelemek (képek, videók, audiók, css, js stb.) betöltési gyakoriságát. Ez a funkció kifejezetten hasznos a visszatérő látogatók esetén, akiknek nem kell állandóan betölteniük azokat az oldalelemket - mint például az oldal logóját - amelyek csak nagyon ritkán változnak.
Bővebb leírás a GTmetrix PageSpeed: Leverage browser caching oldalán.
A gomb megnyomásával a beépülőmodul a következő sorokkal egészíti ki a .htaccess fájlunkat:
## BEGIN EXPIRES CACHING - JCH OPTIMIZE ##
<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType application/x-font-ttf "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"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</IfModule>
## END EXPIRES CACHING - JCH OPTIMIZE ##6. JCH Optimize – CSS és javascript fájlok egyesítése
Lépjünk be a Bővítmények -> Beépülőmodulok -> System - JCH Optimize beépülőmodulba, majd Alapbeállítások (Basic Options) fülbe, ahol a CSS és javascript fájlok egyesítése (Combine CSS and javascript files) beállítás található.
A hat ikon hat előre elkészített konfigurációt tartalmaz. Balról jobbra haladva egyre jobban nő az optimalizáció szintje, de evvel arányosan a lehetséges konfliktusok kockázata is, így célszerű lépésenként egyre nagyobb szintre állítani, majd tesztelni az oldal működését. Az első, amely a legbiztonságosabb, az-az alapértelmezett, amelyen a legtöbb weboldal működik, mivel ez a beállítás nincs hatással a fájlokra/kiterjesztésekre/bővítményekre.
Az ingyenes verzóban az Average optimalizációs szintig, a bővített verzióban pedig az Optimum szintig tudjuk állítani az automatikus beállításokat.
Hiba esetén van lehetőség még egy-egy szint finomhangolására, ha a rákattintunk az Automatikus csoportbeállítások (Automatic Setting Group) mezőre. Itt minden esetben egy-egy szint legoptimálisabb beállítását tartalmazza, így ezeket az értékeket, csak akkor módosítsuk, ha ismerjük ezek működését.
7. JCH Optimize – HTML kisebbítési szint
Lépjünk be a Bővítmények -> Beépülőmodulok -> System - JCH Optimize beépülőmodulba, majd az Alapbeállítások (Basic Options) fülben található CSS és javascript fájlok egyesítése (Combine CSS and javascript files) beállításokba, ahol be tudjuk kadni a HTML kisebbetési szintjét (HTML minification level).
Itt a HTML kimenet méretének tömörítési szintjét tudjuk beállítani. Alapesetben 3 beállítás közül választhatunk (Alapvető (Basic), Haladó (Advanced), Ultra), ahol fentről lefelé a legkisebb szintről a legmagasabb szintig tudjuk beállítani a kicsinyítés méretét. Itt is érdemes legkisebb szintről haladni a legmagasabbig, folyamatos tesztelés mellett.
Miután végeztünk a leírásban szereplő beállítások végrehajtásával ellenőrizzük újra a GTmetrix segítségével az oldalunk értékeit, majd hasonlítsük össze a kezdeti pontjainkkal. Ha javulást tapasztalunk, akkor sikerült az oldalunk betöltésének gyorsítása.
Megjegyzés: Egyes Joomla! bővítményekben hibás működést okozhat az összerendezési és tömörítési eljárások magasabb szintű alkalmazása, így célszerű minden esetben tesztelnünk a helyes működést. Ha hibát tapasztalunk, akkor érdemes a 6. pontban található a HTML kisebbetési szintjét (HTML minification level) és/vagy az 5. pontban lévő CSS és javascript fájlok egyesítését (Combine CSS and javascript files) kisebb értéket állítanunk, vagy az Automatikus csoportbeállításokban (Automatic Setting Group) finomhangulnunk az aktuális szintet.
A Joomla! Magyarország weboldala optimalizálás előtt:
A Joomla! Magyarország weboldala optimalizálás után:
A két kép összehasonlítása után jól láthatóak a változások. A PageSpeed értéke 7%-al, a YSlow értéke 8%-al nőt. Az oldal betöltési idő 0.5 másodperccel javult, az oldal mérete ugyan 4 KB-al nőtt, de a kérések számát 39-ről 14-re csökkentettük.
