Handleiding voor 100% paginasnelheid met Google Maps

Impact van Google Maps op je Core Web Vitals

Er zijn genoeg redenen om Google Maps op je pagina te embedden. Het is bijvoorbeeld ideaal om je bedrijfslocatie te laten zien. Maar er zit een addertje onder het gras. Google Maps is niet zo snel als je van een Google-dienst verwacht. Sterker nog: Google Maps op je pagina trekt je paginasnelheid flink omlaag.

Het kost 14% van mijn perfecte paginasnelheidsscore van 100%. Dit doet het met mijn Google Lighthouse-statistieken:

1. First Contentful Paint + 0,8 sec. De first paint is bijna een seconde later doordat Google Maps het laden van de pagina verstoort.
2. Speed Index + 3,1 sec. De Speed Index verdrievoudigde door het renderen van de kaart en het blokkeren van de main thread.
3. Largest Contentful Paint + 0,8 sec. De largest contentful paint loopt 0,8 seconden vertraging op, net als de first contentful paint.
4. Time to Interactive + 6,5 sec. Doordat Google Maps zwaar leunt op JavaScript, duurt het ruim 6 seconden voordat interactie met de pagina mogelijk is. Lighthouse heeft TTI inmiddels vervangen door Total Blocking Time, maar de kernoorzaak blijft gelijk: JavaScript van Google Maps blokkeert je main thread en dat schaadt je Interaction to Next Paint (INP).
5. Total Blocking Time + 320ms. Google Maps blokkeert de main thread met 320ms. Dat is precies wat we niet willen.
6. Remove unused JavaScript warning. Als klap op de vuurpijl krijg je nog een waarschuwing dat je grote delen van het JavaScript van Google Maps niet gebruikt. Leg dat maar eens uit aan een klant.

Je eerste gedachte is misschien om de kaart 'lazy' te laden met het iframe-attribuut loading="lazy". Dat werkt in moderne browsers met 95% wereldwijde dekking. Maar voor maximale performance is dat niet genoeg. Chrome begint op snelle verbindingen al zo'n 1.250px onder de viewport met het laden van lazy iframes, en op trage verbindingen al op 2.500px. Staat je kaart ook maar enigszins in de buurt van het zichtbare deel, dan laadt hij alsnog tijdens de initiële render van de pagina en concurreert hij met je kritieke resources. Voor echt nul impact wil je een facade: laad helemaal niets totdat de gebruiker interactie heeft met de kaart.

Stap 1: Statische kaarten

De makkelijkste optie is een statische kaart. In plaats van een interactieve kaart gebruik je dan alleen een afbeelding van de kaart. Het voordeel is dat een afbeelding veel sneller laadt. Het nadeel is dat je geen interactie hebt met een afbeelding: je kunt niet inzoomen, scrollen of navigeren.

We beginnen met een statische kaart. Later zetten we die om naar een interactieve kaart die de paginasnelheid niet verstoort.

Er zijn verschillende manieren om een statische kaart op je pagina te plaatsen. Er zijn tools die je daarbij helpen, zoals Static Map Maker, maar daar heb je een API-key voor nodig. Ik laat je zien hoe je handmatig een statische kaartafbeelding downloadt.

1. Plaats de kaart op je pagina

Plaats de kaart op je pagina. Ga naar Google Maps, zoek een locatie en klik op Delen > Kaart insluiten. Kopieer de code en plak deze op je pagina. Klik nu met de rechtermuisknop op de pagina en kies 'Inspecteren'. Je ziet nu de element inspector in de dev console van je browser. Zoek de iframe-code, klik er met rechts op en kies 'Capture node screenshot'.

2. Converteer de statische afbeelding naar WebP-formaat

De kaartafbeelding die je net hebt gedownload, is in PNG-formaat. Omdat we voor paginasnelheid gaan, gebruiken we het veel snellere WebP-formaat. Je kunt je afbeelding online converteren via ezgif, of zelf met de tool cwebp: cwebp -q 60 image.png -o image.webp.

Stap 2: Zet de statische kaartafbeelding om naar een interactieve kaart

De statische kaart zorgt ervoor dat er tijdens het laden van de pagina geen paginasnelheid verloren gaat. Tijdens de page load hebben we dus nog geen interactieve Google-kaart. Ergens na de page load vervangen we de statische kaart op de achtergrond door een interactieve kaart. Dat doen we nadat de pagina is gerenderd en gepaint. Dit kan op 2 manieren. De eerste manier is de statische kaart vervangen zodra je er met de muis overheen beweegt. De tweede is de statische kaart vervangen zodra de browser idle is.

