Grote foto's maken je site traag, en jij merkt het zelf niet
Een klant stuurde me laatst trots de nieuwe foto's van zijn zaak. Mooi gedaan, scherp, met zorg gemaakt. Ze gingen rechtstreeks vanuit de camera op de site en precies daarom laadde zijn homepage ineens traag op een telefoon. Niks kapot, niks stuk, gewoon traag. Dat is een van de vervelendste soorten problemen, want jij bent zowat de enige die het nooit ziet.
Een foto uit de camera is gemaakt om af te drukken, niet om te laden
Een moderne camera of telefoon maakt beelden die veel breder zijn dan de plek waar ze op je site terechtkomen. Voor afdrukken is dat prima. Voor een browser is het verspilling. Die haalt het hele bestand binnen, krimpt het terug naar de maat van het vakje op het scherm en gooit de rest weg. Je bezoeker heeft dus staan wachten op beeld dat hij nooit te zien krijgt.
Er zit vaak nog meer in zo'n bestand wat niets met je site te maken heeft. Kleurprofielen, cameragegevens, soms zelfs een kleine kopie van de foto die erin verstopt zit. Allemaal meegestuurd, allemaal wachttijd.
Op wifi merk je er niets van, en dat is precies het probleem
Jij opent je eigen site vanaf je bureau, op een snelle verbinding, met alles al in het geheugen van je browser. Dan gaat het als een speer. Je bezoeker staat buiten met mobiel internet, misschien net buiten de bebouwde kom, en kijkt naar een wit vlak. Ik heb geen cijfer voor je over hoeveel mensen dan afhaken, want dat hangt af van wie er komt en waarvoor. Maar je weet zelf wat je doet als een pagina niet opkomt en je nog een paar andere zoekresultaten open hebt staan.
Snelheid telt ook mee voor je vindbaarheid, dus je hebt er dubbel last van. Het grootste verlies zit alleen niet in een ranking. Dat zit bij de man die je zaak zocht en niet lang genoeg wachtte om je te vinden.
Benieuwd hoe jouw eigen site hierop scoort? Doe de gratis website-check; binnen twee werkdagen heb je mijn persoonlijke rapport.
Terugschalen doet het meeste werk, het bestandsformaat doet de rest
Veel sites laden foto's die veel groter zijn dan ze op het scherm getoond worden. Schaal de foto terug naar de grootte waarop hij daadwerkelijk staat en sla hem op in een modern formaat zoals WebP of AVIF. Dat scheelt flink in bestandsgewicht zonder dat een bezoeker er kwaliteitsverlies van ziet, en de grootste winst zit in het terugschalen.
De volgorde is belangrijk. Eerst kleiner maken, dan pas comprimeren. Andersom knijp je een veel te groot bestand plat en houd je nog steeds een veel te groot bestand over, alleen nu ook lelijker.
Wat ik zelf per foto nakijk:
- Hoe breed staat hij echt op het scherm? Een foto in een smalle kolom hoeft geen paginabrede foto te zijn.
- Is er een moderne variant, zodat een browser die het aankan de lichte versie krijgt?
- Staan de afmetingen in de code? Dan springt de tekst niet weg als de foto binnenkomt.
- Wordt alles onder de vouw pas geladen als iemand ernaartoe scrolt? Behalve de bovenste foto, want die wil je juist meteen.
Een cache-plugin of een snellere server lost dit niet op
Dit is het misverstand dat ik het vaakst tegenkom. Caching helpt de tweede bezoeker en helpt je server, en goede hosting is echt geen overbodige luxe. Maar geen van beide verandert iets aan het gewicht van het bestand zelf. Die eerste bezoeker op mobiel internet moet nog steeds elke byte binnenhalen. Je maakt de kraan wijder terwijl het probleem de emmer is.
Let ook op wat een optimalisatie-plugin precies doet. Sommige comprimeren alleen en laten de afmetingen ongemoeid, en dan blijf je die reuzenfoto meesturen. En een paginabouwer kan de volledige versie inladen terwijl je systeem netjes kleinere varianten heeft klaarstaan. Op papier is het dan geregeld en in de praktijk niet.
Kijk vanmiddag zelf even wat je bezoeker ziet
Zet je wifi uit, loop naar buiten en open je eigen site op je telefoon. Niet vanaf een bladwijzer, maar via Google, zoals een klant het doet. Tel in je hoofd hoe lang je naar niets kijkt. Doe daarna dezelfde test op je drukste pagina met foto's, meestal je home of je overzicht met werk.
Duurt het langer dan je prettig vindt, begin dan bij je zwaarste foto's en niet bij een plugin. Vervang de grootste beelden door een teruggeschaalde versie in een modern formaat en meet opnieuw. Dat is bijna altijd de grootste sprong die je met de minste moeite maakt.
Kom je er niet uit, of wil je gewoon weten waar het bij jou vastloopt? Ik kijk het na in een gratis website-check en zeg je eerlijk of het aan je foto's ligt of ergens anders aan.