Afbeeldingen buiten beeld uitgesteld
Silktide controleert of je pagina afbeeldingen downloadt die de bezoeker nog niet kan zien - afbeeldingen die verderop op de pagina staan, onder het eerste scherm. Als je deze vooraf laadt, wordt de inhoud waar de bezoeker daadwerkelijk naar kijkt vertraagd.
De oplossing is : de browser haalt elke afbeelding op vlak voordat deze in beeld komt, in plaats van alle afbeeldingen op de pagina meteen te downloaden.
Waarom dit belangrijk is
Wanneer een pagina wordt geladen, heeft de browser beperkte bandbreedte beschikbaar en concurreert elke afbeelding die wordt gedownload met al het andere. Als die bandbreedte wordt besteed aan afbeeldingen die drie schermen verderop staan, komen de hoofdafbeelding, tekst en knoppen waarop de bezoeker wacht later aan.
Op lange pagina's met veel afbeeldingen is de verspilling groot: een bezoeker die het eerste scherm leest en daarna vertrekt, heeft mogelijk - in tijd en mobiele data - betaald voor tientallen afbeeldingen die nooit zijn bekeken.
Hoe je dit oplost
- Voeg
loading="lazy"toe aan afbeeldingen onder het eerste scherm. Browsers ondersteunen dit standaard, zonder dat scripts nodig zijn:
<!-- Ver onderaan de pagina: pas laden wanneer de bezoeker in de buurt komt -->
<img src="team-photo.jpg" alt="Ons team" loading="lazy" width="800" height="600">
- Gebruik geen lazy loading voor afbeeldingen bovenaan de pagina, vooral niet voor de grootste afbeelding - daardoor wordt vertraagd wat bezoekers als eerste zien en levert het meer nadelen dan voordelen op.
- Veel CMS'en en frameworks laden afbeeldingen tegenwoordig automatisch met lazy loading; als dat bij jouw systeem niet gebeurt, controleer dan eerst of er een instelling of plug-in beschikbaar is voordat je templates bewerkt.
- Geef afbeeldingen met lazy loading expliciete afmetingen, zodat de pagina niet verspringt wanneer ze worden geladen - zie Expliciete afbeeldingsafmetingen.
Hoe Silktide dit test
- Laad de pagina in een echte browser, met het apparaattype, de verbindingssnelheid en de testlocatie die voor je snelheidstests zijn geconfigureerd.
- Identificeer afbeeldingen die tijdens het laden worden gedownload, volledig onder het zichtbare scherm staan en nog niet zijn uitgesteld.
- Rapporteer elke afbeelding buiten beeld met de downloadgrootte die kon worden uitgesteld.
- Beoordeel de pagina op basis van de totale uitstelbare grootte: rond 30 KB leidt tot een lagere beoordeling, 100 KB of meer wordt als slecht beoordeeld.
Problemen oplossen
De afbeelding is zichtbaar op mijn scherm
Wat "buiten beeld" is, hangt af van het scherm. Silktide test met het apparaat dat voor je snelheidstests is geconfigureerd. Daardoor kan een afbeelding naast de onderrand van je desktopweergave onder het eerste scherm van een kleinere vallen. Lazy loading blijft veilig: de afbeelding wordt geladen zodra de bezoeker in de buurt komt.
We gebruiken al lazy loading met een script
Oudere aanpakken op basis van scripts starten soms nog steeds te vroeg met downloaden, of het script omvat mogelijk geen afbeeldingen die door andere plug-ins zijn toegevoegd. De gerapporteerde afbeeldingen laten precies zien wat buiten beeld is gedownload; de native loading="lazy"-functie is de eenvoudigste betrouwbare oplossing.