3. Plaats de statische kaartafbeelding in een placeholder

Omdat we willen dat de kaart er goed uitziet op zowel mobiel als desktop, gebruiken we deze CSS-truc. Daarmee kloppen de verhoudingen van de kaart altijd, ongeacht de schermgrootte van de bezoeker. Dit reserveert ruimte voor de kaart en voorkomt een layout shift (CLS) als de interactieve kaart laadt. We voegen nu een data-src-attribuut toe aan de container, dat we later gebruiken als bron-URL voor de Google-kaart.

Plaats eerst de container voor de kaart op de pagina:
<div data-src="https://maps.google.com/mapsq=fyn+()&z=9&output=embed" id="mymap"></div>

Voeg wat styling toe aan je stylesheet. Zoals je ziet gebruiken we de statische kaartafbeelding als achtergrondafbeelding en passen we aan de bovenkant een padding van 76,25% toe voor de juiste aspect ratio. De uiteindelijke kaart krijgt een absolute positionering over de volledige breedte en hoogte van de statische kaart.

#mymap{
    background: url(/image.webp);
    background-size: cover;
    position: relative;
    overflow: hidden;
    padding-top: 76.25%;
}
#mymap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

4. Laad de interactieve kaart bij de eerste interactie

Hier gebeurt het echte werk. Zonder dit kleine stukje JavaScript is de kaart gewoon een statische afbeelding. Dit script voegt een event listener toe aan de placeholder-container en verwijdert die daarna weer. Het wacht op het 'mouseover'-event (zodra je met de muis over de statische kaart beweegt) om de interactieve kaart in de container te injecteren.

const map = document.getElementById('mymap');
const mapListener = function(e) {
    const frame = document.createElement('iframe');
    frame.src = this.getAttribute('data-src');
    map.appendChild(frame);
    map.removeEventListener('mouseover', mapListener);
};
map.addEventListener('mouseover', mapListener);

5. Preload de achtergrondafbeelding (optioneel)

Is de Google-kaart direct zichtbaar in de viewport, dan is het slim om de achtergrondafbeelding te preloaden. Gebruik deze code om de statische kaartafbeelding te preloaden: <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> en zet dit zo vroeg mogelijk in de <head> van je pagina. In dit voorbeeld maakt het preloaden van de placeholder-afbeelding de LCP bijna een seconde sneller.

Stap 2b: Vervang de statische kaartafbeelding automatisch

Is de kans groot dat de bezoeker interactie heeft met de kaart? Wacht dan niet op het mouseover-event. Begin met het injecteren van de kaart in de pagina zodra de browser idle is. Het proces werkt vrijwel hetzelfde als hierboven. Je kunt beide manieren zelfs combineren.

4b. Laad de interactieve kaart automatisch

We gebruiken hiervoor het 'load-event'. Dat load-event is een signaal dat je browser afgeeft zodra de pagina klaar is met laden. Daarna zetten we de statische kaart om naar de interactieve kaart! Kijk voor meer van dit soort technieken bij 16 manieren om JavaScript uit te stellen.

window.addEventListener('load',
    function(e) {
        const map = document.getElementById('mymap');
        const frame = document.createElement('iframe');
        frame.src = map.getAttribute('data-src');
        map.appendChild(frame);
});      

Het resultaat

Pas je een van deze technieken toe, dan merk je dat de pagina laadt met een 100% Lighthouse-score en een 100% PageSpeed Insights-score, terwijl alle functionaliteit van Google Maps behouden blijft!

Volgens de Web Almanac 2025 ontbreekt bij 91% van de pagina's met iframes een loading-attribuut nog volledig. Dat betekent dat het overgrote deel van de Google Maps-embeds zonder enige optimalisatie laadt. Met de facade-aanpak loop je ver voorop.

Wil je controleren of je wijzigingen de ervaring van echte gebruikers verbeteren? Richt dan Real User Monitoring in. Labscores zijn handig bij het debuggen, maar Google gebruikt field data van echte bezoekers voor de ranking.

Veel succes met het versnellen van Google Maps. Hulp nodig? Neem dan contact met me op!