Google maps met 100% pagespeed. Zo doe je dat!

Arjen Karel Core Web Vitals Consultant
Arjen Karel
linkedin

Razendsnelle maps ins het kort

Google maps houdt weinig rekening met jouw Lighthouse score. Er wordt een iFrame, verschillende JavaScript bestanden en StyleSheets geladen die het laden van de pagina allemaal blokkeren.

Helaas heb je  geen controle over wat Google allemaal op jouw pagina plaatst. Je kunt er wel voor zorgen dat Google de map pas gaat laden wanneer jouw browser klaar is met het tonen van de belangrijkste inhoud van jouw pagina.

De beste manier om; Google maps te gebruiken en toch een 100% pagespeed insights en lighthouse score te behalen is door een placeholder afbeelding te gebruiken en die pas te vervangen wanneer een bezoeker interactie met de map aangaat.

Impact van Google maps op de Lighthouse score

Soms wil je graag een mooie 'Google-maps' map op jouw pagina insluiten. Het is een handige manier om bezoekers te laten zien waar ze jouw bedrijf kunnen vinden bijvoorbeeld.
Maar er is een catch. Google maps, is niet zo snel als je zou verwachten van een Google-service. Sterker nog: Google maps op jouw pagina is een regelrechte aanslag op jouw pagina snelheid.
Het kost 14% van mijn perfecte 100% pagina snelheids score. Dit doet het met mijn Google lighthouse statistieken

  1. First contentful paint+ 0,8 sec . De eerste paint wordt bijna een seconden later uitgevoerd omdat Google maps parallel worden geladen.
  2. Speed index + 3,1 sec Snelheidsindex verdrievoudigd doordat maps moet rendering en de main thread blokkeert
  3. Largest contentful paint + 0,8 sec. De largest contentful paint wordt net zoals de first contentful paint met .8 seconden vertraagd.
  4. Time to interactive +6.5sec. Doordat Google maps zwaar op javascript leunt dat allemaal uitgevoerd moet wroden kost het meer dan 6 seconden extra de interactie met de pagina aan te gaan.
  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. Om het af te maken krijg je nog een waarschuwing dat je grote delen van het Google Maps javascript niet gebruikt. Probeer dat maar eens uit te leggen aan een klant.

initiële paginasnelheid voor google maps

Jouw eerste gedacht is misschien om het maps 'lazy te loaden' met het iframe attribuut  loading="lazy" . Helaas, dat heeft vaak weinig zin.  iFrames die via loading="lazy" uitgesteld worden geladen, worden door browsers nog steeds vroeg binnengehaald en uitgevoerd. We moeten dus iets slimmers bedenken.

Stap 1 - Statische maps

De meeste gemakkelijke optie is het plaatsen van een statische map. Dat wil zeggen dat je in plaats van een interactieve map een afbeelding van de map plaatst.  Het voordeel hiervan is dat een afbeelding vele malen sneller laadt. Het nadeel is dat je geen interactie met een afbeelding kan hebben. Je kunt dus niet inzoomen, scrollen of navigeren. 

We beginnen daarom met een statische map. Later kunnen we deze statische map omzetten in een echte map, waar je wel interactie mee kunt hebben.

Er zijn verschillende manieren om een statische map op jouw pagina neer te zetten. De gemakkelijkste is via de tool Static Map Maker maar daar heb je een API sleutel voor nodig. Ik zal je daarom laten zien hoe je dit gemakkelijk met de hand kunt doen.

1 - plaats de maps op jouw pagina.

Plaats de map op jouw pagina. Ga naar Google maps, zoek een locatie op en klik op delen > een kaart insluiten. Kopieer de code en plak deze op jouw pagina. Klik nu met de rechtermuisknop op de pagina en selecteer 'element inspecteren'. Je ziet nu de element inspector van de 'dev console' van jouw browser. Zoek nu de iFrame code op, klik daar met jouw rechtermuisknop op en selecteer 'capture node screenshot'.

2. Converteer de statische map naar WebP formaat.

De map die je hebt opgeslagen staat in het png formaat. Omdat we voor pagina snelheid gaan gebruiken we het veel snellere WebP formaat. Je kunt dit gemakkelijk online doen op de site van ezgif of je kunt dit zelf doen met de tool cwebp: cwebp -q 60 image.png -o image.webp.

Stap 2 - de statische map omzetten naar een echte map

De statische map zorgt er voor dat er tijdens het laden geen pagespeed verloren gaat. Maar goed, nu hebben we nog geen echte Google map. We gaan daarom op een gegeven moment de statische map in de achtergrond vervangen door een echte map. Dit doen we pas nadat de pagina is geladen en opgebouwd. Dat kunnen er op 2 manieren doen. De eerste manier de statische map vervangen zodra je er met de muis overheen gaat. De volgende is de map vervangen zodra de browser klaar is met renderen.

3. Zet de statische map in een speciale 'placeholder'

Omdat we willen dat onze map er goed uit ziet op zowel mobiel als desktop gebruiken de deze CSS truc waarbij de verhoudingen van de map altijd kloppen ongeacht het de schermgrootte die je gebruikt.
Het data-src attribuut dat je in het voorbeeld ziet gebruiken we laten als als bron-url voor de googlemap.

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

Voeg dat de styling toe in jouw stylesheet. Zoals je ziet plaatsen we de statische map als achtergrond url, we houden 76.25% padding aan de onderkant aan voor een 16:9 map formaat. De uiteindelijke map krijgt een absolutie positie over de gehele breedte en hoogte van de statische map.

#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 echte map 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 eventlistner toe (en verwijdert deze ook weer) aan de placeholder container en wacht op het 'mouseover' event (wanneer je met je muis over de statische map beweegt) om de echte map in de container te plaatsen.

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

5. Laad de tijdelijke afbeelding vooraf (optioneel)

Als de Google-kaart onmiddellijk zichtbaar is in de view-port, is het vaak een slim idee om de placeholder map afbeelding te 'preloaden'. Gebruik hiervoor de code <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin>. en plaats dit zo hoog mogelijk in de <head> van jouw pagina. In dit voorbeeldgeval versnelt het vooraf laden van de tijdelijke aanduiding-afbeelding het LCP met bijna een seconde.

Stap 2b - vervang de statische map automatisch

Wanneer het belangrijk is dat een bezoeker meteen interactie aan kan gaat zonder met de muis over de map de bewegen dan kun  je er voor kiezen om de statische maps op een slim moment te vervangen. Het proces is min of meer hetzelfde als hierboven. Je kunt beiden zelfs combineren.

4b - laad de echte map automatisch

We gebruiken hier het 'load event' en setTimeout(). Het load event is een seintje dat jouw browser afgeeft zodra de pagina klaar is met laden. Daarna zetten we de statische map om naar een echte map!

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

Het resultaat

Als je 1 van beide technieken toepast dan zie je dat de pagina laadt met een 100% lighthouse score en een 100% pagespeed insight score terwijl we toch gewoon gebruik kunnen maken van alle functies van Google Maps!

Veel succes met het sneller maken van Google maps. Heb je hulp nodig? Neem dan contact met mij op!

I help teams pass the Core Web Vitals:

lighthouse 100 score

A slow website is likely to miss out on conversions and revenue. Nearly half of internet searchers don't wait three seconds for a page to load before going to another site. Ask yourself: "Is my site fast enough to convert visitors into customers?"

Google maps 100% pagespeedCore Web Vitals Google maps 100% pagespeed