Dennie Kuik
Hoger in
zoekmachines?
DENNIE KUIK vertelt je alles over zoekmachine optimalisatie! Vraag nu de gratis zoekmachine optimalisatie scan aan en ontdek hoe jouw website beter scoort!

Nu aanvragen
Search here:
Ik help u graag! +31 6-5575 8327

Blog

Home > Blog: Onderwerpen  > zoekmachine optimalisatie (SEO)  > WordPress website snelheid verbeteren!
wordpress-speed-optimizing

Na dat jij de opbouw van je website hebt gemaakt en een WordPress template hebt uitgekozen voor je blog is het van belang dat je aan de slag gaat met de snelheid van je blog. De laadtijden van een website zijn niet alleen een belangrijk onderdeel van je SEO (zoekmachine optimalisatie) maar ook voor je bezoeker natuurlijk.

Hoe lang wacht jijzelf totdat een website verschijnt op je scherm

Aangezien we allemaal geen tijd meer hebben en druk zijn met allerhande zaken, hebben we niet veel tijd meer om te wachten totdat een website geheel geladen is. Kijk maar naar jezelf, ben jij iemand die langer dan 5sec blijft wachten totdat er iets verschijnt op je scherm? Ik niet in elk geval!

Hoe je wordpress blog sneller maken

Een hele handige tool voor te testen wat je nog allemaal moet optimaliseren aan je website is de tool van GTmetrix. Ze meten een tal van expecten waar onze vriend Google ook op controleert.

gtmetrix-stats-100-99

gtmetrix-stats-100-99  in dit voorbeeld  valt niet meer veel te verbeteren.

In bovenstaand voorbeeld valt niet meer veel te verbeteren. Dit is natuulijk nadat ik alle aangegeven fouten en verbeterpunten heb gecorrigeerd. Wat overigens nog niet ze heel er gemakkelijk is. De belangrijkste dingen om jouw website snelheid te optimaliseren ga ik hieronder uitleggen.

gtmetrix-volledig-rapport

gtmetrix-volledig-rapport

In het volledige rapport van GTmetrix vind je de volgende waardes waarop wordt gemeten en gecontroleerd of jou website aan de voorwaarden voldoet. De lijst ziet zo uit als hieronder.

Minify HTML
A (99)

 

Content Low
Minify JavaScript
A (99)

 

JS High
Minify CSS
A (99)

 

CSS High
Avoid bad requests
A (100)

 

Content High
Avoid landing page redirects
A (100)

 

Server High
Defer parsing of JavaScript
A (100)

 

JS High
Enable gzip compression
A (100)

 

Server High
Enable Keep-Alive
A (100)

 

Server High
Inline small CSS
A (100)

 

CSS High
Inline small JavaScript
A (100)

 

JS High
Leverage browser caching
A (100)

 

Server High
Minimize redirects
A (100)

 

Content High
Minimize request size
A (100)

 

Content High
Optimize images
A (100)

 

Images High
Optimize the order of styles and scripts
A (100)

 

CSS/JS High
Put CSS in the document head
A (100)

 

CSS High
Serve resources from a consistent URL
A (100)

 

Content High
Serve scaled images
A (100)

 

Images High
Specify a cache validator
A (100)

 

Server High
Combine images using CSS sprites
A (100)

 

Images High
Avoid CSS @import
A (100)

 

CSS Medium
Prefer asynchronous resources
A (100)

 

JS Medium
Specify a character set early
A (100)

 

Content Medium
Specify image dimensions
A (100)

 

Images Medium
Avoid a character set in the meta tag
A (100)

 

Content Low
Remove query strings from static resources
A (100)

 

Content Low
Specify a Vary: Accept-Encoding header

Ben jij zojuist je website en of blog gestart en je meet je website met GTmetrix zal je rondom de 60% uitkomen voor pagespeed en iets lager denk ik voor Yslow dit afhankelijk van je gekozen WordPress template. De belangrijkste dingen om even de grootste stappen te behalen zijn:

Lightweight magento template gebruiken

Je begint je wordpress website echter alvorens je deze start is het belangrijk dat je een lightweight template uitkiest. Een licht gewicht template is een van de belangrijkste keuzes die je kan maken om je website zo snel als mogelijk te krijgen. Daarnaast is het van belang zo min mogelijk plugins en toevoegingen te gebruiken. Wil jij die fancy plugins zal je moeten inleveren op je website snelheid. En waar gaat het nu om? Dat je een mooie slider hebt op je website of allerhande widgets of gaat het om de inhoud van je artikelen? Dat laatste is waar ik me op focus, hoogwaardige content in jip en janneke taal uitgelegd en zonder er een bonte kermis van te maken.

Enable Gzip compressie

