Waarom laden mijn websiteafbeeldingen langzaam?

Begin met één trage pagina

Open de gepubliceerde pagina op een telefoon en computer. Let op welke afbeelding laat verschijnt, of de hele pagina traag is en of tekst verschuift wanneer afbeeldingen verschijnen.

1. Noteer het pagina-adres en de afbeelding waarbij je het probleem ziet.
2. Voer een test uit in PageSpeed Insights en bewaar de bevindingen over afbeeldingen.
3. Beheert iemand anders je website, geef die persoon dan het adres en rapport. Vraag om eerst die afbeelding te controleren voordat de hele bibliotheek wordt aangepast.

De volgende onderdelen helpen je de volgende controle te kiezen. Voor nader onderzoek laat het Network-paneel van de browser zien welke bestanden de pagina downloadt en hoelang elke aanvraag duurt.

Koppel het symptoom aan een controle

Optioneel: de afbeelding onderzoeken in het Network-paneel

Open de pagina op een computer in Chrome. Open de ontwikkelaarstools met Ctrl + Shift + J op Windows of Linux, of Command + Option + J op een Mac. Kies het tabblad Network en volg deze stappen:

1. Kies het afbeeldingsfilter Img.
2. Schakel Disable cache in en herlaad de pagina met het paneel open. Zo controleer je een nieuwe download in plaats van een kopie die de browser heeft opgeslagen.
3. Selecteer de aanvraag voor de probleemafbeelding. Controleer het voorbeeld om zeker te weten dat je de juiste afbeelding hebt.
4. Noteer de afbeeldings-URL en bestandsgrootte.
5. Open Timing om te zien waar de aanvraag tijd kost en bekijk Initiator om te zien wat haar startte.

Deze browserinstelling leegt niet de cache van de websiteserver of het CDN. Een CDN levert websitebestanden vanaf verspreide servers en kan eigen kopieën bewaren.

Begint het verzoek laat, controleer of HTML, een script of lazy loading het start. Begint het vroeg maar wacht het lang, vergelijk een andere afbeelding en het HTML-document. Komt het snel binnen zonder zichtbaar te worden, onderzoek CSS, animaties en JavaScript. Herstel de fase die werkelijk vertraagt.

Timing toont waar de aanvraag tijd aan besteedt, zoals wachten op de server of downloaden. Initiator laat zien wat de aanvraag startte, zoals HTML of een script. Zo onderscheid je een groot bestand van een late aanvraag.

Chromes Network-documentatie

Maak in Timing onderscheid tussen Queueing of Stalled, Waiting for server response (TTFB) en Content Download. De tijd vóór verzending kan samenhangen met browserplanning of het opzetten van de verbinding en is niet alleen serververwerking. TTFB bevat ook de reistijd door het netwerk; lang wachten bewijst dus geen hostingprobleem. Een lange downloadfase wijst op de hoeveelheid data en de verbindingssnelheid. Vergelijk meerdere verzoeken onder dezelfde omstandigheden.

Verklein onnodig grote bestanden

Downloadt een kleine kaart een enorme foto, begin met de afmetingen. Maak met de resizer een proportionele kopie en vergelijk daarna WebP of AVIF als je leveringssysteem die ondersteunt. De formaatgids helpt kiezen.

Bekijk het hele beginscherm. Tientallen gelijktijdige kleine miniaturen kunnen samen te veel overdragen. Beslis welke meteen nodig zijn en welke mogen wachten tot de bezoeker dichterbij scrolt.

Corrigeer timing als grootte niet het probleem is

Laat lazy loading het belangrijkste zichtbare beeld niet vertragen. Wacht het op een animatie of script, onderzoek de volgorde met de ontwikkelaar. Googles LCP-gids scheidt laden en rendering.

Vergelijk meerdere verzoeken voordat je het formaat beschuldigt. Wachten ook HTML en andere bronnen lang, onderzoek hosting en levering. Tien nieuwe exports lossen de tijd vóór het serverantwoord waarschijnlijk niet op.

Test opnieuw onder gelijke omstandigheden

Een herhaalbezoek kan sneller zijn door cache. Noteer vers of gecachet laden en houd apparaat en netwerk gelijk. Test ook smal: zo kan een ontbrekende mobiele variant zichtbaar worden.

1. Noteer een trage URL en het betreffende afbeeldingsverzoek.
2. Verander het bestand of het laadgedrag.
3. Controleer of de nieuwe versie wordt geleverd.
4. Herhaal de meting en controleer de beeldkwaliteit.

Bekijk het beginscherm van een galerij als geheel: hoofdbeeld en twintig miniaturen kunnen andere laadregels nodig hebben. Geef de zichtbare afbeelding voorrang en stel lagere beelden waar passend uit. Scroll daarna door alles en navigeer terug om late afbeeldingen en lege plekken op te sporen.