Een kaart pas laden als de bezoeker hem nodig heeft

De vraag is niet of kaarten slecht zijn. De vraag is: heeft de bezoeker op deze pagina de interactieve kaart nodig bij het eerste scherm, of volstaan adres, route en een link? Dat is een bruikbaarheidsvraag met een netwerkgevolg.

De webperformance-documentatie van MDN beschrijft het streven om laad- en reactietijden te beperken en langere staartonderdelen van de ervaring asynchroon te laden. Uitstel van een kaart tot de bezoeker erom vraagt past binnen dat denkkader. Een kaart onderaan een contactpagina is een kandidaat, maar geen automatische keuze. Op een pagina waar de kaart de hoofdtaak is, bijvoorbeeld een vestigingenzoeker, kan uitstel de bezoeker juist ophouden.

Formuleer daarom eerst de hoofdtaak van de pagina in één zin. Voorbeeld: 'De bezoeker moet het adres, de openingsuren en een routeknop vinden.' Alles wat die taak niet vereist, komt in aanmerking voor uitstel of vervanging.

Zonder uitgangspunt kun je geen verbetering of verslechtering vaststellen. Volg deze stappen op een eigen testpagina of in een testomgeving:

1. Open de pagina in een privévenster, zodat extensies en cache je meting minder beïnvloeden.
2. Open de ontwikkelaarstools van je browser en zoek het netwerkoverzicht. De naam en plaats verschillen per browser en versie, dus controleer dit in jouw browser.
3. Leeg het overzicht, laad de pagina opnieuw en scrol niet.
4. Noteer het aantal aanvragen en de overgedragen gegevens, en welke daarvan van de kaartaanbieder komen.
5. Herhaal de meting drie keer en noteer de spreiding. Eén meting is een momentopname.

Het cursusmateriaal van web.dev over prestaties plaatst dit binnen het kritieke renderpad en het laden van bronnen. Gebruik die begrippen om te beoordelen of kaartbestanden iets blokkeren, in plaats van alleen het totaal te bekijken.

Test elke variant met dezelfde pagina, dezelfde browser en dezelfde netwerkinstelling. Vul daarna dit blad in. De kolom 'Jouw meting' blijft leeg tot je zelf gemeten hebt.

Beslisregel: kies de adreslink als de hoofdtaak een route of adres is. Kies kaart na klik als een voorbeeld ter plaatse waarde heeft maar niet direct nodig is. Houd de standaardkaart als bezoekers de kaart meteen gebruiken. Lees bovendien het privacy- en cookiebeleid van de kaartaanbieder en laat juridische vragen over toestemming door een deskundige beoordelen.

Minder verkeer is geen winst als de oplossing minder bruikbaar wordt. De toegankelijkheidstutorials van W3C WAI bieden praktische richtlijnen voor toegankelijke webinhoud, zoals afbeeldingen en tabellen. Ze behandelen geen kaart met laadknop als aparte casus. De onderstaande vragen zijn dus eigen redactionele controles en geen bewijs van WCAG-conformiteit:

• Bereik je de laadknop met enkel het toetsenbord, en is de focus zichtbaar?
• Zegt de knoptekst wat er gebeurt, bijvoorbeeld 'Toon kaart van onze locatie'?
• Staat het volledige adres als gewone tekst naast of boven de knop?
• Is de plaats van de kaart na het laden voorspelbaar, zonder dat de inhoud eronder verspringt?
• Werkt de adreslink op een telefoon zonder extra uitleg?

Een publieke scan of eigen controle toont je zichtbare signalen. Of een schermlezer de oplossing goed verwerkt, test je alleen met een echte handmatige test.

Dit voorbeeld bevat enkel invoer en verwachte controles, geen resultaten.

Invoer: een contactpagina met adres, openingsuren en een standaard ingebedde kaart onderaan. Er zijn twee testtoestellen: een laptop en een telefoon. Het besluit is nog open.

Opdracht aan de beheerder:

1. Meet de standaardpagina zoals beschreven in de tweede sectie.
2. Maak een kopie met enkel een adreslink en meet opnieuw.
3. Maak een kopie met een knop die de kaart pas na een klik toont en meet vóór en na de klik.
4. Vul het beslisblad in en noteer de toestellen, browser en datum.

Verwachte technische controles: bij de variant met klik zie je vóór de klik geen aanvragen naar de kaartaanbieder, en erna wel. Als dat niet zo is, laadt er elders op de pagina nog een script mee dat de kaart of de aanbieder aanroept. Zoek die bron en pas het plan aan.

Na publicatie herhaal je dezelfde testroute op de live pagina, in dezelfde browser. Controleer vier dingen: de kaartaanvragen vóór de klik, de werking van de knop met toetsenbord, de zichtbaarheid van het adres als tekst en de werking op een telefoon. Cache en een cookiebanner kunnen de meting beïnvloeden, dus noteer die voorwaarden.

Zet voor de overdracht vijf dingen in het document: de pagina, de gekozen variant, de reden, de meetmethode en een datum voor herhaling. Zo kan een collega of externe bouwer later zien waarom de kaart niet meer vanzelf laadt.

Wil je weten welke publieke signalen je website nu toont, bekijk dan je eigen site via Marketing Scan. Een scan meet zichtbare signalen en vervangt de handmatige controles hierboven niet.