Iedereen wil een snelle WordPress website. Maar hoe maak je die sneller dan? Waar kijk je naar en hoe lees je de gegevens van bijvoorbeeld GTMetrix (zie eerdere blog over snelheid testen)? Wat kun je al offline aan website optimalisatie doen? Optimaliseer de afbeeldingen voor een snelle website.
Er zijn twee zaken die veel invloed hebben op het optimaliseren van de snelheid van je website. Dat zijn je afbeeldingen en caching. Daarnaast is ook het aantal requests van belang. Elk request zorgt ervoor dat het iets langer duurt voordat je website geladen is. Hoe meer plugins er draaien op jouw website, hoe trager deze dus uiteindelijk zal worden. Meestal gaat het om milliseconden, maar alles bij elkaar kan het aanzienlijk schelen. In deze blog geef ik een aantal tips over het optimaliseren. Het is geen stap-voor-stap handleiding, maar een blog waardoor je na gaat denken over bepaalde zaken en vooral waarom je ze wel of juist niet doet op jouw WordPress website.
In het blog van volgende week zal ik verder ingaan op W3 Total Cache. Er zijn diverse gratis en onbetaalde caching plugins voor WordPress. Ik installeer zelf altijd in ieder geval W3 Total Cache en vul deze waar nodig aan met andere tools. Maar hierover volgende week meer. Deze week gaan we het hebben over het optimaliseren van je afbeeldingen. Ik ga niet zeggen wat goed of fout is, ik ga alleen aangeven welke methodes je kunt gebruiken om grote afbeeldingen op te sporen en in de toekomst kunt voorkomen. Er zijn namelijk diverse wegen die naar een snelle WordPress website leiden ð
1. Afbeeldingen optimaliseren
1.1 GTMetrix
Vaak begin ik met het optimaliseren van een website door deze heel eenvoudig door een scan van GTMetrix.com te halen. En ja, ik weet dat deze gratis scans uitgevoerd worden vanuit Vancouver en dus een iets afwijkend beeld kunnen geven van de snelheid. Al zal dit vaak ook om enkele milliseconden zijn, er zijn mensen die hier veel waarde aan hechten om dit gezegd te hebben. Maar een website met een Total Page Size van 5 of meer megabyte zal vanuit Vancouver niet veel langzamer laden dan vanuit Amsterdam. Het is dan ook vooral een hulpmiddel.
Welke opties van GTMetrix bekijk ik in ieder geval voor het vinden van niet geoptimaliseerde afbeeldingen? Deze opties zijn beiden te vinden onder het tabblad Pagespeed.
- Serve scaled images – simpelweg wordt een afbeelding op je website gebruikt met een afmeting van 200×200 pixels laadt deze dan niet in op 1200×1200 pixels.
- Optimize images – comprimeer je afbeeldingen. GTMetrix biedt meteen de geoptimaliseerde afbeelding aan. Download deze en sla op onder dezelfde naam als het origineel. Uploaden via FTP en het originele bestand overschrijven. Weer een goed stap op weg naar een supersnelle WordPress website.
1.2 ImageOptin
Voor de Mac maak ik gebruik van de gratis tool ImageOptim. Deze is te downloaden op de website voor Windows systemen, Mac en zelfs Linux. Wat doet deze tool? Afbeeldingen comprimeren. Je hebt geen zichtbaar kwaliteitsverlies maar het is soms verrassend wat voor winst er behaald wordt door deze optimalisatietool.
Je kunt afbeeldingen voordat je ze uploadt naar je website eerst door de tool halen. Wat ik vaak doe als ik een website optimaliseer, is de complete uploads map (of delen daarvan) downloaden via FTP en door de tool halen. Na het optimaliseren van de afbeeldingen upload ik ze weer. Dit kan op een grote website enkele tientallen megabytes schelen. De moeite van het proberen waard dus.
1.3 PhotoShop
Als ik zelf websites bouw of verbouw dan maak ik veel gebruik van Adobe Photoshop om afbeeldingen bij te snijden of op het juiste formaat te knippen.
Er is een handige optie in Photoshop die de afbeeldingen met een zelfgekozen compressie opslaat in het JPGÂ formaat. Kijk hiervoor onder Bestand > Opslaan voor web. Als je kiest voor het JPG bestandsformaat heb je de mogelijkheid om meteen slider de compressie in te stellen. Voor veel afbeeldingen is een compressie van 20% nog uitstekend voor weergave op je website. Ook hiermee optimaliseer je dus al je afbeeldingen voordat je ze uploadt naar de website.
Ben je handig met Photoshop en moet je vele tientallen afbeeldingen optimaliseren? Maak dan gebruik van de batch optie en pas de handelingen automatisch toe op alle foto’s.
1.4 WordPress plugins
Er zijn uiteraard ook nog meer plugins voor WordPress beschikbaar om je afbeeldingen te optimaliseren. Kijk daarvoor eens naar de Imsanity plugin beschreven in deze blog of de in deze blog genoemde WP Smushit. Het gaat te ver om de werking van beiden hier nogmaals uit te leggen. Maar een beetje extra uitleg kan altijd. Mocht je het beste resultaat willen halen uit je optimalisatie kijk dan eens naar Shortpixel*.
Imsanity snijdt afbeeldingen bij naar het ingestelde formaat.  Je kunt bijvoorbeeld instellen dat een afbeelding nooit groter dan 1024 x 1024 pixels mag zijn. Is deze wel groter dan past Imsanity deze aan, uiteraard met behoud van de originele verhoudingen.
WP Smushit is een plugin voor WordPress die een gratis en een betaalde versie kent. Een beperking aan de gratis versie is onder andere dat bestanden groter dan 1MB niet verwerkt worden.
1.5 Zoek grote afbeeldingen
Onder punt 1 heb ik al beschreven hoe je grote afbeeldingen kunt vinden op je website. Maar dit gaat met name over compressie en de grootte van de afbeeldingen. Een andere, minstens net zo belangrijke factor is de bestandsgrootte. Maar hoe vind je de grote bestanden die je website vertragen? Je kunt natuurlijk inloggen via bijvoorbeeld Filezilla FTP en de bestanden sorteren op grootte. Maar daar haal je niet heel veel informatie uit en is de kans op fouten erg groot. Dat kan handiger. Daarom beschrijf ik hieronder drie verschillende tools die je een schat aan informatie kunnen geven voor de optimalisatie.
1.5.1 Chrome Developers Console
Als je gebruik maakt van de Chrome browser en serieus bezig bent met je website dan hoop ik dat je de Chrome Console kent. In deze blog over CSS schreef ik er al eerder over. Het is een geweldige tool die standaard aanwezig is en volledig gratis te gebruiken.
Hoe zoek je grote bestanden met de Console?
- Ga naar de homepage van je website
- Ga bovenin de menubalk naar Weergave > Ontwikkelaar > Ontwikkelaarstools
- Kies voor Network
- Klik op IMG
- Ververs het overzicht (Mac is Command + R) en je krijgt een overzicht van alle geladen afbeeldingen inclusief de bestandsgrootte. Wat wil je nog meer?
1.5.2 GTMetrix Waterfall
De eerder genoemde GTMetrix website bied ook een zogenaamde Waterfall optie. Hierin kun je exact zien hoe lang het duurt voordat bepaalde elementen geladen worden. Ook de bestandsgrootte word hier getoond. Weer een goed startpunt voor een nog snellere WordPress website met geoptimaliseerde afbeeldingen.
1.5.3 Webpagetest Waterfall
In de blog over het testen van je WordPress website snelheid kwam deze website ook al naar voren. Het is een erg betrouwbare tool die gerichte informatie kan geven over de onderdelen die geoptimaliseerd moeten worden op jouw website. Ook Webpagetest.org bied een waterfall optie waarin je exact kunt zien hoe lang het duurt voordat bepaalde onderdelen geladen zijn en wat de bestandsgrootte is. Die zocht je toch?
Het overzicht is te vinden als je de test gedraaid hebt onder Details en dan scrollen naar beneden tot na de waterfall.
2. Conclusie
Heb je het kunnen volgen? Er zijn mogelijk een hoop onbekende termen voorbij gekomen. Het belangrijkste is dat je een aantal tools aangereikt hebt gekregen waarmee je jouw website kunt analyseren. En daarnaast tools om de gevonden problemen direct op te lossen. Een tool als Shortpixel is betaald maar absoluut volgens ons wel het geld van je investering waard.
Het is gebleken uit onderzoek dat bezoekers al heel snel afhaken op een trage website. Want waarom zou je iets bestellen of uitzoeken op een website of webshop die heel traag is, terwijl de concurrent zijn zaken wel op orde heeft en blijkbaar wel de moeite heeft genomen om de hierboven beschreven stappen uit te voeren? Voor mij zou die keuze absoluut niet moeilijk zijn.
Bedrijven die iemand inhuren voor het optimaliseren van hun website doen dit slim! Naast een tevreden bezoeker die langer op de website blijft, waardeert ook Google de technische kant van je website. Dus ook in het kader van zoekmachineoptimalisatie is het optimaliseren van je afbeeldingen een prima keuze. Heb je deze SEO Checklist al gezien om je website direct beter vindbaar te maken?
Heb je iets aan de blog gehad? Hoeveel heb je kunnen besparen op de grootte van je website? Ik ben benieuwd, laat het mij weten via een reactie onder deze blog. Heb je vragen of opmerkingen? Neem gerust contact met mij op.
