Mobiel

Waarom een pagina met veel afbeeldingen trager laadt op mobiel

Dezelfde pagina die direct laadt op kantoor-wifi kan kruipen op een mobiele verbinding, puur door de gewicht van afbeeldingen.

Wat het is

Deze check kijkt naar hoeveel afbeeldingen een pagina laadt, en markeert pagina's met een ongewoon groot aantal, aangezien elke extra afbeelding weer een apart bestand is dat de browser moet downloaden voordat de pagina volledig klaar is met laden. Dit gaat er niet om dat afbeeldingen inherent slecht zijn β€” ze zijn vaak essentieel voor het ontwerp en de inhoud van een pagina β€” het gaat specifiek om het cumulatieve effect van er heel veel tegelijk te laden.

De praktische impact van een hoog aantal afbeeldingen wordt veel scherper gevoeld op mobiel dan op desktop, omdat mobiele verbindingen (zelfs goede) doorgaans trager en minder consistent zijn dan een thuis- of kantoor-wifi- of bekabelde verbinding.

Waarom het belangrijk is

Elke afbeelding voegt toe aan de totale hoeveelheid data die het apparaat van een bezoeker moet downloaden voordat de pagina volledig bruikbaar is, en specifiek op een mobiele dataverbinding kan die downloadtijd merkbaar oplopen vergeleken met dezelfde pagina die bijna direct laadt op een snelle desktopverbinding. Een bezoeker die wacht op een traag ladende, afbeeldingzware pagina op zijn telefoon geeft aanzienlijk sneller op en vertrekt voordat hij klaar is met laden, vergeleken met een lichtere pagina die veel eerder bruikbaar wordt.

Dit is een geval waarin een oplossing niet per se betekent dat je content moet verwijderen waar een bezoeker om geeft β€” het gaat veel vaker om hoe die afbeeldingen worden geleverd (hun bestandsgrootte, en of ze allemaal direct laden) dan dat ze helemaal geschrapt hoeven te worden.

Hoe je het oplost

  1. Tel hoeveel afbeeldingen direct laden op de pagina, en identificeer alle afbeeldingen die ongewoon groot zijn in bestandsgrootte (de ontwikkelaarstools van je browser kunnen dit per afbeelding tonen).
  2. Comprimeer grote afbeeldingen met een gratis tool voor afbeeldingscompressie voordat je ze uploadt β€” dit verkleint de bestandsgrootte vaak drastisch zonder zichtbaar kwaliteitsverlies.
  3. Voeg lazy loading toe aan afbeeldingen die verder naar beneden op de pagina staan (onder wat zichtbaar is zonder scrollen), zodat ze pas laden zodra een bezoeker er daadwerkelijk naartoe scrolt, in plaats van allemaal tegelijk wanneer de pagina voor het eerst opent.
  4. De meeste moderne websitebouwers en CMS-platforms ondersteunen lazy loading met een simpele schakelaar of automatisch standaard β€” controleer je afbeeldings- of prestatie-instellingen voordat je het handmatig toevoegt.
  5. Test de mobiele laadtijd van de pagina opnieuw na wijzigingen, idealiter op een echte mobiele verbinding in plaats van snelle kantoor-wifi.

Controleer of jouw eigen website dit probleem heeft

Launch Readiness scant je website in enkele seconden op dit en ~50 andere problemen vΓ³Γ³r de lancering β€” gratis, zonder registratie.

Start een gratis controle