Onlangs lanceerden we een test om te controleren of een website omzet weglekt. We hebben veel feedback op de testresultaten gehad. Er waren twee onderwerpen die bij bijna alle websites niet goed gingen: de snelheid van de website en de calls to action op de website.
Tja, daar moeten we iets mee. Vind je niet?
Vandaar dit blog.
Waarom zou je je WordPress website sneller maken?
Waarom niet? Sneller is altijd beter 🙂 En dat is niet alleen onze mening hoor, ook bezoekers van je website en zoekmachines denken er zo over.
Zoekmachines, zoals Google, ranken website die snel laden hoger dan website die traag laden. Dat is dus al een belangrijke reden om te zorgen dat je een snelle website hebt.
Een andere belangrijke reden is dat bezoekers enorm ongeduldig zijn. Denk je dat het allemaal wel meevalt? Check the numbers!
Bijna de helft van de bezoekers, 47%, verwacht dat de website binnen 2 seconden laadt.
Als de website niet binnen 4 seconden geladen is, verlaat 1 op de 4 bezoekers je website.
En als je een eCommerce site hebt, is snelheid helemaal van belang: een vertraging van 1 seconde kan de conversie met 7% verlagen en het aantal pageviews met 11%.
Dus ….
Redenen genoeg om te zorgen dat je website binnen 2 seconden laadt. Onderstaande tips gaan je hierbij helpen. En het mooie is … je kunt deze tips zelf uitvoeren, zonder hulp van een developer.
Waar wacht je nog op? Aan de slag!
Hoe kun je de snelheid van je website testen?
Voordat je met de tips aan de slag gaat, is het wel handig om te weten hoe snel jouw website nu eigenlijk laadt. Elke pagina heeft zijn eigen laadtijd. De homepage wordt meestal als graadmeter gebruikt.
Je kunt de snelheid van je website testen met meerdere tools. Wij zijn fan van:
Als je GTmetrix.com gebruik, kun je het beste eerst een gratis account maken. Je hebt dan daarna de mogelijkheid om onder de balk waar je je URL invult, een andere server testlocatie te kiezen. Wij kiezen hier altijd voor Londen, omdat die locatie het meest in de buurt is. Dit heeft invloed op het testresultaat.
Bij tools.pingdom.com kun je zonder in te loggen ook een testlocatie in Europa kiezen.
Test je website voor de zekerheid twee keer achter elkaar, met een tussenpozen van zo’n 15 minuten. Op onze website is caching (zie tip 5) actief. Daardoor laadt de website bij herhaalverzoeken veel sneller dan bij het eerste bezoek. Dit geldt ook voor de websites die je site analyseren op snelheid. In ons geval laadde de website bij de tweede test 2,2 seconden sneller (1,4 seconden) dan bij de eerste test (3,6 seconden).
Tip #1 | Verklein en comprimeer alle afbeeldingen
De meeste websites maken gebruik van afbeeldingen om het verhaal te ondersteunen. Daar staan we volledig achter. Aan die afbeeldingen moet wel enige aandacht besteed worden voordat ze op de website geplaatst worden.
Of je nu een afbeelding van een stockfoto website downloadt, van een fotograaf hebt ontvangen of zelf hebt gemaakt met je telefoon, zo’n afbeelding is al snel minimaal 3MB en zo’n 3500px breed.
Stel dat je 3 afbeeldingen op een pagina hebt staan en je uploadt de afbeeldingen zonder ze eerst te bewerken, dan is de pagina alleen door de afbeeldingen dus al 9MB groot.
En dan zijn dit nog afbeeldingen van 3MB, we komen ze ook regelmatig van 10MB tegen …
WordPress is geen fotobewerkingstool. Wij raden daarom altijd aan om afbeeldingen eerst te bewerken voor je ze uploadt naar de website. Dit zijn de stappen die wij volgen:
1. Bepaal het formaat van de afbeelding
- Full width afbeelding > 2000px breed
- Afbeelding voor in een blog gecentreerd > 800px breed
- Afbeelding voor in een blog naast tekst> 400px breed
2. Verklein de afbeeldingen tot het gewenste formaat
3.Upload ze naar de site tinypng.com
Deze website comprimeert de afbeeldingen zodat ze minder MB’s bevatten. De kwaliteit van de afbeelding blijft verder hetzelfde.
4. Geef de afbeeldingen een goede naam
Zorg dat de naam aansluit bij het onderwerp waar de pagina over gaat. Dit helpt zoekmachines de afbeelding te “lezen”.
5. Upload de afbeeldingen naar de website
Om nog een extra slag te maken, kun je een plugin in je website installeren die nog een keer compressie toepast op de afbeeldingen. Wij gebruiken graag Shortpixel. Deze plugin comprimeert automatisch elke afbeelding die je uploadt, maar je kunt er ook de al eerder geüploade afbeeldingen achteraf nog mee comprimeren.
Andere plugins die automatisch afbeeldingen comprimeren die je uploadt, zijn Imsanity en Smush.
Het zou kunnen zijn dat de tweede compressieronde net te veel is en de kwaliteit van je afbeeldingen minder wordt. Dan kun je deze ronde laten vervallen.
Tip #2 | Plaats video- en/of audiobestanden extern
WordPress heeft de mogelijkheid om video- en audiobestanden rechtstreeks naar de mediabibliotheek te uploaden om ze vervolgens op een pagina of in een bericht te kunnen plaatsen.
Maar dat het kan, betekent niet dat je het ook moet doen …
Video- en audiobestanden zijn nog veel groter dan afbeeldingen. Een korte video is al snel 40MB. Het laden daarvan vertraagt de website enorm.
Het is daarom beter om je video- en audiobestanden extern te plaatsen. Video’s kun je uploaden naar Vimeo of YouTube. Audiobestanden kun je uploaden naar SoundCloud.
WordPress heeft voor zowel SoundCloud als Vimeo en YouTube een ingebouwde embed functie. Dat betekent dat je alleen maar de URL van je video- of audiobestand bij SoundCloud, Vimeo of YouTube hoeft te kopiëren en op een pagina of in een bericht hoeft te plakken. WordPress zet dit dan automatisch om in een video- of audiobestand.
Een andere optie is een screenshot van je video maken en deze linken naar Vimeo of YouTube.
Tip#3 Verwijder onnodige plugins
Het hoeft op zich geen probleem te zijn om veel plugins te gebruiken. Als de plugins van goede kwaliteit zijn, zullen ze voor minimale vertraging zorgen.
Gebruik wel alleen plugins die je écht nodig hebt en verwijder alle plugins die overbodig zijn of die je niet gebruikt. Als je drie plugins gebruikt die alle drie hetzelfde doen, is er een grote kans dat ze elkaar in de weg gaan zitten en voor gedoe zorgen. En gedoe, daar houden we niet van.
Loop je plugins dus eens objectief na en vraag je bij elke plugin af:
- Heb ik deze plugin echt nodig of is het alleen leuk / handig om te hebben?
Plugins die echt nodig zijn, kun je behouden. Overige plugins kun je verwijderen.
- Kan ik het werk dat de plugin doet ook anders oplossen?
Zo ja, los het anders op en verwijder de plugin.
- Is dit de enige plugin die dit werk doet of heb ik meer plugins die hetzelfde doen?
Als er meer plugins zijn die hetzelfde werk doen en de plugins bovenstaande vragen hebben doorstaan, houd er dan één en verwijder de rest.
Als je een plugin verwijdert, laat deze vaak toch nog bepaalde gegevens achter in de database. Bij sommige plugins kun je in de instellingen aangeven dat alle data verwijderd moet worden als je de plugin deactiveert. Het is aan te raden dit te doen (als je zeker weet dat je de plugin niet meer gaat gebruiken) zodat ook de database opgeschoond wordt.
Tip #4 | Schakel pingbacks en trackbacks uit
Pingbacks en trackbacks zorgen ervoor dat je een seintje krijgt als een andere website naar jouw website linkt. Dit gebeurt alleen als de andere website ook een pingback en trackback functionaliteit heeft. In WordPress websites is deze functionaliteit standaard aanwezig.
Stel dat website A een blog plaatst met een link naar website B. Website B krijgt dan een melding dat er op website A een link geplaatst is. Website B gaat vervolgens controleren of website A dat ook echt heeft gedaan. Als de link aangetroffen wordt, is de pingback succesvol.
Deze functionaliteit is op zich hartstikke handig, maar er zijn genoeg andere tools waar je dit ook / beter mee kunt monitoren zoals Google Alerts (gratis) en Ahrefs (betaald).
Doordat jouw website gaat controleren of de andere website echt een linkje geplaatst heeft, wordt de website extra belast. Als er heel veel pingbacks en trackbacks binnen komen, zorgt dat voor vertraging van je website. Daarnaast wordt de functionaliteit ook misbruikt voor DDoS-aanvallen. Het kan dus geen kwaad om deze functie uit te schakelen.
Om de pingbacks en trackbacks uit te schakelen, ga je in het dashboard van je site naar Instellingen > Reacties. De optie ‘sta linkmeldingen van andere blogs toe (pingbacks en trackbacks) op nieuwe artikelen’ staat standaard aan. Zet deze uit en sla je wijzigingen op. Voor alle nieuwe blogs die je vanaf nu plaatst, zul je geen pingbacks of trackbacks meer ontvangen.
Wil je de pingbacks en trackbacks ook voor je bestaande blogberichten uitschakelen? Ga dan naar berichten, selecteer alle berichten, kies bij acties voor “Bewerken” en klik op uitvoeren.
Je kunt nu de optie pingbacks op “niet toestaan” zetten en de wijzigingen opslaan. Als je berichtenoverzicht uit meerdere pagina’s bestaat, zul je dit voor elke pagina met berichten moeten doen.
Tip #5 | Schakel caching in
WordPress maakt gebruik van een database om alle informatie op te slaan. Al jouw instellingen, pagina’s, berichten, etc. worden in deze database opgeslagen. Iedere keer als een bezoeker op jouw website komt, moet de informatie van die pagina opgehaald worden uit de database. Dit kost tijd. Door gebruik te maken van caching kun je dit proces versnellen.
Wat doet caching?
Caching zorgt ervoor dat een pagina opgeslagen wordt in een statisch bestand. Als een bezoeker op jouw site komt, wordt dit bestand uit de cache gehaald en getoond. Hierdoor hoeft de database niet of minder benaderd te worden. Dit maakt in veel gevallen jouw website een stuk sneller.
Voor WordPress zijn een aantal plugins verkrijgbaar waarmee je een cache kunt activeren. Er zijn zowel gratis plugins als betaalde (premium) versies. Via WordPress.org kun je een aantal van deze plugins installeren.
WP Super Cache is een plugin die gemaakt wordt door Automattic, het bedrijf achter WordPress. Deze plugin is vrij makkelijk te installeren en te configureren. De plugin geeft een aantal aangeraden instellingen aan die je kunt activeren.
Afhankelijk van jouw hostingpakket loont het de moeite om daarnaast via FTP nog wat wijzigingen te maken om nog meer snelheid te krijgen. (Maar dat is stiekem toch iets voor een developers, oeps :-D)
W3 Total Cache is een plugin die al wat jaren bestaat. Installatie is makkelijk, alleen de configuratie kan voor sommige mensen wat lastig zijn, omdat het nogal wat instellingen heeft en ook een klein beetje technische kennis vereist. Deze plugin gaat wel een stukje verder qua implementatie dan WP Super Cache en kan jouw site behoorlijk versnellen als je de juiste instellingen hebt.
WP Fastest Cache is een 3e optie om te proberen. Deze plugin zit qua gebruiksgemak tussen de 2 voorgaande plugins in. De instellingen zijn redelijk makkelijk. Een aantal instellingen zijn alleen beschikbaar als je de premium versie aanschaft.
WP Rocket is een betaalde plugin. Qua mogelijkheden en resultaten is dit in veel gevallen de beste keus. De plugin geeft je veel mogelijkheden en biedt optimalisatie van Google Fonts. Je kan deze plugin overigens 14 dagen proberen. Bevalt hij niet, dan krijg je jouw aankoopbedrag weer terug.
Om nu te zeggen “die moet je hebben” is wat lastig. Bij het ene hostingpakket haal je met de ene plugin hele goede resultaten, terwijl ergens anders een andere plugin weer beter uit de voeten bent. Sommige hostingproviders bieden in hun controle paneel ook al cache functionaliteit aan die deze plugins kunnen aanvullen. Het is dus een kwestie van er een proberen en testen welke invloed het op de snelheid van je website heeft. WP Super Cache is de meest eenvoudige om mee te beginnen.
Tip #6 | Gebruik PHP versie 7.0 of hoger
PHP is een programmeertaal die voornamelijk gebruikt wordt voor webontwikkeling. De basis van WordPress is voor het grootste deel in deze PHP programmeertaal geschreven.
Er zijn verschillende versies van PHP beschikbaar. Versie 7.3 is de meest recente. Veel WordPress websites draaien echter nog op Versie 5.2 of 5.6. Alle versies voor 5.6 worden niet meer ondersteund. Eventuele zwaktes in die versies worden dus niet meer bijgewerkt. Gebruik daarom minimaal versie 5.6. Nog beter is het om minimaal versie 7.0 te gebruiken. Alleen al het upgraden naar minimaal versie 7.0 zal er voor zorgen dat je site sneller wordt.
Wat jij nu precies moet doen? WordPress heeft sinds kort een nieuwe functie, de sitediagnose. Je vindt deze onder Extra > Sitediagnose. Ga naar het tabblad Info (bovenaan) en open het blokje Server. Daar vind je de PHP versie waar jouw website momenteel op draait.
Mocht de PHP versie lager dan versie 7.0 zijn, stuur dan een mailtje naar je hostingpartij om te vragen of het mogelijk is de PHP versie te updaten naar de meest actuele PHP versie. De meeste thema’s en plugins draaien al goed op versie 7.0. Controleer voor de zekerheid na de upgrade wel of je website nog steeds goed werkt.
Tip #7 | Beperk externe scripts
Er zijn ontzettend veel externe tools die je aan je website kunt koppelen. Dit gebeurt vaak door een stukje script aan je website toe te voegen. Op die manier kan je website communiceren met de externe tool. Om het iets concreter te maken een aantal voorbeelden:
- Twitter, Facebook en Instagram feeds
- Retargeting pixels van Facebook en LinkedIn
- Uitbreiding van de reactie mogelijkheid met Jetpack, Facebook comments of Disqus
- Google Analytics om statistieken te verzamelen
- Hotjar om het gedrag van je bezoekers te analyseren
- A/B testing tools zoals Optimizely en VWO
En zo kunnen we nog wel even doorgaan. We zeggen niet dat deze tools slechts zijn, maar ze kunnen wel voor flinke vertraging van je website zorgen. Denk dus goed na over of je al deze tools echt nodig hebt en probeer het gebruik tot een minimum te beperken.
De scripts van de tools die je wel wilt blijven gebruiken, kun je het beste via Google Tag Manager (GTM) plaatsen. Op die manier heb je alle scripts op één plek bij elkaar staan en kun je ze makkelijk beheren. Doordat de scripts via GTM op je website geplaatst worden, hoeft er nu alleen maar contact gemaakt te worden met het script van GTM in plaats van met alle losse scripts. Ook dat scheelt weer tijd.
Tip #8 | Minimaliseer JS en CSS bestanden
In CSS-bestanden staat code die de vormgeving van je website regelt. In JavaScript-bestanden (JS) staat code die bepaalde functionaliteit op je website regelt. Deze bestanden zijn vaak erg groot waardoor het even kan duren voor ze geladen zijn.
Om het laden van de CSS- en JavaScript bestanden te versnellen, kun je ze optimaliseren. Om dat handmatig te doen, heb je toch development skills nodig. Gelukkig zijn er ook plugins die je kunnen helpen zoals Autoptimize en Fast Velocity Minify. Deze plugins (1 is genoeg) helpen je de CSS- en JavaScript bestanden te optimaliseren, combineren en in een goede volgorde te laten. Dit komt de snelheid van je website ten goede.
Beide plugins werken goed met caching plugins samen. Gebruik je W3 Total Cache als caching plugin? Dan is een minify plugin niet meer nodig omdat W3 Total Cache dit al doet.
Sommige thema’s hebben ook al een soortgelijke minify functie ingebouwd. Het is dus goed vooraf wel enig onderzoek te verrichten of de plugin van toegevoegde waarde kan zijn.
Het kan zijn dat de vormgeving van je website er even gek uitziet nadat je de plugin geïnstalleerd hebt. Het legen van de cache lost dit probleem meestal op. Controleer na het instellen van een caching of andere optimalisatie plugin altijd de opmaak van je website.
Tip #9 | Optimaliseer je database
Aan je website is een database gekoppeld. In die database wordt van alles opgeslagen, zoals:
- de instellingen van WordPress, het thema en de plugins
- de tekst van de berichten en pagina’s
- de revisies van alle berichten en pagina’s die automatisch gemaakt worden terwijl je aan het schrijven bent
- (spam)reacties op berichten
De database kan snel vervuild raken met data die erin staat, maar niet gebruikt wordt. Om te zorgen dat de database geen vertragende factor wordt, is het goed om deze regelmatig op te schonen. Dit kan handmatig, maar dat kost veel tijd en het is erg foutgevoelig. Het uitbesteden aan een plugin is sneller en veiliger.
De plugin die je hiervoor kunt gebruiken is WP-Optimize. De WP Rocket plugin die we bij tip 5 noemden, heeft ook een database optimalisatie optie. Als je het aantal plugins wilt beperken, is dit een zeer goede (betaalde) plugin die je kunt gebruiken voor zowel caching als database optimalisatie.
Maak voordat je met database optimalisatie aan de slag gaat altijd eerst een back-up van je website. Mocht er iets te enthousiast geoptimaliseerd worden, dan kun je altijd je back-up terugzetten 🙂
DOE EEN 0-TEST
Je weet nu dat het belangrijk is om een snelle website te hebben, omdat deze beter rankt in de zoekmachines en voor betere conversies zorgt.
Je kunt nu ook zelf je WordPress website sneller maken zonder hulp van een developer. Test voordat je begint met het doorvoeren van de verbeteringen je website in GTmetrix.com of tools.pingdom.com om de huidige snelheid te berekenen. Voer de test na elke wijziging die je hebt doorgevoerd nogmaals uit om de wijzigingen een positieve invloed op de snelheid heeft.
Goed verhaal, maar kan ik dit niet toch gewoon aan jullie uitbesteden?
Ja, dat kan.
Hoe dan?
Stuur een mail naar info@burostaal.nl, dan vertellen we je er meer over.
