| Door: Simon Kloostra. | Categorie: Algemeen.

Top 10 tips voor een snelle Joomla website

Heb je wel eens gemerkt dat je website traag is? Daar moet je beslist wat aan doen: Net als jij hebben je gebruikers een hekel aan trage websites, en ze zouden de site wel eens eerder kunnen verlaten dan dat ze anders zouden doen, wat flink kan schelen in je conversies. Elke site die trager laadt dan 2 seconden loopt dit risico. Ook Google zegt dat de snelheid van je website mede wordt gebruikt voor positie bepaling in de ranglijsten.

Gelukkig hoeft het helemaal niet zo moeilijk te zijn om de snelheid van je site te verbeteren. Je hoort wel eens verhalen dat Joomla traag is, maar dat heeft meestal te maken met slechte set-up of slechte hosting, en aan beide kun je wat doen. Als je weet waar je naar moet kijken moet het mogelijk zijn om de laad snelheid zelfs onder 1 seconde te krijgen.

image03

Voor je direct aan de slag gaat, check voor de zekerheid eerst wat de huidige snelheid van je website is. Er zijn zat online tools beschikbaar die je kunnen helpen om dit vast te stellen. Vaak bieden ze je ook al tips over wat je verder zou kunnen doen ter verbetering:

Nu de huidige snelheid bekent is kunnen we gaan optimaliseren. Wel 1 klein dingetje: Eerst backuppen! Maak vervolgens stap voor stap verbeteringen, en check na elke stap of de site nog netjes functioneert. Indien van toepassing, maak ook je cache leeg tussen de verschillende stappen.

1) Kies een goede webhost

Het kiezen van een goede host is cruciaal. Hoe goed je je site verder ook hebt geoptimaliseerd, enn slechte host kan dit allemaal teniet doen, en je site alsnog traag maken. Check forums en reviews voordat je er een uitkiest. Vermijd gratis hosts, aangezien jer vroeg of laat achter owaarom ze eigenlijk gratis zijn…. Vergelijk ook shared en dedicated paketten. Dedicated betekent meestal sneller, maar is ook duurder.

2) Joomla Cache

Cache houdt in het aanbieden van al gegenereerde inhoud aan je gebruikers. Dit betekent dat de server niet opnieuw alle informatie opnieuw uit de database hoeft te halen elke keer dat een pagina wordt opgevraagd. In plaats daarvan wordt een eerder opgeslagen “view” aan de browser aangeboden (dit betekent dat gebruikers soms even moeten wachten op net nieuwe informatie, tenzij je je cache opschoont). Joomla kan standaard 3 soorten cache aanbieden:

  • Component views
  • Module views
  • Pagina views

De eerste 2 worden bepaald door een instelling in je Algemene instellingen:

image02

Zet de Cache op Conservatiief. Eventueel kun je ook het interval op een andere instelling zetten dan de standaard 15 minuten. Daarnaast kun je eventueel per module caching uitschakelen in de gevanaceerde instelling van die module.
Pagina views worden alleen gecached als je de System - Cache plugin in de Plugin Manager activeert:

image01

Activeer hem alleen, en laat de standaard instellingen staan. Wees je er van bewust dat cache ook vaak problemen kan veroorzaken, vooral met wat meer dynamische functies als contact-formulieren, captcha’s, email cloacking, etc.

Er zijn een paar extensies die met zaken rondom cache erg handig kunnen zijn:

3) G-Zip

In de Algemene instellingen, op het Server tabje vind je de instelling om G-Zip aan te zetten:

image00

Met G-zip aan worden je pagina’s als het ware ingepakt in een zip-file, naar je browser gestuurd, en daar weer uitgepakt. Behalve erg oude versie van IE ondersteunen alle browsers dit, en je kunt het dus zonder problemen aanzetten.

Nadat je het hebt aangezet is het goed om te checken of het ook echt werkt. Met dit tooltje kun je checken wat de compressie van je bestanden is: www.feedthebot.com/tools/gzip.
Vaak zul je zien de compressie 50-70% is!

Mocht het niet werken, check dan even bij je host of ze mod_gzip ondersteunen, of uit hebben staan.

4) Verwijder onnodige extensies

Wees voorzichtig en zuinig met het kiezen van je extensies. Sommige hebben namelijk een vreselijk effect op je snelheid:

  • Social media scripts zoals tellertjes voor likes and tweets. Ze hebben vaak extra Javascript nodig, en ze moeten een connectie maken naar de servers van Facebook, Twitter, Google+ etc..
  • Grote sliders en image shows. Alle (grote) plaatjes moeten vaak eerst worden ingeladen, zonder dat je ze gelijk ziet, naast het Javascript om dit aan te sturen.
  • Ook scripts zoals Google Analytics, Google Webfonts, etc. kunnen je website sterker vertragen dan je zou denken...

Zelfs als je denkt dat je al deze zaken echt nodig hebt, probeer een aantal ervan dan bv niet direct op de home-pagina te tonen, maar op een contact- of portfolio pagina. Dan is de eerste indruk van je site in ieder geval een sneller ladende home-page.

5) Browser caching in .htaccess

Aangenomen dat je je htaccess.txt file hebt hernoemd naar .htaccess kan je het gebruiken om wat code toe te voegen waarmee je de browser instrueert om bepaalde bestandstypen niet opnieuw van de server te halen als ze al op je PC staan. Zeker voor plaatjes kan dit behoorlijk at bandbreedte schelen. Een voorbeeld van hoe zo’n stukje code er uit kan zien is het volgende:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType etc, etc.
</IfModule>

