Optimaliseer de laadtijd van rijke content voor een snellere blog

Als blogger gebruik je meestal veel ‘rich content’ in je artikelen. Met rijke content is je artikel 1 visueel geheel en aantrekkelijk om te consumeren door jouw lezers. Denk met rijke content aan:

• Afbeeldingen
• Video
• Social media embeds
• Geluid (bijv. podcasts)

Zonder deze toevoegingen zouden jouw blog artikelen slechts saaie lappen tekst zijn, en zeg nou zelf:

Lees jij artikelen welke enkel en alleen uit tekst bestaan? Zelf klik ik ze meestal snel weg tenzij de informatie echt goed of noodzakelijk is. En zo de meeste internet gebruikers met mij.

Het is dus aan te raden om je artikelen lekker vet te mesten met afbeeldingen, video en meer.

Rijke content en laadtijden

Er is echter één nadeel aan het gebruik van (veel) rijke content:

De laadtijden.

Het gebruik van afbeeldingen en video maken je website of blog niet per definitie langzaam. Maar dit kan wel als je veel en/of grote afbeeldingen gebruikt.

Naast mooie artikelen is een snelle laadtijd van je blog tegenwoordig een must als je een succesvol wilt zijn. Is je website langzaam (3 seconden laadtijd of meer)?

Dan klikken veel mensen deze weer weg. Zonde!

Optimaliseer je website voor rijke content

Gelukkig zijn er meerdere mogelijkheden om je website stukken sneller te maken ondanks het gebruik van rich content.

In dit artikel geef ik je twee technische oplossingen welke makkelijk te installeren zijn en welke de prestaties van je blog direct verbeteren.

Een snelle blog met slechts twee plugins

Om dit te realiseren gebruiken we twee plugins, namelijk:

1. WP Smush
2. A3 Lazy Load

WP Smush

De Smush plugin van WPMUDEV is goud waard. Deze plugin verkleint namelijk je afbeeldingen op bestandsniveau:

Het haalt alle onnodige data uit je afbeeldingen waardoor deze minder ruimte in beslag nemen en dus sneller kunnen worden geladen voor jouw bezoekers. En dit alles zonder te hoeven sleutelen aan je afbeeldingen!

Zelf heb ik met tientallen websites al verbeteringen gemerkt na het gebruiken van de WP Smush plugin (BlogNinja gebruikt deze ook!).

Smush installeren

Je kunt de WP Smush plugin gratis en makkelijk installeren via de WordPress Plugin omgeving.

Het werkt exact zoals je gewend bent:

1. Je zoekt de plugin met het zoekveld rechtsboven (zoek op ‘wp smush’)
2. Je klikt daarna op ‘nu installeren’
3. Klik vervolgens op activeren

Je krijgt daarna de volgende pagina te zien:

Hier kun je wat instellingen aanpassen voor de plugin. Het enige wat ik hier normaal nog doe is het kopje ‘strip my image meta data’ aanvinken.

Het kopje ‘automatic smush‘ laat je het beste aanstaan: Telkens als je een nieuwe afbeelding upload in WordPress zal deze automatisch door smush verkleind worden.

Klik hierna op de blauwe button ‘GET STARTED‘. Je komt dan op het startscherm van de plugin.

Klik hier op ‘Bulk smush nu’ en de plugin zal automatisch beginnen met het verkleinen van alle afbeeldingen die op dat moment in jouw blog staan.

Let op: Je moet de pagina open laten staan zolang de plugin bezig is.
Tip: Open een nieuw tabblad zodat je daar verder kunt surfen/werken.

Afhankelijk van hoeveel afbeeldingen er verkleint moeten worden zal de plugin met enkele minuten klaar zijn. Daarna hoef je niets meer te doen:

Je huidige afbeeldingen zijn ‘gesmushd’ en alle afbeeldingen die je vanaf nu upload worden ook automatisch verkleind door WP Smush.

Plugin 2: a3 Lazy Load

Lazy Load is een geweldige techniek als je het mij vraagt. Je hebt het ongetwijfeld ook al eens in actie gezien (waarschijnlijk zonder dat je het wist).

Is het je ooit opgevallen wanneer je op een website iets aan het lezen was dat afbeeldingen, video en andere elementen pas in beeld verschenen op het moment dat je daar naartoe scrollde? Dat is Lazy Load in actie.

Door de Lazy Load techniek te gebruiken hoeft niet de gehele website/pagina in één keer geladen te worden maar wordt dit in delen opgesplitst. Pas wanneer jij als bezoeker bij de volgende elementen komt (door te scrollen) zullen deze geladen en weergeven worden.

Zo hebben jouw bezoekers een (veel) snellere laadtijd als je ze jouw blog bezoeken.

Lazy Load gebruiken voor je eigen blog

Ook Lazy Load kun je zelf makkelijk installeren op je WordPress blog. Standaard heeft WordPress geen ingebouwde Lazy Load functie (apart als je het mij vraagt!) maar er zijn meerdere plugins welke de techniek in enkele klikken voor je activeren. Het kan zijn dat je thema wél Lazy Load heeft, in dat geval heb je geen plugin nodig.

Op BlogNinja en andere websites van klanten gebruik ik de gratis a3 Lazy Load plugin. Deze heeft hoge prestaties en doet z’n werk meer dan goed.

a3 Lazy Load installeren

1. Je installeert de plugin zoals je gewend bent via de WordPress admin > Nieuwe plugin
2. Vervolgens klik je op ‘Activeren’
3. That’s it! De plugin is nu actief en zal je rich content alleen laden als deze in beeld verschijnen bij je bezoekers

De plugin heeft redelijk uitgebreide en optionele instellingen maar in principe hoef je hier niets aan te veranderen. Zelf heb ik dat nog niet gehoeven in elk geval.

Als je de twee bovenstaande plugins gebruikt zul je de snelheid van je WordPress website/blog aanzienlijk versnellen.

Zo creëer je een betere ervaring voor je bezoekers en zul je merken dat je blog beter presteert in zoekmachines zoals Google. En dat zorgt weer voor meer bezoekers én inkomsten voor jou! 😄

Heb jij nog tips of een manier om de laadtijd van je content te verbeteren? Of heb je nog vragen naar aanleiding van dit artikel?

Drop even een comment, ik ben benieuwd naar andere ervaringen en vragen beantwoord ik graag.