Google maps 100% page speed-guide

Påvirkningen av Google maps på Lighthouse-scoren

Det finnes mange grunner til å bygge inn et Google maps-kart på siden din. Det er flott for å vise plasseringen til bedriften din, for eksempel.
Men det er en hake. Google maps er ikke så raskt som man forventer av en Google-tjeneste. Faktisk er Google maps på siden din ganske belastende for pagespeed.
Det koster 14% av min perfekte 100% page speed-score. Det gjør dette med mine Google Lighthouse  -statistikker

1. First Contentful Paint + 0,8 sek. Den første malingen kjører nesten et sekund senere fordi Google maps forstyrrer innlastingen av siden.
2. Speed index + 3,1 sek. Speed index tredoblet seg på grunn av kartgjengivelse og hovedtrådblokkering.
3. Largest Contentful Paint + 0,8 sek. Largest Contentful Paint forsinkes med 0,8 sekunder, akkurat som First Contentful Paint.
4. Time to interactive + 6,5 sek. Fordi Google maps er sterkt avhengig av JavaScript som alt må kjøres, tar det mer enn 6 sekunder å interagere med siden.
5. Total blocking time + 320 ms. Google maps blokkerer hovedtråden med 320 ms. Det er akkurat det vi ikke ønsker.
6. Fjern ubrukt JavaScript-advarsel. På toppen av det hele får du en advarsel om at du ikke bruker store deler av Google Maps JavaScript. Prøv å forklare det til en kunde.

Din første tanke kan være å laste kartene 'lazy' med iframe-attributten   loading="lazy" . Dessverre gir det ofte lite mening. iFrames som utsettes via loading = "lazy" lastes fortsatt ned og kjøres tidlig av nettlesere. Så vi må finne på noe smartere.

Steg 1 - Statiske kart

Det enkleste alternativet er å bruke et statisk kart. Dette betyr at i stedet for et interaktivt kart, bruker du bare et bilde av kartet. Fordelen med dette er at et bilde lastes mye raskere. Ulempen er at du ikke kan interagere med et bilde. Så du kan ikke zoome inn, scrolle eller navigere. 

Vi begynner med et statisk kart. Senere kan vi konvertere dette statiske kartet til et interaktivt kart som ikke forstyrrer pagespeed.

Det finnes flere måter å plassere statiske kart på siden din. Det finnes verktøy som hjelper deg med det, som Static Map Maker,  men du trenger en API-nøkkel. Jeg viser deg hvordan du laster ned et statisk kartbilde for hånd.

1 - plasser kartet på siden din.

Plasser kartet på siden din. Gå til Google maps, finn en lokasjon og klikk del > bygg inn dette kartet. Kopier koden og lim den inn på siden din. Høyreklikk nå på siden og velg 'inspiser element'. Du vil nå se elementinspektøren i 'dev console' i nettleseren din. Finn nå iframe-koden, høyreklikk på den og velg 'capture node screenshot'.

2. Konverter det statiske bildet til WebP-format.

Kartbildet du nettopp lastet ned er i png-format. Fordi vi går for page speed, bruker vi det mye raskere WebP-formatet. Du kan konvertere bildet ditt online på ezgif  eller du kan konvertere det selv med verktøyet cwebp:  cwebp -q 60 image.png -o image.webp.

Steg 2 - Konverter det statiske kartbildet til et interaktivt kart

Det statiske kartet sikrer at ingen page speed går tapt under sideinnlasting. Ved sideinnlasting betyr dette at vi ennå ikke har et interaktivt Google-kart. På et tidspunkt etter sideinnlasting erstatter vi det statiske kartet i bakgrunnen med et interaktivt kart. Vi gjør dette etter at siden er gjengitt og malt. Dette kan gjøres på 2 måter. Den første måten er å erstatte det statiske kartet så snart du holder musen over det. Den andre er å erstatte det statiske kartet når nettleseren er inaktiv.

3. Plasser det statiske kartbildet i en spesiell 'placeholder'

Siden vi vil at kartet vårt skal se bra ut på både mobil og desktop, bruker vi dette  CSS-trikset  der proporsjonene til kartet alltid er korrekte uavhengig av besøkerens skjermstørrelse. Vi legger nå til et data-src-attributt i containeren som vi senere bruker som kilde-URL for Google-kartet.

Plasser først kartcontaineren på siden:
<div data-src="https://maps.google.com/mapsq=fyn+()&z=9&output=embed" id="mymap"></div>

Legg til litt styling i stilarket ditt. Som du kan se bruker vi det statiske kartbildet som bakgrunnsbilde og bruker en 76,25% padding nederst for et 16:9-kartformat. Det endelige kartet vil ha en absolutt posisjon over hele bredden og høyden til det statiske kartet.

#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. Last inn det interaktive kartet ved første interaksjon

Det er her magien skjer. Uten denne lille JavaScript-biten er kartet bare et statisk bilde. Denne JavaScript-koden legger til (og fjerner) en eventlistener på placeholder-containeren og venter på 'mouseover'-hendelsen (når du holder musen over det statiske kartet) for å injisere det interaktive kartet i containeren.

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. Forhåndslast bakgrunnsbildet (valgfritt)

Hvis Google-kartet er umiddelbart synlig i viewporten, er det ofte en smart idé å 'forhåndslaste' bakgrunnsbildet av kartet. Bruk denne koden for å forhåndslaste det statiske kartbildet  <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> og plasser dette så tidlig som mulig i <head> på siden din. I dette eksempelet fremskynder forhåndslasting av plassholderbildet LCP med nesten et sekund.

Steg 2b - Erstatt det statiske kartbildet automatisk

Når det er stor sjanse for at besøkende vil interagere med kartet, kan det være en god idé å ikke vente på mouseover-hendelsen. Så snart nettleseren er inaktiv, begynn å injisere kartet på siden. Prosessen er mer eller mindre den samme som ovenfor. Du kan til og med kombinere begge.

4b - last inn det interaktive kartet automatisk

Vi bruker 'load event' her. Load-hendelsen er et signal som nettleseren din sender ut så snart siden er ferdig lastet. Deretter konverterer vi det statiske kartet til det interaktive kartet!

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

Resultatet

Hvis du bruker én av begge teknikkene, vil du legge merke til at siden laster med 100% Lighthouse-score og 100% PageSpeed Insights-score, samtidig som all funksjonaliteten til Google Maps beholdes!

Lykke til med å gjøre Google maps raskere. Trenger du hjelp? Da kan du kontakte meg!