Check eventueel dit artikel voor wat meer geavanceerde mogelijkheden met .htaccess.

6) Optimaliseer je plaatjes

Plaatjes zijn vaak verantwoordelijk voor het grootste deel van de kB’s van je website, dus elke verbetering hiervan is meegenomen. Erg belangrijk is het gebruik van plaatjes van de correct dimensies (dus niet hoekje oppakken en kleiner maken in je editor, maar al verkleind uploaden). Daarnaast kan de grootte van afbeeldingen vaak dramatisch verkleind worden met tooltjes die onnodige bytes strippen waarvan je het bestaan niet eens wist. De Photoshop functie Save for Web and Devices stript bv wel het nodige, maar lang niet alles. De grootte kan daarna soms met nog wel 75% verkleind worden zonder enig visueel kwaliteits verlies! Een paar handige tooltjes hiervoor zijn:

  • TinyPNG.com Alleen voor png, maar daar is het dan ook extreem goed in
  • Smush.it
  • Als je dit soort acties vaak in bulk doet kun je ook naar desktop tooltjes kijken als PNGGauntlet (png) en RIOT (jpg).

Gevorderde gebruikers kunnen daarnaast technieken als image sprites en Base64 encoding gebruiken.

7) Gebruik een CDN

Met een Content Delivery Network worden je statische bestanden niet meer direct bij je host opgehaald, maar van een netwerk van servers van de CDN provider. Deze servers staan op vele locaties over de hele wereld.
Dit zorgt ervoor dat gebruikers in andere landen hun statische bestanden van een locatie in de buurt opgediend krijgen.
Bestanden die wel vaak wijzigen, zoals de HTML worden wel van de server opgehaald.

Dit klinkt erg ingewikkeld, maar in de praktijk is dit verrassend makkelijk en goedkoop te implementeren.

8) Optimaliseer CSS + Javascript

Tegenwoordig laden moderne sites erg veel CSS en Javascript bestanden. Dit veroorzaakt in eerste instantie een groter aantal kB’s, maar ook zorgt het voor extra HTTP-verzoeken naar de server. Daarnaast kunnen ze het verder laden van je code vertragen doordat ze alvast hun functies aan het uitvoeren zijn. Gelukkig zijn er wel technieken om hier wat aan te doen:

  • Compressie van bestanden door witruimte te verwijderen. Je code wordt wel vrijwel onleesbaar, maar technisch werkt alles nog.
  • Meerdere bestanden in 1 combineren. Dan hoeft er bv maar 1 groot CSS en 1 groot Javascript bestand geladen te worden.
  • Gebruik een defer of async attribuut om executie van Javascript te vertragen tot de pagina geladen is.

Check wel goed of je site goed blijft werken als je hier mee aan de slag gaat, soms moet je bepaalde bestanden uitsluiten omdat anders een functie of extensie niet meer goed werkt.

Nu klinkt dit allemaal wel mooi, maar het klinkt ook knap ingewikkeld. Gedeeltelijk kun dit natuurlijk in je template regelen, maar Joomla zelf laadt ook eigen CSS en Javascript. Gelukkig hebben we hier erg handige extensies voor, nummer 9:

9) Snelheids optimalisatie extensies

Een aantal extensies kunnen erg goed helpen om je site te versnellen. Vooral de punten beschreven bij stap 8 worden aangepakt door deze plugins. Daarnaast bieden ze vaak extra mogelijkheden. Probeer ze zeker uit, je kunt versteld staan van de resultaten! De meest bekende zijn de volgende:

  • JCH-Optimize: Zeer goed voor combineren and compressie van je bestanden. Het biedt ook de mogelijkheid om een defer of async parameter voor Javascript mee te geven. Tenslotte biedt het zelfs de mogelijkheid om sprite images te genereren..
  • JBetolo: Vergelijkbaar met JCH-Optimize, met CDN-support, .htaccess tuning, en zelfs Smush.it support.
  • Yireo ScriptMerge: The gebruikelijke CSS en JS compressie / combinatie mogelijkheden. Extra zijn de opties tot base64-encoding van kleine plaatjes, plus support voor jsmin-binary and WebP.
  • aeSecure: A nieuwe extensie van een franse ontwikkelaar om in de gaten te houden. Vooral een security extensie, maar het biedt ook snelheidsverbeteringen.

10) Optimaliseer voor mobiel gebruik

Zelfs als je site snel laadt op een desktop kan hij op een mobiel apparaat best wel eens traag zijn. De Google Pagespeed check toont zelfs een aparte tab voor mobiele snelheid, dus het toont wel aan hoe belangrijk Google dit vindt. Zelfs met technieken als 4G zijn sites op mobiel vaak trager dan op een desktop.

Een belangrijk iets om op te letten is dan om alleen te laden wat je echt nodig hebt. Verbergen met display:none in je CSS verbergt zaken alleen, maar de zaken die je verbergt worden wel geladen…. Een mogelijkheid om hierop in te spelen is user-agent detection, waarbij je echt kijkt op wat voor device je zit. Als je dan op een mobieltje blijkt te zitten kun je bv een slider uitsluiten van inladen. Met de NoNumber Advanced Module Manager kun je hier bv gebruik van maken.

Klaar? Check opnieuw!

Check nadat je al je optimalisaties de snelheid van je website opnieuw, hopelijk is hij een stuk sneller geworden! Meer informatie over het versnellen van je website vind je op deze links”

© Copyright 2008