Google maps 100% page speed guide

Inverkan av Google maps på Lighthouse-poängen

Det finns många anledningar att bädda in en 'Google maps'-karta på din sida. Det är till exempel bra för att visa var ditt företag ligger.
Men det finns en hake. Google maps är inte så snabbt som du kan förvänta dig av en Google-tjänst. Faktum är att Google maps på din sida är en stor pagespeed-dödare.
Det kostar 14% av min perfekta 100% page speed-poäng. Det gör det med min Google lighthouse  statistik

1. First contentful paint + 0.8 sec . Den första målningen körs nästan en sekund senare eftersom Google maps stör laddningen av sidan.
2. Speed ​​index + 3.1 sec Speed ​​index tredubblades på grund av kartrendering och blockering av main thread
3. Largest contentful paint + 0.8 sec. Den största innehållsmålningen försenas med 0,8 sekunder, precis som den första innehållsmålningen.

Din första tanke kanske är att ladda kartorna 'lazy' med iframe-attributet   loading="lazy" . Tyvärr är det ofta meningslöst. iFrames som skjuts upp via loading = "lazy" laddas ner och körs fortfarande tidigt av webbläsare. Så vi måste komma på något smartare.

Steg 1 - Statiska kartor

Det enklaste alternativet är att använda en statisk karta. Det betyder att du istället för en interaktiv karta bara använder en bild av kartan. Fördelen med detta är att en bild laddas mycket snabbare. Nackdelen är att du inte kan interagera med en bild. Så du kan inte zooma in, bläddra eller navigera. 

Vi börjar med en statisk karta. Senare kan vi konvertera denna statiska karta till en interaktiv karta som inte stör pagespeed.

Det finns flera sätt att placera statiska kartor på din sida. Det finns verktyg som hjälper dig att göra det som Static Map Maker,  men du behöver en API-nyckel. Jag ska visa dig hur du laddar ner en statisk kartbild manuellt.

1 - placera kartorna på din sida.

Placera kartan på din sida. Gå till Google maps, hitta en plats och klicka på dela > bädda in denna karta. Kopiera koden och klistra in den på din sida. Högerklicka nu på sidan och välj 'inspektera element'. Du kommer nu att se elementinspektören i din webbläsares 'dev console'. Hitta nu iframe-koden, högerklicka på den och välj 'capture node screenshot'.

2. Konvertera den statiska mappen till WebP-format.

Kartbilden du just laddade ner är i png-format. Eftersom vi strävar efter page speed använder vi det mycket snabbare WebP-formatet. Du kan konvertera din bild online på ezgif  eller så kan du konvertera den själv med verktyget cwebp:  cwebp -q 60 image.png -o image.webp.

Steg 2 - Konvertera den statiska kartbilden till en interaktiv karta

Den statiska kartan säkerställer att ingen page speed går förlorad under sidladdningen. Vid sidladdning betyder det att vi inte har en interaktiv Google-karta ännu. Någon gång efter sidladdning ersätter vi de statiska kartorna i bakgrunden med en interaktiv karta. Vi gör detta när sidan har renderats och målats. Detta kan göras på 2 sätt. Det första sättet är att byta ut den statiska kartan så snart du för musen över den. Det andra är att byta ut de statiska kartorna när webbläsaren är inaktiv.

3. Placera den statiska kartbilden i en speciell 'platshållare'

Eftersom vi vill att våra kartor ska se bra ut på både mobil och dator använder vi detta  CSS-trick  där kartans proportioner alltid är korrekta oavsett besökarens skärmstorlek. Vi lägger nu till ett data-src-attribut till behållaren, som vi senare kommer att använda som käll-URL för google-kartan.

Placera först kartbehållaren på sidan:
<div data-src="https://maps.google.com/mapsq=fyn+()&z=9&output=embed" id="mymap"></div>

Lägg till lite styling i ditt stylesheet. Som du kan se använder vi den statiska kartbilden som bakgrundsbild och tillämpar en 76,25% stoppning i botten för ett 16: 9-kartformat. Den slutliga kartan kommer att ha en absolut position över hela bredden och höjden av den statiska kartan.

#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. Ladda den interaktiva kartan under den första interaktionen

Det är här magin händer. Utan denna lilla bit JavaScript är kartan bara en statisk bild. Detta JavaScript lägger till (och tar bort) en eventlistner till platshållarbehållaren och väntar på 'mouseover'-händelsen (när du för musen över den statiska kartan) för att injicera den interaktiva kartan i behållaren.

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. Förladda bakgrundsbilden (valfritt)

Om Google-kartan är omedelbart synlig i visningsporten är det ofta en smart idé att 'förladda' bakgrundskartbilden. Använd denna kod för att förladda den statiska kartbilden  <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> och placera detta så tidigt som möjligt i <head>på din sida. I detta exempel snabbar förladdning av platshållarbilden upp LCP med nästan en sekund.

Resultatet

Om du tillämpar 1 av båda teknikerna kommer du att märka att sidan laddas med en 100% lighthouse-poäng och en 100% page speed insight-poäng, medan alla funktioner i Google Maps bevaras!

Lycka till med att göra Google maps snabbare. Behöver du hjälp? Då kontakta mig!