Het eerste wat ik zou aanpakken nadat je een WordPress template hebt geïnstalleerd is gzip compressie.   Mits die niet in bovenstaande resultaten al op 100% staat is Gzip compressie inschakelen een belangrijke factor voor snelheidswinst te behalen met je website. Dit zorgt ervoor dat je website wordt ingepakt net als een .rar bestand op je computer. Alvorens iemand je website bezoekt en zodra hij op enter drukt als hij www.jouwwebsitebezoekt.nl heeft ingetypt in zijn internetbrowser wordt deze dan door de server waarop je website draait snel uitgepakt en getoond aan je website bezoeker. Nu denk je ja maar als die dat dan nog moet doen kan dat toch niet veel snelheid schelen. Echter dit is niet waar. Het is sneller bestanden ingepakt aan te bieden aan de bezoeker als dat je ze niet comprimeert voor je de website aanbied aan de bezoeker.

Gzip compressie inschakelen hoe doe je dat

Zet onderstaande code in je .htacces bestand in de root van je website. Meestal is dit public_html of private_html map. het bewerken van het .htacces bestand kan gewoon met een simpele tekstbewerker.


# Insert output filter by type
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript
AddOutputFilterByType DEFLATE application/xml application/xhtml+xml application/rss+xml
AddOutputFilterByType DEFLATE application/javascript application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/cgi-php5
AddOutputFilterByType DEFLATE application/cgi-php53
AddOutputFilterByType DEFLATE application/cgi-php54

# Don’t compress images, compressed files, docs nor movies
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:pdf|doc)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:avi|mov|mp3|mp4|rm)$ no-gzip dont-vary

