We beheren verschillende WordPress-sites met diverse soorten content. Nadat we alle frontend SEO-verbeteringen hebben doorgevoerd, richtten we onze aandacht op de snelheid van de website.
Sitesnelheid is, naast andere factoren, een van de belangrijkste rankingfactoren voor Google. Helaas kunnen standaardoplossingen zoals Yoast of slim gebruik van caching de snelheid van je site niet volledig optimaliseren.
Deze tools zijn prima voor een doorsnee websitebouwer en kunnen helpen bij het optimaliseren van je SEO, maar voor echte sitesnelheidoptimalisatie moet je de motor onder de motorkap fijn afstellen.
Je moet echt aan de slag gaan. Hiervoor heb je kennis nodig van hard skill development, en hieronder geven we je een inzicht in hoe wij de snelheid van onze WordPress-sites van een score van 5 naar 70 of 90 hebben gekregen. 100 is de maximale score.
Stap 1: Voer Google Page Speed Uit
Als je zeker weet dat je de meest voorkomende SEO-fouten hebt vermeden, is het tijd om Google Page Speed uit te voeren. Het zal je op een schaal van 1 tot 100 laten zien hoe snel Google denkt dat je WordPress-site is.
Echter, je moet elke URL uploaden naar Google Page Speed na elke wijziging die je aanbrengt, wat erg tijdrovend is. Een meer handige manier om direct je sitesnelheid te controleren wordt aangeboden door Google Chrome in de vorm van Lighthouse.
Moet je streven naar een score van 100 in Google Page Speed?
Het is goed om te weten dat de Google Page Speed-score niet lineair toeneemt/afneemt en niet elk snelheidselement even belangrijk is.
In plaats van lineair, neemt de Google Page Speed-score langzaam toe van 0-30, normaal van 30-90, en vervolgens steeds langzamer van 90 naar 100.
Dit betekent bijvoorbeeld dat het evenveel moeite kost om van 5-10 te komen als om van 40-65 te komen, of om van 99-100 te komen.
Dus richt je niet te veel op het exacte cijfer, vooral in het begin kan veel inspanning niet direct leiden tot een grote toename, en het einde is erg moeilijk te bereiken.
Een score van 95 en hoger zal je een zeer goede en snelle website opleveren.
Hoe lees je de zes statistieken van Google Site Speed
De zes statistieken worden gewogen op basis van hoe belangrijk Google inschat dat gebruikers deze vinden voor hun perceptie van snelheid. Dit is de huidige weging:
(15%) First Contentful Paint
(15%) Speed Index
(25%) Largest Contentful Paint
(15%) Time to Interactive
(25%) Total Blocking Time
(5%) Cumulative Layout Shift
Dit betekent bijvoorbeeld dat als je alleen een probleem oplost dat de score van de Cumulative Layout Shift verhoogt, dit niet veel uitmaakt. Dit betekent dat je je ontwikkelingsfocus en tijd kunt prioriteren op basis van wat het belangrijkst is voor de gebruiker.
Hoe kun je de algemene snelheid van je site controleren?
Waar Google Page Speed specifieke pagina's controleert, kun je ook Google Search Console gebruiken om de algemene prestaties van je site te controleren. Voor een van onze WordPress-sites was dit gemiddeld 1133 milliseconden, wat erg traag is.
Dit is een gemiddelde voor alle pagina's van je site en vertelt je hoe lang een bezoeker gemiddeld moet wachten voordat hij een volledige pagina ziet. We streven altijd naar een score van 60 milliseconden.
Resultaten vóór optimalisatie van de paginasnelheid van een site
Resultaten na optimalisatie van de paginasnelheid van een site
Wat maakt een WordPress-site traag?
WordPress-sites staan bekend om hun lage sitesnelheid, vooral als je veel content op je site hebt. Dit maakt het erg moeilijk om binnen de top 10 van de zoekresultaten te komen. De belangrijkste redenen hiervoor zijn tweeledig.
Belangrijkste redenen waarom je WordPress-site traag kan zijn:
Gebruik van (veel) plugins: WordPress-sites worden vaak gebouwd met veel plugins, waardoor snel (onnodige) functies en content aan de webpagina’s worden toegevoegd, wat de rendering vertraagt.
Niet-geoptimaliseerde databasestructuur: WordPress-sites worden vaak gebouwd met een niet-geoptimaliseerde databasestructuur, wat de responstijd van de server kan vertragen.
Het hele idee achter WordPress is dat niet-ontwikkelaars eenvoudig de functionaliteit van hun WordPress-site kunnen uitbreiden door simpelweg een (gratis) plugin te installeren. Maar met deze eenvoud komt het risico dat je site snel trager wordt.
Dit komt doordat veel van deze plug-ins van derden mogelijk niet-geoptimaliseerde webpagina's genereren aan de voorkant en trage databaseverwerking aan de achterkant. Je kunt dit voorkomen of beheren door zorgvuldig plugins te overwegen en te testen, of door je eigen thema’s en plugins te schrijven. Maar wees altijd voorzichtig.
Het risico is dat zelfs het toevoegen van een paar kleine dingen kan cumuleren en je site aanzienlijk kan vertragen.
Wij zijn hier ook slachtoffer van geworden, ondanks dat we ervaren ontwikkelaars zijn. Zelfs met een paar plugins, inclusief onze eigen, daalde de snelheid van onze WordPress-site ooit naar 5 op mobiel en 34 op desktop. Wat gebeurde er hier?
Stap 2: Focus eerst op de client om de sitesnelheid te verbeteren
Een veelgemaakte fout is om de focus op de server te leggen in plaats van op de client. Wij adviseren sterk om eerst op de client te focussen.
Sommige zogenaamde webontwikkelaars, die in feite niet meer zijn dan WordPress-professionals, adviseren vrij generieke tips die voor elke website gelden, zoals het installeren van een WordPress-caching- of snelheidsplugin, of zelfs Cloudflare opzetten of Yoast installeren.
De reden is dat de meesten van hen, onder andere, kennis van geavanceerde PHP, Javascript, CSS of HTML-programmeerervaring missen.
Meeste servers kunnen het verkeer van je WordPress-site gemakkelijk aan
De meeste WordPress-sites op het internet (ongeveer 60% van alle sites) worden nauwelijks bezocht en vereisen geen caching of contentdistributie.
Een website met 100.000 bezoeken per maand moet gemakkelijk door bijna elke server worden afgehandeld, aangezien ze gemiddeld 2,3 bezoeken per minuut hebben. Dat betekent nog steeds dat je server het grootste deel van de tijd niets doet.
WordPress-caching is een gemakkelijke uitweg zonder het echte probleem op te lossen
Er is in principe niets mis met server-side caching. Dit lost echter waarschijnlijk niet het echte probleem op. Het cachen van te grote foto’s, onnodige Javascript-bestanden of slechte HTML is bijvoorbeeld een snelle winst, maar lost de kern van het probleem niet op.
Als je echter het probleem bij de wortel hebt aangepakt, is het bijna altijd nuttig om caching te gebruiken, zodat je server het zo gemakkelijk mogelijk heeft.
Een client-cachingbeleid is echter sterk aan te raden om meteen te doen, omdat dit een directe verbetering van je Site Speed-score is. Je kunt de clients laten weten welke bestanden nauwelijks zullen veranderen en door de client kunnen worden gecachet. Dit zijn meestal lettertypen, stylesheets, javascript-bestanden en misschien zelfs afbeeldingen.
Je moet je CSS- en Javascript-bestanden instellen met een versienummer om de cache te doorbreken. En voeg vervolgens een cachingbeleid toe voor je .htaccess-bestand/host-bestand (als je Apache gebruikt), of NginX-instellingen (als je NginX gebruikt).
Dit is een voorbeeld van het cachingbeleid dat we gebruiken voor Apache/.htaccess
<filesMatch ".(otf|css|jpg|jpeg|png|gif|js|ico|woff|woff2|ttf)$"> Header set Cache-Control "max-age=31536000, public" Header unset Last-Modified Header unset ETag </filesMatch>
Dit is een voorbeeld van het cachingbeleid dat we gebruiken voor NginX
location ~* \.(otf|css|jpg|jpeg|png|gif|js|ico|woff|woff2|ttf)$ { expires 1y; add_header Cache-Control "public, no-transform"; }
CDN is overrated voor een gemiddelde site
Een Content Distribution Network (CDN) is de meest voorkomende en gemakkelijke manier om de content van je site over de hele wereld te distribueren. Het voordeel is dat waar een bezoeker van je site zich ook bevindt, de statische content (afbeeldingen, CSS, films, misschien HTML) op een server in de buurt wordt opgeslagen.
Weerom, niet-geoptimaliseerde content blijft traag, waar je het ook opslaat. Bovendien distribueer je veel onnodige data, wat ruimte in beslag neemt. En zelden heeft een WordPress-site voldoende content of een echt wereldwijd publiek om significant te profiteren van een CDN.
Cloudflare is eenvoudig te gebruiken, maar gebruik het verstandig en alleen wanneer nodig
Cloudflare is een geweldig hulpmiddel omdat het je beschermt tegen hacker-aanvallen, je caching oplost, je CDN-gebruik stroomlijnt en nog veel meer. Maar nogmaals, alle bovengenoemde regels moeten in overweging worden genomen en je hebt minder controle over wat er precies gebeurt. Bijvoorbeeld, je moet Cloudflare je DNS laten beheren.
Dit is prima voor elke niet-technisch onderlegde siteontwikkelaar, maar voor degenen die de paginasnelheid tot het maximum willen verfijnen, zal het altijd suboptimaal zijn. Stel je voor dat bijna elk hulpmiddel dat is ontworpen voor algemene doeleinden je nooit zal kunnen ondersteunen voor specifiek gebruik.
Yoast is alleen geweldig als je geen ontwikkelingsvaardigheden hebt
Een van de meest gebruikte SEO-optimalisatietools voor WordPress is Yoast. Het geeft je geweldige inzichten over bijvoorbeeld hoe je je content of interne koppelingen kunt verbeteren. Wat het niet doet, is je technische inzichten geven over wat je WordPress-paginasnelheid traag maakt.
Het geeft ook geen volledig advies over de kwaliteit van je HTML of het gebruik en de kwaliteit van plugins. Wat nog erger is, is dat Yoast zelf, in sommige specifieke gevallen, je sitesnelheid zelfs kan vertragen.
Als ervaren ontwikkelaar wil je niet afhankelijk zijn van een plugin die langzaam updates ontvangt en achterloopt op de nieuwste best practices.
Stap 3: Optimaliseer de basis van je WordPress-site voor paginasnelheid
De meeste niet-ervaren WordPress-ontwikkelaars beginnen met een standaard gratis of betaald thema. Dit thema is geweldig voor algemeen gebruik en dus voor de meeste site-eigenaren. Zoals hierboven vermeld, komt alles wat standaard en eenvoudig is echter met handicaps.
Begin een WordPress-site vanaf nul
We raden altijd aan om vanaf nul te beginnen in plaats van een beschikbaar sjabloon te gebruiken. Standaard WordPress-sjablonen zijn eenvoudig te gebruiken, maar de meeste hebben veel functies die je niet nodig hebt. Deze zijn ingebed in de code en zijn moeilijk te verwijderen, wat je site trager maakt.
Een mooi voorbeeld van een leeg WordPress-sjabloon dat vanaf nul is gemaakt om mee te beginnen ontwikkelen is het underscores development template.
Elimineer grote afbeeldingen op je WordPress-site
Grote afbeeldingen zijn het meest voorkomende probleem als het gaat om WordPress-site snelheidsproblemen. Dit begint met het beslissen en dus weten welke maten en afmetingen je afbeeldingen moeten hebben. En het vereist enige kennis van beeldcompressie.
Hier heb je twee opties:
Gebruik een plugin om je afbeeldingsgrootte te verkleinen: Plugins zoals Smush of Media Cleaner worden vaak gebruikt, maar zijn in feite nutteloos voor sitesnelheid. Smush comprimeert je afbeeldingen naar kleinere bestandsgroottes. Dat klinkt misschien nuttig, maar je lost je basisprobleem niet op. Als je basisafbeelding al te groot is, heb je nog steeds veel te grote bestandsgroottes. Media Cleaner verwijdert afbeeldingen die je niet gebruikt, wat niets te maken heeft met sitesnelheid. In het algemeen kunnen beeldmanipulatieplugins de kwaliteit van je afbeeldingsbibliotheek verpesten, hebben ze mogelijk geen effect op je paginasnelheid en lossen ze het echte probleem niet op.
Bepaal je afbeeldingsgrootte vooraf: Het vooraf bepalen van je afbeeldingsgrootte voorkomt toekomstige problemen. Elke goede webdesigner weet hoe hij de afmetingen en grootte moet definiëren voor zowel mobiel als webgebruik. Vervolgens kun je deze maten instellen in je thema PHP-code, waardoor contentmakers de afbeeldingsformaten kunnen kiezen die ze willen, zonder dat er een plugin nodig is, en ze kunnen grote afbeeldingen uploaden.
Als je te maken hebt met een grote afbeeldingsbibliotheek met te grote afbeeldingen, kun je kijken naar het aanpassen van gdlib of ImageMagick op je server om meer compressie op je afbeeldingen uit te voeren en de bestandsgrootte te verkleinen.
Stap 4: Analyseer de impact van je plugins op je sitesnelheid
Binnen WordPress is het verleidelijk om allerlei verschillende plugins toe te voegen om fancy functionaliteiten aan je site toe te voegen. Vaak gebeurt het dat sitebouwers en eigenaren deze niet toevoegen omdat het nodig is, maar alleen omdat het mogelijk is.
Elke functionaliteit die je toevoegt en elke plugin kan je sitesnelheid aanzienlijk beïnvloeden. Denk daarom goed na voordat je dingen toevoegt die niet nodig zijn.
De eenvoudigste manier om te zien welk effect een plugin heeft op je WordPress-paginasnelheid is door ze aan en uit te zetten en de resultaten te controleren. Bij sommige van onze WordPress-sites merkten we dat de volgende vijf veelgebruikte plugins een enorme cumulatieve impact hadden op de sitesnelheid:
Jetpack plugin
MEOW Gallery / Lightbox plugins
Contact Form with ReCaptcha plugin
WPML plugin
Onze eigen TheONE Blog plugin
De combinatie van deze plugins verminderde de sitesnelheid van 90 naar 5. Elke plugin op zich verminderde de sitesnelheid gemiddeld met 15 punten. Je hebt in principe drie opties:
Verwijder de plugin en schrijf je eigen plugin
Verbeter de plugin
Vervang de plugin door een andere
De WordPress Jetpack plugin maakt je sitesnelheid traag
Jetpack is een gratis plugin ontwikkeld door WordPress om onder andere de prestaties en het eenvoudig beheren van de functies en mogelijkheden van je site te verbeteren. Hoewel we in dit geval alleen de fotogalerijfunctie van Jetpack gebruikten, merkten we een verbetering van 10 tot 15 punten in sitesnelheid wanneer we de Jetpack plugin uitschakelden.
Er zijn geen realistische alternatieven behalve je eigen fotogalerij te ontwikkelen om de sitesnelheid te verbeteren. We blijven de Jetpack plugin gebruiken voor onze galerij op basis van een kosten/tijd/snelheidsverbetering-calculatie.
De WordPress MEOW Gallery & Lightbox plugin maakt je sitesnelheid traag
De meeste WordPress-sites gebruiken de MEOW Gallery & Lightbox plugins voor een fotogalerij. Wij hadden het echter nooit nodig en gebruikten het ook niet. We gebruikten al de Jetpack plugin voor onze galerijen.
Het uitschakelen van deze plugin leverde nog eens 5 tot 10 punten in sitesnelheid op. De reden was dat de Javascript-bestanden vrij groot waren en niet efficiënt werden geladen (asynchroon, uitgesteld en onderaan de pagina) door de plugin.
De WordPress WPML plugin maakt je sitesnelheid traag
De WordPress WPML plugin is een van de geweldige gratis vertaalplugins voor een meertalige site. In totaal bestaat WPML uit minstens 4 verschillende plugins die je in staat stellen meertalige sites te beheren.
Maar alle plugins samen laten een behoorlijk grote code footprint achter: ze maken nieuwe databasetabellen, voegen veel code toe en veranderen veel aan je URL-structuur en hoe de pagina's worden geladen.
Dit alles maakt de WPML plugin een zeer krachtige plugin, maar geeft veel controle weg die je misschien wilt hebben. Als je je eigen meertalige plugin niet ontwikkelt, is WPML bijna essentieel voor het onderhouden van een meertalige WordPress-site.
Echter, we zagen dat als we de WPML plugins uitschakelen, we bijna 15 tot 20 punten in sitesnelheid winnen. Anderen hebben ook dit significante probleem met WPML naar voren gebracht. Het is een echt probleem. Maar het WPML-team heeft nog geen echte oplossing gegeven, behalve het installeren van caching-plugins.
Zelden zien we, op basis van kosten/inspanning/baten, een andere oplossing voor een meertalige site dan gewoon het nadeel van een verminderde sitesnelheid accepteren die kan worden opgelost met caching.
Maar WPML voegt veel databasetabellen en databasewerk toe om te bepalen welke taal moet worden getoond en gewisseld.
Misschien is caching in dit geval de enige optie.
De WordPress (Contact Form 7 met) ReCaptcha plugin vermindert je sitesnelheid
Er zijn veel plugins die je helpen om contactformulieren op je site op te zetten. Contact Form 7 is een van hen. En op zichzelf vermindert het niet de snelheid van je WordPress-site.
Maar om spam in contactformulieren te voorkomen, bieden veel plugins nu ook integratie met ReCaptcha, wat helpt bij het voorkomen van spam-inzendingen in je contactformulier.
De ReCaptcha-integratie met de Contact Form 7 plugin vermindert de sitesnelheid. Toen we de plugin uitschakelden, wonnen we ongeveer 10 tot 15 punten in paginasnelheid. De reden is dat de ReCaptcha Javascript vrij groot is en we ontdekten dat Contact Form 7 de ReCaptcha Javascript-code op elke pagina van de website laadt.
Dus niet alleen op de pagina waar daadwerkelijk een contactformulier is. Dit is nutteloos en vertraagt de paginasnelheid van elke pagina. Bovendien installeerde Jetpack ook ReCaptcha.
Dit kan worden opgelost door de dubbele installaties te verwijderen en ook de ReCaptcha-code te verwijderen op alle pagina's, behalve waar je het contactformulier gebruikt, met behulp van een eenvoudige action hook.
Je eigen ontwikkelde WordPress plugins kunnen je sitesnelheid traag maken
We gebruikten een intern ontwikkelde plugin die de bovenste navigatie, zoekfunctionaliteit en artikel lijst widgets van calltheone.com laadt. Het werd gebruikt om blogposts te tonen die deel uitmaken van CallTheONE, gehost op een andere server.
We ontdekten dat wanneer we onze plugin uitschakelden, we 15 punten in paginasnelheid wonnen.
In dit geval kon de paginasnelheid worden verhoogd door drie verbeteringen:
Zorg ervoor dat de data die hetzelfde zijn niet elke keer door één server van de andere server moeten worden geladen. Sla ze in plaats daarvan ook op de WordPress-server op. Dit betekent dat de serverresponstijd van onze WordPress-server veel sneller werd. Gebruik een echte cronjob om nieuwe data te kopiëren, bijvoorbeeld dagelijks of wekelijks.
Het beheerdersgedeelte van WordPress heeft andere Javascript-code nodig dan de pagina zelf. Laad de Javascript-code van je plugin die bedoeld is voor het wp-admin-gedeelte, alleen in het wp-admin-gedeelte en niet ook aan de voorkant.
Zorg ervoor dat je alle Javascript die je kunt aan de onderkant van de HTML-pagina laadt, niet bovenaan. Er zijn twee opties voor dit, afhankelijk van je setup. Voeg je script-tags toe aan de wp_footer action hook. En zorg ervoor dat je wp_enqueue_script functie-aanroep de ‘in footer’ optie gebruikt.
Stap 5: Verbeter je First Contentful Paint
Het is voor Google en andere zoekmachines van groot belang hoe snel de gebruiker ten minste het begin van je pagina kan zien en ermee kan interageren, zoals een menu of de intro; kortom, alles 'boven de vouw' - wat je ziet zonder te scrollen.
Dit betekent dat zelfs wanneer alles op je pagina klein en snel is, je het begin van de pagina eerst moet laden en weergeven, zelfs voordat de hele pagina is geladen.
De meeste ontwerpers willen pronken met geweldige banners, directe films, unieke lettertypen en veel fancy dingen voordat bezoekers van een site of pagina worden lastiggevallen met de echte informatie.
Dit kan de snelheid van de zogenaamde first contentful paint verminderen. Dus houd als ontwikkelaar in gedachten om de inhoud boven de vouw zo snel mogelijk interactief te maken, zonder dat de lay-out beweegt.
Gebruik inline CSS voor de inhoud boven de vouw en laad de rest van de CSS later.
Laad afbeeldingen, lettertypen en films asynchroon. Maar let op: zorg ervoor dat de ruimte op de site al beschikbaar is, zodat deze niet verschuift wanneer de inhoud wordt geladen. Google houdt daar (nog) niet van.
Zorg ervoor dat je alle Javascript onderaan je HTML kunt laden, en dat het bovenste gedeelte van de site-layout en -functie er niet onmiddellijk afhankelijk van is.
Conclusie
Het is een keuze die je moet maken. Maak het jezelf gemakkelijk en gebruik de basisprincipes van WordPress of verhoog de sitesnelheid door professionele ontwikkelaars in te huren. Je kunt echter al enkele extra snelheidsverbeteringen voor je site behalen zonder enige codering door de bovenstaande aanwijzingen op te volgen.
Er kan ook een moment komen waarop je moet beslissen om bepaalde plugins te behouden, omdat de tijd die nodig is om zelf iets te ontwikkelen niet opweegt tegen de voordelen van het verminderen van de sitesnelheid en dus de SEO-optimalisatie.
Houd er rekening mee dat om in de top 10 van de zoekresultaten te komen, sitesnelheid steeds belangrijker wordt!
Comments