Nieuws, tips en achtergronden
rondom webhosting

Menu

Gepubliceerd op: 15 november 2018

Verbeter de laadtijd, deel 2: afbeeldingen verkleinen en comprimeren

Te grote afbeeldingen met onvoldoende compressie beïnvloeden de prestaties van een WordPress-blog nogal. Met weinig moeite kun je veel verbeteren!

Het optimaliseren van afbeeldingen is meestal de snelste en eenvoudigste manier om de laadtijden van je blog te verkorten. Je kunt hiervoor een plug-in gebruiken die automatisch afbeeldingen verkleint en comprimeert. Een alternatief is de afbeeldingen zelf te verkleinen voor je ze uploadt. Afhankelijk van het motief kun je de bestandsgrootte van afbeeldingen via een goede compressie meer dan halveren.

Bruikbare plug-ins zijn bijvoorbeeld Smush Image Compression and Optimization en reSmush.it Image Optimizer. Het voordeel: deze plug-ins optimaliseren de afbeeldingen automatisch zodra ze worden geüpload naar de WordPress Media Library. Voor de meeste bloggers is dit de gemakkelijkste manier om de laadtijd via kleinere afbeeldingsbestanden te verbeteren.

Beeldoptimalisatie met Smush: alleen de compressie-informatie en de gereduceerde bestandsgrootte laten zien dat Smush actief is geweest.

Kun je goed overweg met Photoshop of een andere fotobewerkingssoftware? Dan kun je foto’s ook zélf optimaliseren voor je ze uploadt. Dit biedt je volledige controle over elke afbeelding en stelt je in staat om het beste compromis te vinden tussen bestandsgrootte en beeldkwaliteit.

Via deze handmatige optimalisatie verklein je eerst de afbeelding tot de maximale grootte die in je WordPress-thema is toegestaan. De pixelwaarden die je hiervoor nodig hebt, vind je onder Instellingen – Media. Deze methode voorkomt dat de automatische verkleining van WordPress wordt toegepast, met kwaliteitsverlies tot gevolg. Bij het opslaan van het afbeeldingsbestand kun je diverse compressieniveaus testen. Zo zie je hoe je zo klein mogelijke bestanden kunt maken met behoud van een goede optische kwaliteit. Een compressie van 65 procent of compressieniveau 8 is een goede beginwaarde.

Vergeet ook niet om onnodige metagegevens uit de bestanden te verwijderen, zoals GPS- en belichtingsgegevens van je camera. Dit kan bijvoorbeeld met Batch Purifier Lite (gratis voor jpg-bestanden). De Windows-functie (Bestandseigenschappen – Details – Eigenschappen en persoonlijke gegevens verwijderen) is hiervoor niet geschikt, omdat de bestanden daardoor juist groter worden.

Ook gespecialiseerde gratis software zoals Riot of Caesium Image Compressor is erg handig als je bestanden wilt comprimeren of metadata wilt verwijderen.

Afbeeldingscompressie met RIOT – voor en na compressie.

‘Lazy load’ van afbeeldingen

Zelfs goed gecomprimeerde, kleine afbeeldingen genereren een vrij grote hoeveelheid gegevens die naar de browser gestuurd worden. Dit leidt altijd weer tot een laadtijd. Je weet het: hoe eerder een lezer inhoud op je blog ziet, des te kleiner het risico dat hij je site wegklikt.

Een effectieve truc is om eerst alleen de inhoud te laden die boven aan de pagina staat. Foto’s in alinea’s die onderaan de pagina staan, worden pas later geladen. Deze technologie wordt ‘lazy load’ genoemd en werkt als volgt. Een JavaScript controleert de laadvolgorde van de afbeeldingen en vraagt de webserver eerst om de afbeeldingen die bovenaan de pagina staan, en dus als eerste zichtbaar zijn. Pas wanneer deze afbeeldingen worden geladen, volgt de rest.

Er zijn talloze plug-ins voor ‘lazy load’ van afbeeldingen. De bekendste is BJ Lazy Load, die zowel voor afbeeldingen als voor iFrames geschikt is (bijvoorbeeld YouTube-video’s op de pagina).

Met BJ Lazy Load zorg je ervoor dat een deel van de content op je pagina pas later wordt geladen. Je kunt hierbij uitzonderingen configureren.

Het plug-inpakket Jetpack heeft ook zo’n functie, ‘delayed loading of images’. Je vindt deze functie via Schrijven – Performance & Speed. Maar let wel op de privacy, net als bij andere Jetpack-functies.

In sommige cache-plug-ins kun je ook lazy load-opties vinden. Het voordeel is hierbij dat de samenwerking met de cache probleemloos gaat.

De geïntegreerde lazy-loadfunctie in de cache-plug-in WP Rocket.

Lazy load klinkt eenvoudig, maar kan in de praktijk vrij lastig zijn. Er kunnen conflicten optreden met cache-plug-ins, bijvoorbeeld doordat afbeeldingen die later worden geladen, niet in de cache worden opgenomen. Ook JavaScript-fouten in de browser kunnen ertoe leiden dat sommige afbeeldingen helemaal niet opnieuw worden geladen. Het is dus verstandig om intensief te testen met verschillende browsers en verschillende apparaten. Alleen zo weet je zeker dat een lazy load-plug-in goed werkt op je blog.

Optimalisatie van afbeeldingen maakt je blog voelbaar sneller. Als je dan tóch bezig bent, wil je de laadtijd van je blog natuurlijk verder verkorten. Een voorbeeld is het veelvuldig aanbevolen gebruik van een content delivery-netwerk voor afbeeldingen, maar niet alle tips die je hierover leest zijn effectief. Soms kunnen zelfs grote problemen ontstaan. In deel 3 van deze serie gaan we hierop in en tonen we je waar je online tools vindt die prestatieproblemen in je blog opsporen. Ook vertellen we je dan welke tips je kunt negeren. Dit deel lees je volgende week!

Tags: wordpress

De Auteur:

Auteur: Daniël de Swart

Plaats een reactie

Let er op dat je reactie betrekking heeft op het blogartikel. Mocht je een vraag hebben over je STRATO pakket, richt je dan alsjeblieft aan onze klantenservice via Facebook, Twitter, of onze pagina Hulp & contact.
We vinden het leuk als je je naam noemt, dan kunnen we je in ons antwoord persoonlijk aanspreken.
Als je bovendien je e-mailadres invult, word je per mail op de hoogte gebracht van ons antwoord. Ter bescherming van je gegevens tonen we je mailadres niet. Beide gegevens zijn vrijwillig.

Hier bloggen

Sjef Huijbregts
Marketing manager voor STRATO Nederland en gastblogger

Lisa Kopelmann
Online redacteur voor blog, Facebook en meer

Michael Poguntke
Schrijft over de cloud storage HiDrive, Sitebuilder, webshops en servers

Thomas Ritter
Bericht over de laatste ontwikkelingen rondom STRATO

Bianca Restorff-Adrion
Schrijft over carrière en de mensen bij STRATO