Een slider laadt onzichtbare foto's mee

Veel sliders zetten alle foto's als gewone afbeeldingen in de pagina, en schuiven ze met script of stijl in beeld. Voor de browser is een foto die buiten beeld staat dan nog steeds een afbeelding die opgehaald moet worden. Sommige sliders zetten foto's ook als achtergrond in stijlregels, wat de volgorde van ophalen opnieuw verandert.

De uitleg over webprestaties van MDN behandelt hoe je laadtijd meet en verbetert, onder meer door minder cruciale onderdelen later te laden. Dat sluit aan bij de aanpak hier, als eigen werkregel en niet als bronclaim: de eerste slide hoort bij het begin van de pagina, de volgende slides horen bij later.

Of de extra foto's in jouw geval echt een probleem zijn, hangt af van het formaat en de verbinding van je bezoekers. Daarom begin je met meten en niet met aanpassen.

1. Open de pagina met de slider in een privévenster en open de ontwikkelaarstools van je browser. De exacte naam en plaats van het netwerkpaneel verschilt per browser, dus zoek die in de browser zelf.
2. Zet de cache uit zolang het paneel open staat en kies een trage netwerksimulatie, zodat de volgorde duidelijk zichtbaar wordt.
3. Filter op afbeeldingen en laad de pagina opnieuw.
4. Noteer per afbeelding de volgorde van aanvraag en de grootte, en de prioriteit als je browser die toont. Let op: de getoonde grootte kan overdracht of uitgepakte bestandsgrootte zijn, en een ander scherm of een andere pixeldichtheid kan een ander bestand laden.
5. Kijk naar de eerste afbeelding die zichtbaar wordt. Is dat slide 1, en werd die vroeg aangevraagd?
6. Tel hoeveel sliderfoto's zijn opgehaald voordat de bezoeker iets heeft aangeraakt.
7. Scroll niet en klik niet door de slider. Dat is jouw nulmeting.

Het resourcetimingdeel uit de MDN-uitleg is het onderliggende principe: elke resource heeft een eigen tijdsmeting. Je hoeft die niet te programmeren, de netwerklijst toont de uitkomst.

De eerste slide uitstellen is de meest voorkomende fout. De zichtbare foto komt dan later in beeld, precies het omgekeerde van wat je wilt.

Zoek eerst in de instellingen of de documentatie van je thema of slider of er een optie bestaat om afbeeldingen uit te stellen. Verzin geen optienamen, de leverancier of de webbouwer weet wat jouw versie aanbiedt. Is er geen optie, dan is een aanpassing in de sjablonen nodig.

De cursus Learn Performance van web.dev bespreekt resourcehints, waarmee je de browser kunt helpen resources vroeger of met een hogere prioriteit te laden. Als eigen werkregel, niet als bronclaim: geef slide 1 voorrang en onderzoek of het sliderscript en de overige foto's later kunnen laden. Gebruik een hint alleen voor die ene eerste foto, anders concurreren je hints met elkaar.

Reserveer ook de ruimte van elke foto met vaste afmetingen of een vaste verhouding. Dan springt de pagina niet als een uitgestelde foto alsnog verschijnt. Test dat visueel op een trage simulatie.

Een slider is ook een bedieningselement. De toegankelijkheidstutorials van W3C behandelen onder meer toegankelijke afbeeldingen. Kijk in die verzameling na of er een tutorial voor jouw type component staat voordat je een oplossing kiest.

Controleer na het uitstellen minstens vier punten. Heeft elke foto die informatie draagt een passend alternatief? Kun je de slider met het toetsenbord bedienen? Is er een manier om automatisch schuiven te stoppen? En zijn slides die nog niet zichtbaar zijn niet per ongeluk bereikbaar voor een toetsenbord of schermlezer? Dit zijn controlevragen, geen garantie dat je site aan een norm voldoet. Voor zo'n oordeel is een volledige toegankelijkheidsaudit nodig.

Herhaal exact dezelfde meting als vóór de aanpassing: zelfde pagina, zelfde simulatie, zelfde filter. Zet beide netwerklijsten naast elkaar. Je verwacht dat slide 1 vooraan staat en de andere slides niet vóór interactie zijn opgehaald. Controleer ook de slider zelf: schuift die nog, en verschijnt elke foto zonder lege plek?

Fictief scenario, alleen invoer en verwachte controles. Invoer: een homepage met een slider van vijf foto's, alle vijf als gewone afbeelding in de pagina, zonder uitstelinstelling. Verwachte controles: in de nulmeting zie je vijf sliderfoto's in de netwerklijst voor iemand iets aanraakt. Na de aanpassing verwacht je alleen de eerste foto vooraf, en de resterende pas later, afhankelijk van hoe jouw slider uitstelt. Slide 1 is niet als lazy gemarkeerd en geen sprong in de layout. Wat de meting werkelijk oplevert, noteer je zelf.

Wil je weten welke publieke signalen je site toont, kijk dan via Marketing Scan. Ga er niet van uit dat een publieke scan de ophaalvolgorde in jouw browser meet. De netwerktest hierboven blijft jouw eigen controle.