Het is geen geheim dat lange laadtijden van een website een negatieve invloed hebben op de positie in de SERP’s, de resultaatpagina’s van zoekmachines. Een trage WordPress website is ook uit het oogpunt van gebruiksvriendelijkheid zeer onwenselijk. De gebruikers van jouw website willen nu eenmaal graag zo snel mogelijk naar de gewenste info kunnen gaan om deze te lezen, of om het gewenste product in het winkelwagentje toe te voegen.
Deze lange lijst met vaak voorkomende oorzaken van een trage website en hun oplossingen varieert van eenvoudig tot geavanceerd. Door enkele van deze kleine aanbevolen wijzigingen aan te brengen, kun je al waardevolle seconden besparen op je laadtijden.
Hieronder volgen een aantal oorzaken en oplossingen om je WordPress website sneller te maken:
#Grote foto- en videobestanden
Niet-geoptimaliseerde of zware afbeeldingen en video’s zijn de meest voor de hand liggende elementen van trage WordPress websites. Het laden van deze grote bestanden kan lang duren, het is een redelijke no-brainer om je afbeeldingen te verkleinen en te optimaliseren.
Oplossingen:
- Verwijder al het overbodige: als jouw afbeelding of video alleen maar als decoratie wordt gebruikt, verwijder deze dan voor een behoorlijke besparing van je laadtijd.
- Vermijd een foto slider: Een foto slider of carrousel is een soort diavoorstelling waarbij om de paar seconden een nieuwe banner of foto in beeld komt. Niet alleen voor je laadtijd is een slider slecht, maar ook vanuit een marketing technisch oogpunt: Carrousels horen thuis op de kermis, niet op je website
- Kies de juiste bestandstypen: afbeeldingen moeten worden geconverteerd van PNG en JPEG naar WebP of AVIF. Alle vectorelementen moeten in SVG zijn. Kies MP4’s gecomprimeerd met h264 voor video en gebruik indien mogelijk nooit GIF’s.
- Kies de juiste afmetingen: in WordPress kun je in het dashboard (Media > klik op een afbeelding > Afbeelding bewerken) de afmeting van jouw afbeelding bewerken door deze te verschalen of bij te snijden.
- Gebruik afbeeldingscompressie: Verklein de grootte van je media bestanden efficiënter door overbodigheden te verwijderen terwijl de afbeeldingskwaliteit behouden blijft. Gebruik een afbeeldingsoptimalisatie plugin om je afbeeldingen te optimaliseren (bijv.: Shortpixel of Imagify).
- Lazy load media bestanden: alles wat zich onder ’the fold’ (het bovenste en zichtbare gedeelte van een web pagina) bevindt, moet ‘lazy’ worden geladen. Lazy loading is een optimalisatietechniek waarbij media pas worden geladen als deze zichtbaar wordt in de viewport.
Met een goede afbeelding optimalisatie krijg je vaak al de beste resultaten als het gaat om de laadtijd van je website. Typisch een gevalletje van ‘low hanging fruit’ met significante verbeteringen als het gaat om website optimalisatie.
#Lettertype/font bestanden
De keuze voor een bepaald web font op je website is vaak een ontwerpkeuze, bijvoorbeeld om de huisstijl te volgen. Maar niet-geoptimaliseerde web fonts kunnen flink wat seconden toevoegen aan de laadtijd van het eerste bezoek van jouw website gebruiker.
Oplossingen:
- Vermijd 3rd party web fonts: Alhoewel Google en Adobe web fonts populair zijn, zorgen ook zij voor een trage WordPress website door extra codes (zie Fig.4). Vervang deze web fonts door systeemfonts of door jezelf gehoste web fonts (.woff2) via
@font-facewanneer huisstijl belangrijk is. - Zet de font-display waarde op ‘swap’: deze API instrueert de browser om onmiddellijk een beschikbaar systeemlettertype te gebruiken terwijl jouw font bestanden worden geladen. Op deze manier zie je de tekst zo snel mogelijk en loop je geen risico op een “flash of invisible text (FOIT)”.
@font-face { font-display: swap; } - Probeer variabele lettertypen: Met variabele lettertypen kun je één bestand laden dat meerdere variaties van jouw gewenste lettertype bevat. Dit zorgt voor kleinere bestanden en snellere laadtijden als je meerdere font varianten (dik en cursief) op één pagina nodig hebt.
- Gebruik WOFF2 indelingen: Lettertypen in de WOFF2 indeling kunnen veel beter worden gecomprimeerd dan in de oudere WOFF-indeling. Deze compressie komt overeen met kleinere bestandsgroottes van lettertypen en een snellere laadtijd.
- Preload je web font bestand(en): Met een ‘
preload‘ tag vertel je de browser om alvast jouw specifieke font bestanden in te laden zonder de rest van de weergave van je pagina te blokkeren.<head>
<link rel="preload" href="https://www.jouwdomeinnaam.nl/wp-content/themes/jouwthema/fonts/font.woff2" as="font" type="font/woff2" crossorigin>
</head>
#WordPress plugins en thema’s
Premium WordPress thema’s zijn zo gecodeerd dat ze zoveel mogelijk functionaliteit kunnen bieden. Overtollige codes en scripts (ingesloten CSS/JS frameworks, codes voor alle layout mogelijkheden en voor het aanpassen van het thema) die nodig zijn om het thema te laten werken, leiden ook vaak tot een trage WordPress website.
Als je met WordPress werkt, dan gebruik je ongetwijfeld ook WordPress plugins. Deze tools hebben nut om bijv. meer functionaliteit aan je website toe te voegen (denk aan e-commerce plugins). Maar plugins brengen langere laadtijden voor de benodigde codes e.d. met zich mee, die WordPress websites ook kunnen vertragen.
Tijdens de installatie voegt de plugin zijn instellingen toe aan de database. Hoe meer opties de plugin heeft, of hoe gecompliceerder deze plugin is, hoe meer deze aan je database zal toevoegen. Het is dus eenvoudig om je voor te stellen dat des te meer plugins je gebruikt, des te langer het zal duren voordat je site geladen is.
WordPress gebruikers zouden eens goed moeten kijken om manieren te vinden om de hoeveelheid plugins te verminderen. Te veel geïnstalleerde plugins veroorzaken ook een trage WordPress website. Vier belangrijke punten om naar te kijken als het gaat om het selecteren van hoogwaardige plugins:
- Presteert de plugin goed tijdens complexe aanvragen?
- Laadt de plugin veel inhoud en scripts?
- Verhoogt de plugin het aantal database-aanvragen bij elke paginavraag?
- Doet het aanvragen aan externe API’s?
Oplossingen:
- Kies een goed en snel thema: vermijd grote multi-use premium WordPress thema’s! Meer code t.b.v. thema opties betekent meer kans op conflicten, mogelijke fouten in de werking en daardoor een langere laadtijd van de site. Zoek een niche thema die voldoet aan jouw doeleinden of, nog beter, ga voor een maatwerk WordPress thema!
- Verwijder onnodige plugins: overweeg om plugins die je niet gebruikt te deactiveren en te deleten. Selecteer alleen plugins, afhankelijk van wat je nodig hebt, die precies die functionaliteit toevoegen die jij wilt.
- Zoek kwalitatieve plugins: Bekijk de updatefrequentie of deze plugin wel up-to-date is, check de compatibiliteit van plugin versies met jouw WP versie, etc. Test je pagina’s met en zonder die plugins om er zeker van te zijn dat ze correct en goed werken.
- Test lichtgewicht alternatieven: download en activeer waar mogelijk lichtere alternatieve plugins. Deze plugins zouden vergelijkbare resultaten moeten bieden met een kleinere voetafdruk op de laadtijd.
- Vermijd het gebruik van page builder plugins: gebruik de standaard WP Gutenberg editor. Deze Block editor, die ingebouwd is in WordPress Core, is de snelste pagebuilder als het gaat om laadtijd. Maar ook de HTML codes die Gutenberg aanmaakt zijn kort, semantisch, toegankelijk en goed crawlable.
#Knelpunten in het laadproces
Webpagina’s laden slechts zoveel dingen tegelijk; optimaliseer dat laadproces om prioriteit te geven aan wat als eerste geladen moet worden. Het lazy-loaden van je media bestanden is hier een goed voorbeeld van.
Oplossingen:
- Bied bestanden aan via HTTP/2, HTTP/3 of SPDY: deze overdrachtsprotocollen zijn geavanceerder en sneller dan HTTP/1.1 doordat ze o.a. meer requests toelaten om bestanden parallel te laden.
- Gebruik Cache-headers: Cache-control headers bevatten instructies voor browsers en servers over hoe vaak nieuwe versies van jouw webpagina moeten worden opgehaald. Het voordeel daarvan is dat jouw website veel sneller werkt voor terugkerende bezoekers, omdat bijv. de afbeeldingen niet elke keer opnieuw gedownload hoeven te worden.
#Geen cache geïnstalleerd
Caching is een manier om een webpagina sneller te laten verschijnen. Dat is de korte uitleg, maar uiteraard zit er een heel proces achter het opslaan van cachegegevens.
De cache op website niveau wordt meestal bediend met behulp van een WordPress cache plugin. Deze plugin zorgt ervoor dat er statistische HTML-pagina’s van je website worden gemaakt. Deze HTML-pagina’s kunnen snel aan je bezoekers worden getoond, zodat niet alles opnieuw gedownload hoeft te worden uit de server.
Oplossing:
- Installeer een cache plugin: er zijn een aantal gratis en betaalde WordPress caching plugins om uit te kiezen, installeer en configureer deze plugin en jij en je bezoekers zullen een significant verschil merken in laadtijd.
#Slechte webhosting
Goede webhosting verhoogt de snelheid van je website, maar het zal meer een prijs/kwaliteitsafweging zijn voor de meeste website eigenaren. Websites kunnen traag laden vanwege serverproblemen, een klein werkgeheugen die processen moeilijker laat verlopen, etc., etc. Waarop moet je letten bij het kiezen van goede hosting?
Oplossingen:
- Goede serverkwaliteit: zorg ervoor dat de hostingprovider die je kiest ofwel heel veel dataverkeer aanbiedt of onbeperkte dataverkeer. Controleer met name of hun servers toegewijd zijn en de vereiste hoeveelheid CPU en geheugen hebben voor snellere verwerkingssnelheden.
- PHP geheugenlimiet: Dit is een belangrijk aspect, maar hosting providers melden echter bijna nooit hoeveel PHP geheugen beschikbaar is. Je hebt dit geheugen nodig om de PHP-processen sneller en vlotter te laten verlopen.
- Webruimte/Opslagruimte: Dit staat voor de hoeveelheid ruimte die de bestanden binnen jouw account op de server in beslag mogen nemen. Deze webruimte is inclusief de website bestanden, databases en e-mails die nog op de server staan.
- PHP versie webserver: Heeft jouw host meerdere PHP versies waar jij als klant uit kunt kiezen? WordPress 6 draait nu ook al op PHP versie 8.0, gebruik liever geen versie < 7.4 meer.
- Server-side caching: is er server-cache (bijv. Redis of Varnish) geïnstalleerd op de webserver van je website, of op een externe server die bij je hostingprovider staat?
#Niet-geoptimaliseerde JavaScript bestanden
JavaScript is een scripttaal die in alle browsers wordt ondersteund en waarmee je webpagina’s interactief kan maken, maar die complexiteit gaat gepaard met navenant grote bestandsgroottes. Te veel Javascript bestanden of libraries veroorzaakt ook een trage WordPress website.
Oplossingen:
- Minify je JS bestanden: verwijder overtolligheden en witruimte uit jouw JavaScript bestanden met tools zoals Minifier.
- Comprimeer je JS bestanden: Gzip je JavaScript bestanden om de bestandsgrootte te verkleinen tot wel 90 procent, waardoor je website veel sneller geladen wordt.
- Converteer naar CSS: elke JavaScript code die ook met CSS kan worden uitgevoerd, verdient de voorkeur, omdat CSS sneller wordt uitgevoerd en weergegeven (denk bijv. maar aan CSS animatie).
- Stel het laden van JavaScript code uit: ‘
Defer‘ sommige JS bestanden als hierdoor de pagina er sneller functioneel uitziet en de gebruikerservaring niet belemmert.<script src="demo_defer.js" defer></script>
- Maak gebruik van codesplitsing: deel je JavaScript bestanden op in kleinere bundels, zodat je kritieke JavaScript bestanden vooraf kunt laden en al het andere kunt ‘deferen’.
- Kies voor lichtgewicht JavaScript libraries: gebruik een tool zoals Bundlephobia om de grootte van je JS libraries/bibliotheken te controleren en lichtgewicht alternatieven te vinden.
#Niet-geoptimaliseerde CSS
Niet-geoptimaliseerde CSS krijgt niet altijd evenveel aandacht als JavaScript bestanden. Het is echter net zo belangrijk om stappen te ondernemen om de grootte van je CSS bestanden te verkleinen en dit kan een positieve invloed hebben op je Core Web Vitals scores.
Oplossingen:
- Vermijd CSS frameworks e.d.: Vergeet de Bootstrap, Foundation en Tailwind CSS frameworks maar even. De hoeveelheid aan overbodige codes is aanzienlijk in deze frameworks en de helft ervan wordt waarschijnlijk niet eens gebruikt? Schrijf je eigen CSS stylesheet waarin alle styling van de HTML elementen en animaties van je website staan gedefinieerd.
- Minifyen, comprimeren en cachen: net als bij JavaScript helpen deze technieken de grootte van jouw CSS files te verkleinen, terwijl de cruciale onderdelen sneller worden geladen. De Autoptimize WP plugin is hiervoor een uitstekende keuze.
- Verwijder onnodige CSS: ongebruikte CSS vertraagt het laden van pagina’s en heeft dus weinig tot geen zin. Controleer handmatig of gebruik een tool zoals UnusedCSS.
#3rd Party scripts
3rd Party scripts is code die jij aan jouw eigen website toevoegt en die iemand anders bezit en schrijft. Deze scripts voegen vaak waardevolle functionaliteit toe, maar hebben een negatieve invloed op de prestaties van je website. Het – waar je dat kunt – snijden in deze 3rd Party scripts is een goede manier om de laadsnelheid te verbeteren.
Oplossingen:
- Bekijk de impact: gebruik een tool zoals GTmetrix om te testen hoe scripts van derden de paginasnelheid beïnvloeden. Zodra je het prestatieverschil ziet, komt de vraag of de functionaliteitsvoordelen opwegen tegen de nadelen van de paginasnelheid.
- Zoek naar alternatieven: Misschien kunnen andere 3rd Parties je dezelfde functies bieden die jij nodig hebt? Probeer bijv. Google Analytics uit te schakelen voor een alternatief zoals Plausible of Matomo?
- Stel het laden van 3rd Party scripts uit: Zijn er 3rd Party scripts waarvan het inladen kan worden uitgesteld tot later, omdat ze geen drastische invloed hebben op jouw UX? Door het laden van deze scripts uit te stellen, kunnen de meer kritieke bestanden/bronnen als eerste worden geladen.
Bottomlime
De laadtijd van een trage website staat in de top 3 van ergernissen van internetgebruikers, niemand is gebaat bij een trage WordPress website! Een trage WordPress website betekent dat bezoekers afhaken en naar de concurrent gaan en dat Google jouw website lager waardeert wat resulteert in een lagere ranking in de zoekresultaten.
Er zijn nog veel meer aspecten die lange laadtijden bij websites veroorzaken. Misschien wordt de laadtijd van jouw website ook wel beter beïnvloed door gebruik te maken van een CDN (Content Delivery Network), het limiteren van je WP revisies of simpelweg door de laatste php8.1 versie te installeren?
Is jouw WordPress website niet meer actueel, onoverzichtelijk, vreselijk traag of wil je wijzigingen op jouw huidige website laten doorvoeren? Neem dan gerust contact met mij op en ik ga je helpen.
Deel dit Bericht:
Nog Geen Reacties
Laat een Reactie achter