Om Gzip te kunnen gebruiken moet je tevens de volgende regel in je .htaccess aanzetten (staat nu een # voor):

php_flag zlib.output_compression on

Minify HTML, CSS en Javascript

Daarna is het verstandig een van de volgende punten te verbeteren. Er zit geen volgorde die je moet volgen in deze lijst dus ik begin dan alles te minifyen (geen idee of dat een bestaand woord is overigens). Het betekend in elk geval dat je CSS en JavaScript bestanden die jij gebruikt worden samengevoegd tot 1 bestand. Je server (niets meer als een centrale computer geplaatst in een datacenter) leest liever 1 wat groter bestand als dat hij 10 kleine bestanden moet openen. Dit zal je zeker ook weer iets snelheidswinst opleveren. Je HTML bestanden voegt die niet samen maar daarbij kiest hij ervoor om die als 1 regel met code te zien i.p.v aparte regels zoals je misschien wel eens gezien hebt. Hierbij kan je nog instellen of je de comments ertussenuit wilt halen. Alvorens ik gebruik maakte van een content delivery network ook wel CDN genoemd gebruikte ik altijd de WordPress plug-in van w3 Total cache. Deze plug-in beinvloed je website speed niet nadelig en is gemakkelijk in te stellen.

Leverage browser caching

Leverage browser caching wilt zeggen dat jij aan de internetbrowser van de bezoeker opdraagt een deel van de wesbite op te slaan op de pc van je bezoeker. Hierdoor worden laadtijden voor een terugkerende bezoeker nog sneller. En aangezien we aannemen dat je content (website inhoud) echt geweldig en uniek is nemen we maar even aan dat deze bezoeker ook daadwerkelijk gaat terugkeren. Leverage browser caching heeft dus voor een nieuwe bezoeker geen invloed op de laadtijden, het is echter wel een voorschrift van Google waar we graag aan voldoen.

Leverage browser cache

Leverage browser cache

En mocht je mij nu toch al op mijn woord geloven, vooral ook omdat je na elke verandering opnieuw hebt getest met de tool van GTmetrix en je ziet dat je aan snelheid wint. Zet dan in dit menu met browser cache gelijk de Expired headers aan! Expired headers wil zeggen dat er een tijdsbestek wordt toegevoegd aan de headers van alle objecten van je website. Na dit tijdsbestek zal de browser pas kijken of er veranderingen zijn op de website. Dit is voor de terugkerende bezoeker al tijdwinst. ok ETag zou ik zeker niet vergeten aan te zetten, op deze manier spoor je de browser nog meer aan om onderdelen van jou website te cachen. En als laatste zou ik nog Gzip compressie voor HTTP aanzetten. Dit zorgt er voor dat de tekst gebaseerde bestanden ook worden ingepakt en pas uitgepakt als die nodig zijn.

Defer parsing of javascript

Defer parcing of javascript is een instelling waarbij je weer duidelijk zichtbaar resultaat ziet als je gaat meten bij GTmetrix. sorry dat het lijkt alsof ik een reclameartikel schrijf voor deze mensen, maar ze leveren echt topwerk! Met defer paring zeg jij dat bepaalde onderdelen, in dit geval Javascript pas later ingeladen moet worden. Wat heb je er aan als je bezoeker de website laad en als eerst je share buttons krijgt te zien bijvoorbeeld nog voor je artikel en of logo bijvoorbeeld geladen is. Met defer zeg je dus tegen de browser van je bezoeker dat javascript onderdelen later geladen moeten worden waardoor er voorrang wordt gegeven aan de rest van je template en inhoud. Met deze gratis plugin kun je gratis je javascript later inladen. Deze plaatst de javascript in de footer van je website (lees als onderste gedeelte van je website) waardoor deze pas als een van de laatste componenten wordt aangesproken en dus laad.

Optimize images

Ook de afbeeldingen van je website kunnen kleiner, nee niet in formaat maar in bestandsgrootte. Nu kun je wel allerhande tools op je pc gaan installeren. Waarna je voordat je een plaatje doet uploaden naar je website deze eerst nog eens door deze tool haalt om de bestandsgrootte te beperken. Ikzelf houd er niet zo van, het zijn weer extra handelingen die je moet uitvoeren terwijl dit ook automatisch kan. Oh ja hoor ik je denken, hoe dan? Simpel door de plugin te installeren van smush.it. Deze heeft een gratis en betaalde dienst echter de gratis voldoet prima zolang jij nog geen supergrote website hebt met ontelbaar veel artikelen en dus ook afbeeldingen. De WordPress plug-in smush.it heeft geen negatieve gevolgen op de laadtijden van je website. Je hoeft er geen moeilijke instellingen voor te doen en hij comprimeert zelfs de afbeeldingen die je al hebt geüpload.

Lazyload van afbeeldingen

Heb jij toch nog flinke laadtijden na bovenstaande tips om je website sneller te maken zou ik je willen adviseren om je afbeeldingen iets later te laten inladen als overige componenten van je website. Aangezien afbeeldingen toch nog een flinke bestandsgrootte hebben is het voor je bezoeker en ook voor je laadtijden beter deze te lazy loaden. Dit betekend voor je bezoeker bijvoorbeeld dat hij eerst mooi de opbouw ziet en de koppen van je artikelen en de plaatjes laden pas als een van de laatste onderdelen. Het is een soort van zoethouder voor je bezoeker doordat die toch al jou pakkende kopteksten ziet waardoor die misschien minder snel afhaakt en een andere website gaat bezoeken in Google.

Content delivery netwerk

Als laatste zou ik gebruik gaan maken van een CDN ofwel content delivery network. Afhankelijk van de verschillende aanbieders zullen ze allemaal een vergelijkbare dienst bieden. Ikzelf maak altijd gebruik van Cloudflare en ben er zeer tevreden over. Ik gebruik zelf momenteel hun gratis dienst die nog voldoet voor deze website. Een CDN die doet een aantal dingen. Het belangrijkste wat een CDN doet is zij nemen een aantal componenten van je website over. Javascript en CSS bestanden worden dan niet vanaf je eigen server (weet je nog, die centrale computer waar je website op draait) geladen. Dit wordt door de CDN boer helemaal overgenomen. Je kan je natuurlijk wel voorstellen dat dingen die jij niet zelf hoeft te openen dat dit de snelheid van je website flink kan bevorderen, dit is ook zo op je eigen computer als je een aantal dingen tegelijk moet openen om een taak te kunnen doen. Nog één hele belangrijke en ook sinds een niet al te lange tijd een ding wat meetelt voor onze vriend Google is een SSL (secure socket layer) verbinding. Bij Cloudflare krijg je deze gratis bovendien. Tenminste voor een WordPress blog is dit een gratis dienst. Jij krijgt dan dat mooie groene slotje voor je domeinnaam en ook staat er I.P.V het bekende HTTP:// nu HTTPS://. Nog een hele fijne dienst van Cloudflare is dat ze je website beschermen tegen DDos aanvalen en kwaadwillende gebruikers die je website proberen aan te vallen. Aanmelden bij Cloudflare kan hier

Veel plezier bij het sneller maken van je website waardoor jij je gebruikers echt kwaliteit kan bieden. Ik hoop dan ook echt dat ik je met dit artikel heb weten te inspireren om de snelheid van je WordPress website te verbeteren. Al zou je alleen maar de SSL verbinding nemen dan zou je al meehelpen aan een stuk verbetering van het internet! Heb jij goede ervaringen aan de hand van mijn geschreven artikel laat het dan ook iemand anders weten in de reacties hieronder!

Er is nog geen commentaar gegeven op dit artikel. Geef nu je mening!

Geef jouw mening!