Verbeter de laadtijd, deel 2: afbeeldingen verkleinen en comprimeren

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.

Smush-1-1

 

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!

Zoekwoorden:

Delen

Je kunt pas een reactie plaatsen nadat je ons privacybeleid en cookies hebt geaccepteerd. Om privacyredenen mogen wij jouw persoonsgegevens anders niet verwerken.

Klik onderaan de pagina op de blauwe button OK. Nadat je de pagina opnieuw hebt geladen, kun je een reactie achterlaten.

Deze website maakt gebruik van cookies voor onder andere Google Analytics. Deze melding verdwijnt zodra je de cookies hebt geaccepteerd. Meer informatie

OK