Inhoudsopgave
Laatste update op 13 februari 2024 door: Ricardo Verboom
Vorige week deed ik maar weer eens een pagespeed insights testje voor ricardoverboom.nl en ik schrok mij rot! De snelheid was zo laag, dat er voor zowel mobiel, als desktop erg slecht werd gescoord. Hoogste tijd dus om mijn WordPress website sneller te maken!
Ik ben in eerste instantie begonnen om de oorzaak te vinden en dat bleken er meerdere te zijn! Nadat ik 2 dagen bezig ben geweest om het op te lossen (zonder bevredigend resultaat), ben ik gaan nadenken over hoe ik het toch kon fixen.
Het grootste nadeel was, dat mijn website erg vertraagd werd door een tweetal plugins die ik toch wel erg veel gebruik. Namelijk, Elementor en Elementor PRO. Dit was toch wel een probleempje, omdat je die niet zomaar kunt uitzetten, doordat het design van mijn website gemaakt is met deze plugins.
Mijn eigen WordPress website sneller maken
Ondanks de bovengenoemde plugins, wilde ik toch echt mijn WordPress website sneller maken. Dit is niet alleen fijner voor de bezoekers, maar het biedt ook grote voordelen op SEO-technisch gebied.
Genoeg reden dus om niet op te geven en er ook daadwerkelijk werk van te maken. Nu kwam natuurlijk de grootste uitdaging, “hoe ga ik dit aanpakken?”.
Elementor en Elementor PRO uitschakelen
Meten is weten, dus ik schakelde beide plugins uit en wonder boven wonder gaf Pagespeed Insights direct hogere scores voor zowel mobiel als desktop. Dat was even schrikken en natuurlijk zag het design er niet meer uit, maar natuurlijk was het stof tot nadenken!
Nog een laatste poging om het via een omweg op te lossen
Beide plugins weer ingeschakeld en een aantal plugins geïnstalleerd om de website sneller te maken. Ik had natuurlijk al een paar van dit soort plugins en mijn website scoorde eerder wel goed, dus als een soort test heb ik een aantal nieuwe plugins geïnstalleerd.
Helaas bleven de scores teleurstellend en aangezien mijn website voorzien was van alles om hem zo snel mogelijk te maken, werd het tijd om orde op zaken te stellen.
De mogelijke oorzaak
Er zijn verschillende mogelijke oorzaken, maar ik wist dus dat Elementor mijn website vertraagde. En dat terwijl hij voorheen toch goed scoorde, wat ook kwam doordat hij geoptimaliseerd was voor Elementor. Er werd onder andere gebruik gemaakt van een speciaal Elementor theme “Hello Theme”. Daar lag het dus niet aan.
Na lang het internet afstruinen, kwam ik erachter dat meer website-eigenaren dezelfde klachten hadden en die gaven aan dat het mogelijk met updates te maken had.
Hoe ik er uiteindelijk in slaagde om mijn WordPress website te versnellen
Oké, dit stukje is vrij technisch en hoewel ik probeer om het eenvoudig te houden, raad ik je aan om door de scrollen als je geen zin hebt in een technisch verhaal.
Ik ben begonnen met het uitschakelen van Elementor en Elementor PRO, maar uiteraard zag daarna het design er niet meer uit en moest er een oplossing komen. En dan natuurlijk een oplossing, zonder deze plugins.
Dan zou je denken, “er zijn toch meer webbuilders?”. Maar ik zocht meer een oplossing voor de lange termijn en ik wist dat het best een pittig klusje zou kon gaan worden en ook dat ik er geen zin in heb om dit over een jaar weer opnieuw te doen!
Een oplossing voor het design
Allereerst moest het design wel gefixt worden, en hierdoor ben ik eerst op zoek gegaan naar een theme. Het moest een theme worden, dat er goed uit zou zien en met een schone code. Na een tijdje zoeken kwam ik onder andere GeneratePress tegen.
Dit theme heb ik eerder met veel succes gebruikt voor verschillende websites en ik haalde er altijd goede SEO resultaten mee! Dit is natuurlijk ook belangrijk!
GeneratePress heeft een gratis versie en een betaalde versie. Het verschil is, dat je bij de betaalde versie meer kleuren kunt kiezen en gebruik kunt maken van een pagebuilder. En ik hoor je al denken, “pagebuilder?!”. Maar het is geen pagebuilder zoals Elementor. Het maakt namelijk alleen gebruik van het WordPress framework en dit wil dus zeggen dat GeneratePress eigenlijk ook een framework is, met een basic theme zoals de standaard WordPress themes.
Met andere woorden, je moet het design zelf naar je eigen zin maken en je ontkomt er niet aan dat je zelf met HTML/CSS aan de slag moet.
Een oplossing voor de snelheid
Het design moest dus nog gemaakt worden, maar hoe zit het dan met de snelheid? Het antwoord hierop is kort en krachtig, testen, testen, testen en nog eens testen!
Ik ben aan het design begonnen en ben voor een less=more benadering gegaan. Bij elke aanpassing heb ik een test uitgevoerd via pagespeed insights, om te kunnen zien of de boel niet weer langzaam werd door mijn aanpassingen.
Gek genoeg werkte het allemaal prima en was het snelheid probleem hiermee opgelost, maar ik wilde het nog sneller! Weer met een simpele test kwam ik erachter dat het uitschakelen van overtollige plugins een positief effect had op de snelheid. Ik heb dus nog wat overtollige plugins uitgeschakeld (minder code, minder laadtijd).
Het resultaat
Het resultaat was een snelle website, die weer klaar is voor de toekomst. En zonder dat ik weer helemaal terug moest naar puur HTML/CSS (ik heb namelijk overwogen om WordPress in zijn geheel te verwijderen, maar ik vind de functionaliteit toch wel erg fijn).
Tips om je WordPress snelheid te verbeteren
Genoeg over mijn website, ik ga je nu wat tips & tricks geven om jouw eigen WordPress website sneller te maken.
Snelheid meten
Meten is het allerbelangrijkste, voordat je aan de slag gaat is het goed om te weten of het überhaupt wel nodig is om je WordPress website te versnellen. Voor het meten van de snelheid en andere factoren is er een heel erg handige en GRATIS tool beschikbaar.
Google maar eens op Pagespeed Insights. Dit is een tool die Google gratis beschikbaar heeft gesteld voor websitebouwers en eigenaren. Het enige dat je hoeft te doen, is jouw URL in te vullen en op “analyseren” te klikken. Vervolgens zie je de score van jouw website met daaronder 3 kleuren, deze kleuren laten zien hoe goed websites functioneren op basis van snelheid. Rood = slecht – Oranje = gemiddeld – Groen = Heel goed!
Er kan altijd wel iets verbeterd worden, maar wanneer de score groen is dan hoef je weinig aan te passen. Is de score oranje of zelfs rood? Dan kan het zeker geen kwaad om aanpassingen te doen.
Meten geeft veel informatie
Bij de meeste WordPress websites zijn een paar kleine aanpassingen al voldoende. Google Pagespeed Insights geeft je zelfs informatie over wat er mis gaat en welke verbeteringen er toegepast zouden kunnen worden.
Veel voorkomende meldingen zijn “Above the fold, Browsercaching, Het laden van lettertypen”. En het mooiste is dat deze meldingen over het algemeen opgelost kunnen worden met simpele plugins. Hier kom ik verder in dit bericht op terug.
Laadtijd van een WordPress website direct verbeteren
Voordat we plugins gaan installeren kunnen we al wat simpele stappen nemen om de laadtijd van een WordPress website te verbeteren. Het begint bij plugins die je niet gebruikt.
Inactieve plugins deactiveren/verwijderen
Dit klinkt eng he? Gelukkig is dat het niet. Veel WordPress websites bevatten plugins die niet of nauwelijks gebruikt worden. Het is algemeen bekend, dat plugins websites langzamer kunnen maken. Dit komt vaak, doordat een server veel meer werk moet verrichten om een website met veel plugins te openen, dan een website zonder plugins.
Deactiveer en verwijder daarom plugins die je niet gebruikt en doe hierna nog eens een test via Pagespeed Insights. Is de score al omhoog gegaan?
Media controleren
Websites bestaan tegenwoordig grotendeels uit visuele content (plaatjes/video’s etc). Dit soort content ziet er vaak erg gelikt uit en maakt een website vaak mooier. Het nadeel is alleen, dat bijvoorbeeld plaatjes vaak erg groot kunnen zijn en hierdoor wordt de laadtijd vaak ook langzamer.
De laadtijd van een WordPress website kun je vaak ook verbeteren door plaatjes te verkleinen. Dit kun je met de hand doen, maar wanneer je veel plaatjes hebt, kan een plugin uitkomst bieden. Hier kom ik later in dit bericht op terug.
Webhosting
Nu komt er een hele leuke. Vaak wordt er gebruik gemaakt van goedkope shared webhosting. Niets mis mee, alleen kan het hierdoor ook zijn dat de laadtijden trager zijn. Op shared webhosting staan namelijk meerdere websites, die samen de capaciteiten delen.
Overweeg om je webhosting te upgraden, vooral wanneer je middelgrote website of webshop runt. Het beste is voor het MKB vaak een VPS, dit hoeft niet eens zo heel duur te zijn, maar je weet wel dat je verzekerd bent van voldoende snelheid! Ook bestaan er speciale , die zijn speciaal samengesteld voor WordPress websites.
Pagebuilders
Pagebuilders zijn erg handig om het design van je website aan te passen en zo dus een mooie website te creëren. Het nadeel van pagebuilders is dat ze websites ernstig kunnen vertragen en hierdoor kunnen zorgen voor een lage pagespeed insights score.
Je kunt ervoor kiezen om pagebuilders uit te schakelen, alleen zal je design dan in de meeste gevallen wel verloren gaan. Ik begrijp goed dat het niet voor iedereen even makkelijk zal zijn om zelf het design te doen zonder pagebuilder. Je kunt altijd vragen aan een bedrijf om je ermee te helpen en dit hoeft echt niet altijd duur te zijn.
WordPress website versnellen met plugins
Met de juiste plugins kun je een WordPress website sneller maken, maar er zijn wel een aantal dingen waarop je moet letten alvorens je aan de haal gaat met plugins.
Hierboven gaf ik al aan dat meten het belangrijkste is en dit is ook weer belangrijk voordat je een plugin gaat installeren. Het is belangrijk, dat je een plugin zoekt die probleemgerichte oplossingen biedt.
Geeft Google Pagespeed Insights bijvoorbeeld aan, dat er gecached moet worden om je website sneller te maken? Ga dan doelgericht te werk en installeer een caching plugin. En ga zo maar door.
Plugins die vrijwel altijd helpen met het verbeteren van de laadtijd van WordPress websites
WP supercache: WP supercache is een lichtgewicht plugin die browsercaching activeert op WordPress websites. Browsercaching zorgt ervoor dat kleine gedeeltes van een website worden opgeslagen op de browser van bezoekers. Dit verkleint de laadtijd en zorgt voor een betere gebruikservaring. Na het installeren en activeren van deze plugin, moet je naar de plugin-instellingen om browsercaching te activeren.
Deze plugin biedt naast browsercaching nog meer opties, maar ik zou hem zelf uitsluitend gebruiken voor het cachen.
Fast Velocity Minify: Fast Velocity Minify is een zeer krachtige plugin, die ik op elke website standaard installeer. Ongeacht of het nu gaat om eigen websites of websites van klanten, deze mag wat mij betreft niet ontbreken.
Met Fast Velocity Minify kun je een stuk verder gaan dan alleen cachen. Deze plugin biedt vrijwel alle opties om de meest bekende verbeteringspunten (van pagespeed insights) aan te pakken. Na het installeren en activeren, kun je de instellingen aanpassen. Probeer het eerst met de standaard instellingen en test de score na het installeren met pagespeed insights. Geeft Google na het installeren nog verbeterpunten? Grote kans, dat je ze via het instellingen-menu met deze plugin kunt aanpakken!
Een aantal opties die deze plugin biedt:
CSS verkleinen, JS verkleinen, HTML verkleinen, problemen met Google Fonts oplossen en nog veel meer!
Let op: Dit is een zeer geavanceerde plugin, ga daarom niet zomaar aan de slag met de instellingen. Deze kunnen namelijk ook je website beschadigen!
Enable Gzip compression: De is de laatste plugin die ik zou aanraden om de laadtijd van WordPress websites te verbeteren. Gzip compression zorgt ervoor dat grotere bestanden als het ware wordt ingepakt.
Je kent het vast wel van wanneer je iets gaat downloaden. Grotere bestanden of mappen worden dan meestal ingepakt in een .ZIP of .RAR-bestandje. Dit doet Gzip compression ook en door dit te doen hoeven browsers alleen nog maar kleinere bestanden te laden. Dit zorgt weer voor een snellere laadtijd!
Met de Enable Gzip compression plugin, hoe je alleen na het installeren en activeren op “enable GZIP” te klikken. Gzip is dan geactiveerd.
Hopelijk heb ik je een stukje op weg geholpen met deze tips & tricks. Ik wil er wel bij zeggen dat het niet in alle gevallen werkt, net zoals dat dit ook het geval was bij ricardoverboom.nl. Ik koos er uiteindelijk voor om heel de website op de schop te nemen.
Reacties zijn gesloten.