PageSpeed verbeteren door optimalisatie van afbeeldingen (how-to)

Blog
31 augustus, 2015

De website politie.nl was zondag urenlang onbereikbaar. Niet een DDos-aanval, maar een te grote afbeelding bleek het euvel. Wat heeft de sterke arm der wet ons hier op pijnlijke wijze geïllustreerd, met het oog op laadtijd, server load en PageSpeed van websites?

Met een toenemend aandeel mobiel verkeer wordt de snelheid (PageSpeed) van je website steeds belangrijker. Een ranking factor van Google zelfs. Die PageSpeed hangt direct samen met de hoeveelheid data: het is daarom belangrijk om de omvang van je pagina’s zo veel mogelijk te beperken. Dat betekent: eventuele afbeeldingen of video’s optimaliseren/comprimeren, net als de CSS en JS bestanden (voor opmaak en functionaliteit).

Door het gebruik en de grootte van afbeeldingen te beperken, voorkom je dat er onnodig veel dataverkeer plaatsvindt. Dat is ten eerste vriendelijk voor je mobiele bezoeker, die anders wel heel snel door zijn databundel heen vliegt. Daarnaast voorkomt het een enorme druk op de server, zoals bij politie.nl gebeurde en binnen een uur de server omver trok. En tot slot maakt het je site sneller, wat bijdraagt aan een goede user experience en je voordeel oplevert in de Google zoekresultaten (SEO).

Afbeeldingen toevoegen in WordPress

Het CMS van onze recruitmentwebsites – WordPress – maakt het eenvoudig om zelf afbeeldingen te plaatsen. Dat heeft ook een keerzijde; niet zelden treffen we grote afbeeldingsbestanden aan, die op de websites maar klein worden weergegeven. Zonde van de laadtijd, zonde van de databundels en onnodige druk op de server. In onderstaande chart zie je de geladen elementen van een website. De lange balken staan voor veel laadtijd, en komen meestal voort uit te grote afbeeldingen.

Netwerven-PageSpeed-en-laadtijd-van-afbeeldingen-optimaliseren

Optimaliseren van afbeeldingen (how-to)

De meeste gangbare afbeeldingen (JPG, PNG) zijn eenvoudig te optimaliseren. Een gratis tool zoals TinyPNG.com doet dit zeer doeltreffend en zonder kwaliteitsverlies. Op de gemiddelde website bespaar je zo binnen minuten maarliefst 30% van bestandsgrootte*.

Heb je je bestanden geoptimaliseerd? Voeg ze dan in via WordPress. Let op: niet door de volledige grootte in te voegen en die d.m.v. van verslepen terug te schalen, maar liever door nog vóór het invoegen een standaard- of custom afmeting te kiezen. WordPress gebruikt dan een verkleind bestand, in plaats van het grote origineel. Let er ook op dat je niet onnodig naar het mediabestand linkt. De meeste van je gebruikers zitten namelijk niet te wachten op een schermvullende afbeelding, laat staan op mobiele apparaten.

Laadtijd optimaliseren in zes stappen

Het beste is natuurlijk om voor het uploaden van je afbeelding er al voor te zorgen dat het formaat en het bestand niet groter zijn dan noodzakelijk. Volg de volgende stappen voor het verbeteren van je PageSpeed door optimalisatie van afbeeldingen:

  1. Download je huidige afbeelding of gebruik een lokaal origineel
  2. Verklein het formaat van je afbeelding met bijv. Photoshop
  3. Optimaliseer de bestandsgrootte met TinyPNG
  4. Upload het bestand in de WordPress Mediabibliotheek
  5. Stel de bij het invoegen van je mediabestand de link in op ‘geen’ (afb. 1) ..
  6. .. en kies een standaard- of custom afmeting (afb. 2)
pagespeed

Afb. 1: Link instellen

Afb. 2: Afmeting instellen

Afb. 2: Afmeting instellen

PageSpeed van je website zelf testen?

Met de PageSpeed Insights van Google Developers kun je zelf eenvoudig testen of er op jouw recruitmentwebsite winst te behalen is met het optimaliseren van afbeeldingen, CSS en JavaScript. Test ook eens voordat je afbeeldingen optimaliseert; zo neem je een nulmeting die je kunt vergelijken met het resultaat na optimalisatie.

Heb je vragen over PageSpeed, de optimalisatie van afbeeldingen, of wil je advies over het verkleinen van CSS en JS? Neem dan contact met me op.

* De afbeeldingen in dit artikel werden door optimalisatie van alleen de bestandsgrootte al 20% kleiner.

Meer blogs