Google Maps 100% page speed gids

Impact van Google Maps op je Core Web Vitals

Er zijn veel redenen om Google Maps op je pagina in te sluiten. Het is bijvoorbeeld geweldig om de locatie van je bedrijf te tonen. Maar er is een addertje onder het gras. Google Maps is niet zo snel als je van een Google-service zou verwachten. In feite is Google Maps op je pagina een behoorlijke aanslag op je page speed.

Het kost 14% van mijn perfecte 100% page speed-score. Het doet dit met mijn Google Lighthouse-statistieken:

1. First Contentful Paint + 0,8 sec. De eerste paint loopt bijna een seconde vertraging op omdat Google Maps interfereert met het laden van de pagina.
2. Speed Index + 3,1 sec. Speed Index verdrievoudigde door het renderen van kaarten en het blokkeren van de main thread.
3. Largest Contentful Paint + 0,8 sec. De largest contentful paint is met 0,8 seconden vertraagd, net als de first contentful paint.
4. Time to Interactive + 6,5 sec. Omdat Google Maps sterk afhankelijk is van JavaScript, duurt het meer dan 6 seconden om met de pagina te interageren. Lighthouse heeft sindsdien TTI vervangen door Total Blocking Time, maar de oorzaak is hetzelfde: Google Maps JavaScript blokkeert je main thread, wat schadelijk is voor 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. Verwijder ongebruikte JavaScript-waarschuwing. Als klap op de vuurpijl krijg je nog een waarschuwing dat je grote delen van de Google Maps JavaScript niet gebruikt. Probeer dat maar eens aan een klant uit te leggen.

Je eerste gedachte is misschien om de kaarten 'lazy' te laden met het iframe-attribuut loading="lazy". Dat werkt daadwerkelijk in moderne browsers met een wereldwijde dekking van 95%. Maar voor maximale prestaties is het niet genoeg. Chrome begint lazy iframes ongeveer 1.250px onder de viewport te laden bij snelle verbindingen en 2.500px bij trage verbindingen. Als je kaart ook maar in de buurt is van het zichtbare gebied, laadt deze nog steeds tijdens de initiële pagina-render en concurreert met je kritieke resources. Voor echt nul impact wil je een facade: laad absoluut niets totdat de gebruiker daadwerkelijk interactie heeft met de kaart.

Stap 1: Statische kaarten

De eenvoudigste optie is om een statische kaart te gebruiken. Dit betekent dat je in plaats van een interactieve kaart alleen een afbeelding van de kaart gebruikt. Het voordeel hiervan is dat een afbeelding veel sneller laadt. Het nadeel is dat je niet kunt interageren met een afbeelding. Je kunt dus niet inzoomen, scrollen of navigeren.

We beginnen met een statische kaart. Later kunnen we deze statische kaart omzetten in een interactieve kaart die de page speed 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 je hebt wel een API-sleutel nodig. Ik zal je laten 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 > een kaart insluiten. Kopieer de code en plak deze op je pagina. Klik nu met de rechtermuisknop op de pagina en selecteer 'inspecteren'. Je ziet nu de elementen-inspector van de 'dev console' van je browser. Zoek nu de iframe-code, klik er met de rechtermuisknop op en selecteer 'capture node screenshot'.

2. Converteer de statische afbeelding naar WebP-formaat

De kaartafbeelding die je zojuist hebt gedownload, heeft het PNG-formaat. Omdat we voor page speed gaan, gebruiken we het veel snellere WebP-formaat. Je kunt je afbeelding online converteren op ezgif of je kunt deze zelf converteren met de tool cwebp: cwebp -q 60 image.png -o image.webp.

Stap 2: Converteer de statische kaartafbeelding naar een interactieve kaart

De statische kaart zorgt ervoor dat er geen page speed verloren gaat tijdens het laden van de pagina. Bij het laden van de pagina betekent dit dat we nog geen interactieve Google map hebben. Op een gegeven moment na het laden van de pagina zullen we de statische kaart op de achtergrond vervangen door een interactieve kaart. We zullen dit doen nadat de pagina is gerenderd en gepaint. Dit kan op 2 manieren. De eerste manier is om de statische kaart te vervangen zodra je er met de muis overheen zweeft. De tweede is om de statische kaart te vervangen zodra de browser inactief is (idle).

3. Plaats de statische kaartafbeelding in een placeholder

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

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

Voeg wat styling toe in je stylesheet. Zoals je kunt zien, gebruiken we de statische kaartafbeelding als een achtergrondafbeelding en passen we een padding van 76,25% bovenaan toe voor de juiste beeldverhouding. De uiteindelijke kaart krijgt een absolute positie over de gehele 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 tijdens de eerste interactie

Dit is waar de magie gebeurt. Zonder dit kleine stukje JavaScript is de kaart slechts een statische afbeelding. Dit JavaScript voegt een event listener toe (en verwijdert deze) aan de placeholder container en wacht op het 'mouseover' event (wanneer je met je muis over de statische kaart zweeft) 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)

Als de Google map direct zichtbaar is in de viewport, is het vaak een slim idee om de achtergrondkaartafbeelding te preloaden. Gebruik deze code om de statische kaartafbeelding te preloaden: <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> en plaats dit zo vroeg mogelijk in de <head> van je pagina. In dit voorbeeldgeval versnelt het preloaden van de placeholder afbeelding de LCP met bijna een seconde.

Stap 2b: Vervang de statische kaartafbeelding automatisch

Wanneer de kans groot is dat de bezoeker interactie zal hebben met de kaart, kan het een goed idee zijn om niet te wachten op het mouseover event. Zodra de browser inactief is (idle), begin je de kaart in de pagina te injecteren. Het proces is min of meer hetzelfde als hierboven. Je kunt ze zelfs allebei combineren.

4b. Laad de interactieve kaart automatisch

We zullen hier het 'load event' gebruiken. Het load event is een signaal dat je browser uitzendt zodra de pagina klaar is met laden. Daarna zetten we de statische kaart om naar de interactieve kaart! Voor meer van dit soort technieken, zie 16 methoden 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

Als je een van deze technieken toepast, zul je merken dat de pagina laadt met een 100% Lighthouse-score en een 100% PageSpeed Insights-score met behoud van alle functionaliteit van Google Maps!

Volgens de 2025 Web Almanac mist 91% van de pagina's met iframes nog steeds volledig een loading attribuut. Dat betekent dat de overgrote meerderheid van de Google Maps embeds wordt geladen zonder enige optimalisatie. De facade-aanpak geeft je een grote voorsprong.

Om te verifiëren dat je wijzigingen daadwerkelijk de echte user experience verbeteren, stel je Real User Monitoring in. Lab-scores zijn nuttig voor het debuggen, maar veldgegevens van echte bezoekers zijn wat Google gebruikt voor de ranking.

Succes met het sneller maken van Google Maps. Heb je hulp nodig? Neem dan contact met mij op!