Google maps 100 % page speed -opas

Google mapsin vaikutus Lighthouse-pisteisiin

On monia syitä upottaa Google maps -kartta sivullesi. Se on erinomainen esimerkiksi yrityksesi sijainnin näyttämiseen.
Mutta on yksi ongelma. Google maps ei ole niin nopea kuin Googlen palvelulta odottaisi. Itse asiassa Google maps sivullasi on melkoinen pagespeed-rasite.
Se vie 14 % täydellisestä 100 % page speed -pistemäärästäni. Se tekee tämän seuraavilla Google Lighthouse  -tilastoilla

1. First Contentful Paint + 0,8 s. Ensimmäinen piirto tapahtuu lähes sekunnin myöhemmin, koska Google maps häiritsee sivun latautumista.
2. Speed ​​index + 3,1 s. Speed ​​index kolminkertaistui kartan renderöinnin ja pääsäikeen eston vuoksi
3. Largest Contentful Paint + 0,8 s. Largest Contentful Paint viivästyy 0,8 sekuntia, aivan kuten First Contentful Paint.
4. Time to interactive + 6,5 s. Koska Google maps nojaa vahvasti JavaScriptiin, joka kaikki on suoritettava, sivun kanssa vuorovaikuttaminen kestää yli 6 sekuntia.
5. Total blocking time + 320 ms. Google maps estää pääsäikeen 320 ms:lla. Juuri sitä emme halua.
6. Poista käyttämätön JavaScript -varoitus. Kaiken huipuksi saat vielä varoituksen, ettet käytä suuria osia Google Maps -JavaScriptistä. Yritä selittää se asiakkaalle.

Ensimmäinen ajatuksesi saattaa olla ladata kartat 'laiskasti' iframen attribuutilla   loading="lazy" . Valitettavasti siinä on harvoin järkeä. Selaimet lataavat ja suorittavat loading = "lazy" -attribuutilla viivästetyt iFramet silti aikaisin. Joten meidän on keksittävä jotain älykkäämpää.

Vaihe 1 - Staattiset kartat

Helpoin vaihtoehto on käyttää staattista karttaa. Tämä tarkoittaa, että interaktiivisen kartan sijaan käytät vain kuvaa kartasta. Tämän etuna on, että kuva latautuu paljon nopeammin. Haittapuolena on, ettei kuvan kanssa voi olla vuorovaikutuksessa. Et siis voi zoomata, vierittää tai navigoida. 

Aloitamme staattisella kartalla. Myöhemmin voimme muuntaa tämän staattisen kartan interaktiiviseksi kartaksi, joka ei häiritse pagespeed-pisteitä.

Staattisen kartan sijoittamiseen sivullesi on useita tapoja. On työkaluja, jotka auttavat sinua siinä, kuten Static Map Maker,  mutta tarvitset API-avaimen. Näytän sinulle, miten lataat staattisen karttakuvan käsin.

1 - Sijoita kartta sivullesi.

Sijoita kartta sivullesi. Mene Google mapsiin, etsi sijainti ja napsauta jaa > upota tämä kartta. Kopioi koodi ja liitä se sivullesi. Napsauta nyt sivua hiiren oikealla painikkeella ja valitse 'tarkastele elementtiä'. Näet nyt selaimesi kehittäjäkonsolin elementtitarkastelijan. Etsi iframe-koodi, napsauta sitä hiiren oikealla painikkeella ja valitse 'ota kuvakaappaus solmusta'.

2. Muunna staattinen kuva WebP-muotoon.

Juuri lataamasi karttakuva on png-muodossa. Koska tavoittelemme page speed -pisteitä, käytämme paljon nopeampaa WebP-muotoa. Voit muuntaa kuvasi verkossa ezgif  -palvelussa tai muuntaa sen itse cwebp-työkalulla:  cwebp -q 60 image.png -o image.webp.

Vaihe 2 - Muunna staattinen karttakuva interaktiiviseksi kartaksi

Staattinen kartta varmistaa, ettei page speed -pisteitä menetetä sivun latauksen aikana. Sivun lataushetkellä tämä tarkoittaa, ettei meillä ole vielä interaktiivista Google-karttaa. Jossain vaiheessa sivun latauksen jälkeen korvaamme staattisen kartan taustalla interaktiivisella kartalla. Teemme tämän sen jälkeen, kun sivu on renderöity ja piirretty. Tämä voidaan tehdä kahdella tavalla. Ensimmäinen tapa on korvata staattinen kartta heti, kun hiiri viedään sen päälle. Toinen on korvata staattinen kartta, kun selain on toimettomana.

3. Sijoita staattinen karttakuva erityiseen paikkamerkkiin

Koska haluamme karttamme näyttävän hyvältä sekä mobiilissa että työpöydällä, käytämme tätä  CSS-tekniikkaa  , jossa kartan mittasuhteet ovat aina oikeat vierailijan näyttökoosta riippumatta. Lisäämme nyt data-src-attribuutin säiliöön, jota käytämme myöhemmin Google-kartan lähde-URL:nä.

Sijoita ensin karttasäiliö sivulle:
<div data-src="https://maps.google.com/mapsq=fyn+()&z=9&output=embed" id="mymap"></div>

Lisää tyylimäärittelyjä tyylitiedostoosi. Kuten näet, käytämme staattista karttakuvaa taustakuvana ja lisäämme 76,25 %:n täytteen alareunaan 16:9-karttamuotoa varten. Lopullinen kartta on absoluuttisesti sijoitettu koko staattisen kartan leveyden ja korkeuden yli.

#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. Lataa interaktiivinen kartta ensimmäisen vuorovaikutuksen aikana

Tässä tapahtuu taika. Ilman tätä pientä JavaScript-koodinpätkää kartta on vain staattinen kuva. Tämä JavaScript lisää (ja poistaa) tapahtumankuuntelijan paikkamerkkisäiliöön ja odottaa 'mouseover'-tapahtumaa (kun viet hiiren staattisen kartan päälle) lisätäkseen interaktiivisen kartan säiliöön.

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. Esilataa taustakuva (valinnainen)

Jos Google-kartta on heti näkyvissä näkymässä, on usein järkevää 'esiladata' taustakuva. Käytä tätä koodia staattisen karttakuvan esilataamiseen  <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> ja sijoita se mahdollisimman aikaisin sivusi <head>-osioon. Tässä esimerkkitapauksessa paikkamerkkikuvan esilataaminen nopeuttaa LCP:tä lähes sekunnilla.

Vaihe 2b - Korvaa staattinen karttakuva automaattisesti

Kun on suuri todennäköisyys, että vierailija on vuorovaikutuksessa kartan kanssa, voi olla hyvä idea olla odottamatta mouseover-tapahtumaa. Heti kun selain on toimettomana, aloita kartan lisääminen sivulle. Prosessi on suunnilleen sama kuin yllä. Voit jopa yhdistää molemmat.

4b - Lataa interaktiivinen kartta automaattisesti

Käytämme tässä 'load-tapahtumaa'. Load-tapahtuma on signaali, jonka selaimesi lähettää heti, kun sivu on latautunut. Sen jälkeen muunnamme staattisen kartan interaktiiviseksi kartaksi!

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

Tulos

Jos sovellat jompaakumpaa tekniikkaa, huomaat, että sivu latautuu 100 % Lighthouse-pisteillä ja 100 % PageSpeed Insights -pisteillä säilyttäen samalla kaikki Google Mapsin toiminnallisuudet!

Onnea Google mapsin nopeuttamiseen. Tarvitsetko apua? Ota yhteyttä!