Google maps 100% sidehastighetsguide

Innvirkningen av Google maps på Lighthouse-poengsummen

Det er mange grunner til å bygge inn et 'Google maps'-kart på siden din. Det er flott for å vise plasseringen til selskapet ditt for eksempel.
Men det er en hake. Google maps er ikke så raskt som du ville forvente fra en Google-tjeneste. Faktisk er Google maps på siden din ganske tungt for sidehastigheten.
Det koster 14% av min perfekte 100% sidehastighetspoengsum. Det gjør dette med min Google Lighthouse  statistikk

1. First Contentful Paint + 0,8 sek . Den første visningen kjører nesten et sekund senere fordi Google maps forstyrrer lastingen av siden.
2. Hastighetsindeks + 3,1 sek Hastighetsindeksen tredoblet seg på grunn av kartvisning og hovedtrådblokkering
3. Largest Contentful Paint + 0,8 sek. Largest Contentful Paint er forsinket med 0,8 sekunder, akkurat som First Contentful Paint.
4. Tid til interaktivitet + 6,5 sek . Fordi Google maps er sterkt avhengig av JavaScript som alt må kjøres, tar det mer enn 6 sekunder å samhandle med siden.
5. Total blokkeringstid + 320 ms . Google maps blokkerer hovedtråden med 320 ms. Det er akkurat det vi ikke ønsker.
6. Advarsel om ubrukt JavaScript . For å toppe det hele får du enda 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-attributtet   loading="lazy" . Dessverre gir det ofte lite mening. iFramer utsatt via loading = "lazy" blir fortsatt lastet ned og kjørt 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 samhandle med et bilde. Så du kan ikke zoome inn, bla eller navigere. 

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

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 kartene på siden din.

Plasser kartet på siden din. Gå til Google maps, finn en plassering og klikk del > bygg inn dette kartet. Kopier koden og lim den inn på siden din. Nå høyreklikker du på siden og velger 'inspiser element'. Du vil nå se elementinspektøren i 'utviklerkonsollen' i nettleseren din. Finn nå iframe-koden, høyreklikk på den og velg 'ta skjermbilde av node'.

2. Konverter det statiske bildet til WebP-format.

Kartbildet du nettopp lastet ned er i png-format. Fordi vi satser på sidehastighet, vil vi bruke det mye raskere WebP-formatet. Du kan konvertere bildet ditt på nettet hos 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 sørger for at ingen sidehastighet går tapt under sidelasting. Ved sidelasting betyr dette at vi ikke har et interaktivt Google-kart ennå. På et tidspunkt etter sidelasting vil vi erstatte det statiske kartet i bakgrunnen med et interaktivt kart. Vi gjør dette etter at siden har blitt vist og malt. Dette kan gjøres på 2 måter. Den første måten er å erstatte det statiske kartet så snart du fører musen over det. Den andre er å erstatte de statiske kartene når nettleseren er inaktiv.

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

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

Plasser først kartbeholderen 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 legger til 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

Her skjer magien. Uten denne lille biten JavaScript er kartet bare et statisk bilde. Denne JavaScript-koden legger til (og fjerner) en hendelseslytter til plassholderbeholderen og venter på 'mouseover'-hendelsen (når du fører musen over det statiske kartet) for å injisere det interaktive kartet i beholderen.

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 visningsområdet, er det ofte lurt å '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>-delen av 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 sannsynlighet for at den besøkende vil samhandle med kartet, kan det være lurt å 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-hendelsen' 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-poengsum og 100% PageSpeed Insights-poengsum, samtidig som du beholder all funksjonaliteten til Google Maps!

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