Google maps 100% page speed gids

Impact van Google maps op de Lighthouse score

Er zijn veel redenen om een 'Google maps' kaart op je pagina in te sluiten. Het is geweldig om bijvoorbeeld de locatie van je bedrijf te tonen.
Maar er zit een addertje onder het gras. Google maps is niet zo snel als je zou verwachten van een Google dienst. Sterker nog, Google maps op je pagina is nogal een pagespeed drain.
Het kost 14% van mijn perfecte 100% page speed score. Dit is wat het doet met mijn Google lighthouse  statistieken

1. First contentful paint + 0.8 sec . De first paint draait bijna een seconde later omdat Google maps interfereert met het laden van de pagina.
2. Speed ​​index + 3.1 sec Speed ​​index verdrievoudigd door kaart rendering en blocking van de main thread
3. Largest contentful paint + 0.8 sec. De largest contentful paint wordt met .8 seconden vertraagd, net als de first contentful paint.
4. Time to interactive + 6.5sec . Omdat Google maps sterk leunt op javascript dat allemaal uitgevoerd moet worden, duurt het meer dan 6 seconden om interactie te hebben met de pagina.
5. Total blocking time + 320ms . Google maps blokkeert de main thread met 320ms. Dat is precies wat we niet willen.
6. Remove unused JavaScript waarschuwing . Om het af te maken, 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 maps 'lazy' te laden met het iframe attribuut   loading="lazy" . Helaas heeft dat vaak weinig zin. iFrames die via loading = "lazy" worden uitgesteld, worden nog steeds gedownload en uitgevoerd door browsers. Dus we moeten iets slimmers bedenken.

Stap 1 - Statische kaarten

De gemakkelijkste 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 geen interactie kunt hebben 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 pagespeed niet hindert.

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 een API sleutel nodig. Ik zal je laten zien hoe je handmatig een statische kaart afbeelding 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 selecteer 'inspect element'. Je ziet nu de element 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 map naar WebP formaat.

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

Stap 2 - Converteer de statische kaart afbeelding naar een interactieve kaart

De statische kaart zorgt ervoor dat er geen pagespeed verloren gaat tijdens het laden van de pagina. Bij het laden van de pagina betekent dit dat we nog geen interactieve Google kaart hebben. Op een bepaald moment na het laden van de pagina zullen we de statische kaart op de achtergrond vervangen door een interactieve kaart. Dit doen we 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 gaat. De tweede is om de statische kaart te vervangen zodra de browser inactief is.

3. Plaats de statische maps afbeelding in een speciale 'placeholder'

Omdat we willen dat onze kaart er goed uitziet op zowel mobiel als desktop, gebruiken we dit  CSS trucje  waarbij de verhoudingen van de kaart altijd correct zijn ongeacht de schermgrootte van de bezoeker. 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 maps container 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 ziet gebruiken we de statische kaart afbeelding als achtergrondafbeelding en passen we een 76.25% padding toe aan de onderkant voor een 16:9 kaart formaat. 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

Hier gebeurt de magie. Zonder dit stukje JavaScript is de kaart slechts een statische afbeelding. Dit JavaScript voegt (en verwijdert) een eventlistener toe aan de placeholder container en wacht op het 'mouseover' event (wanneer je met je muis over de statische kaart gaat) om de interactieve kaart in de container te injecteren.

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. Pre-load de achtergrondafbeelding (optioneel)

Als de Google kaart direct zichtbaar is in de viewport, is het vaak een slim idee om de achtergrond kaart afbeelding te 'preloaden'. Gebruik deze code om de statische maps afbeelding 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 maps afbeelding automatisch

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

4b - laad de interactieve kaart automatisch

We gebruiken hier het 'load event'. Het load event is een signaal dat je browser uitzendt zodra de pagina klaar is met laden. Dan converteren we de statische maps naar de interactieve kaart!

window.addEventListener('load', 
    function(e) {
        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 zul je merken dat de pagina laadt met een 100% lighthouse score en een 100% page speed insight score terwijl alle functionaliteit van Google Maps behouden blijft!

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