Google maps 100% page speed guide

Indflydelse af Google maps på Lighthouse scoren

Der er mange grunde til at indlejre et 'Google maps' kort på din side. Det er f.eks. fantastisk til at vise placeringen af din virksomhed.
Men der er en hage. Google maps er ikke så hurtigt, som du ville forvente af en Google tjeneste. Faktisk er Google maps på din side en stor pagespeed dræber.
Det koster 14% af min perfekte 100% page speed score. Det gør det med mine Google lighthouse  statistikker

1. First contentful paint + 0.8 sec . Den første maling kører næsten et sekund senere, fordi Google maps forstyrrer indlæsningen af siden.
2. Speed ​​index + 3.1 sec Speed ​​index tredoblet på grund af kortgengivelse og blokering af main thread
3. Largest contentful paint + 0.8 sec. Den største indholdsmaling er forsinket med 0,8 sekunder, ligesom den første indholdsmaling.
4. Time to interactive + 6.5sec . Da Google maps er meget afhængig af javascript, der alt sammen skal udføres, tager det mere end 6 sekunder at interagere med siden.
5. Total blocking time + 320ms . Google maps blokerer main thread med 320ms. Det er præcis, hvad vi ikke ønsker.
6. Fjern ubrugt JavaScript advarsel . For at toppe det, får du en anden advarsel om, at du ikke bruger store dele af Google Maps javascript. Prøv at forklare det til en kunde.

Din første tanke kan være at indlæse kortene 'lazy' med iframe attributten   loading="lazy" . Desværre giver det ofte ringe mening. iFrames udskudt via loading = "lazy" downloades og udføres stadig tidligt af browsere. Så vi skal finde på noget smartere.

Trin 1 - Statiske kort

Den nemmeste mulighed er at bruge et statisk kort. Det betyder, at du i stedet for et interaktivt kort kun bruger et billede af kortet. Fordelen ved dette er, at et billede indlæses meget hurtigere. Ulempen er, at du ikke kan interagere med et billede. Så du kan ikke zoome ind, rulle eller navigere. 

Vi starter med et statisk kort. Senere kan vi konvertere dette statiske kort til et interaktivt kort, der ikke forstyrrer pagespeed.

Der er flere måder at placere statiske kort på din side. Der er værktøjer, der hjælper dig med at gøre det som Static Map Maker,  men du har brug for en API nøgle. Jeg vil vise dig, hvordan du downloader et statisk kortbillede manuelt.

1 - placer kortene på din side.

Placer kortet på din side. Gå til Google maps, find en placering og klik på del > indlejr dette kort. Kopier koden og indsæt den på din side. Højreklik nu på siden og vælg 'inspicer element'. Du vil nu se elementinspektøren i din browsers 'dev console'. Find nu iframe koden, højreklik på den og vælg 'capture node screenshot'.

2. Konverter den statiske mappe til WebP format.

Det kortbillede, du lige har downloadet, er i png format. Fordi vi går efter page speed, bruger vi det meget hurtigere WebP format. Du kan konvertere dit billede online på ezgif  eller du kan selv konvertere det med værktøjet cwebp:  cwebp -q 60 image.png -o image.webp.

Trin 2 - Konverter det statiske kortbillede til et interaktivt kort

Det statiske kort sikrer, at der ikke går nogen page speed tabt under sideindlæsningen. Ved sideindlæsning betyder det, at vi ikke har et interaktivt Google kort endnu. På et tidspunkt efter sideindlæsning erstatter vi de statiske kort i baggrunden med et interaktivt kort. Vi gør dette, når siden er blevet gengivet og malet. Dette kan gøres på 2 måder. Den første måde er at udskifte det statiske kort, så snart du holder musen over det. Den anden er at udskifte de statiske kort, når browseren er inaktiv.

3. Placer det statiske kortbillede i en speciel 'pladsholder'

Da vi ønsker, at vores kort skal se godt ud på både mobil og desktop, bruger vi dette  CSS trick  hvor kortets proportioner altid er korrekte uanset den besøgendes skærmstørrelse. Vi tilføjer nu en data-src attribut til containeren, som vi senere vil bruge som kilde URL for google kortet.

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

Tilføj lidt styling i dit stylesheet. Som du kan se, bruger vi det statiske kortbillede som baggrundsbillede og anvender en 76,25% polstring i bunden for et 16: 9 kortformat. Det endelige kort vil have en absolut position over hele bredden og højden af det statiske kort.

#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. Indlæs det interaktive kort under den første interaktion

Det er her magien sker. Uden dette lille stykke JavaScript er kortet bare et statisk billede. Dette JavaScript tilføjer (og fjerner) en eventlistner til pladsholdercontaineren og venter på 'mouseover' hændelsen (når du holder musen over det statiske kort) for at injicere det interaktive kort 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. Forudindlæs baggrundsbilledet (valgfrit)

Hvis Google kortet er umiddelbart synligt i visningsporten, er det ofte en smart idé at 'forudindlæse' baggrundskortbilledet. Brug denne kode til at forudindlæse det statiske kortbillede  <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> og placer dette så tidligt som muligt i <head>på din side. I dette eksempel fremskynder forudindlæsning af pladsholderbilledet LCP med næsten et sekund.

Trin 2b - Udskift det statiske kortbillede automatisk

Når der er stor chance for, at den besøgende vil interagere med kortet, kan det være en god idé ikke at vente på mouseover hændelsen. Så snart browseren er inaktiv, skal du begynde at injicere kortet på siden. Processen er mere eller mindre den samme som ovenfor. Du kan endda kombinere begge.

4b - indlæs det interaktive kort automatisk

Vi bruger en 'load event' her. Load event er et signal, som din browser sender ud, så snart siden er færdig med at indlæse. Så konverterer vi de statiske kort til det interaktive kort!

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 anvender 1 af begge teknikker, vil du bemærke, at siden indlæses med en 100% lighthouse score og en 100% page speed insight score, mens alle funktionerne i Google Maps bevares!

Held og lykke med at gøre Google maps hurtigere. Har du brug for hjælp? Så kontakt mig!