Guida a Google maps 100% page speed

Impatto di Google maps sul punteggio Lighthouse

Ci sono molte ragioni per incorporare una mappa 'Google maps' sulla tua pagina. È ottimo per mostrare la posizione della tua azienda, ad esempio.
Ma c'è un problema. Google maps non è veloce come ti aspetteresti da un servizio Google. In effetti, Google maps sulla tua pagina è piuttosto un salasso per il pagespeed.
Costa il 14% del mio punteggio page speed perfetto del 100%. Lo fa con le mie statistiche Google lighthouse  

1. First contentful paint + 0.8 sec . Il first paint viene eseguito quasi un secondo dopo perché Google maps interferisce con il caricamento della pagina.
2. Speed ​​index + 3.1 sec Speed ​​index triplicato a causa del rendering della mappa e del blocco del main thread
3. Largest contentful paint + 0.8 sec. Il largest contentful paint è ritardato di .8 secondi, proprio come il first contentful paint.
4. Time to interactive + 6.5sec . Poiché Google maps si affida molto a javascript che deve essere tutto eseguito, ci vogliono più di 6 secondi per interagire con la pagina.
5. Total blocking time + 320ms . Google maps blocca il main thread con 320ms. È esattamente quello che non vogliamo.
6. Avviso Rimuovi JavaScript inutilizzato . Per finire, ricevi un altro avviso che non stai utilizzando grandi parti del javascript di Google Maps. Prova a spiegarlo a un cliente.

Il tuo primo pensiero potrebbe essere quello di caricare le mappe 'lazy' con l'attributo iframe   loading="lazy" . Sfortunatamente, questo spesso ha poco senso. Gli iFrame differiti tramite loading = "lazy" vengono ancora scaricati ed eseguiti presto dai browser. Quindi dobbiamo inventare qualcosa di più intelligente.

Passaggio 1 - Mappe statiche

L'opzione più semplice è utilizzare una mappa statica. Ciò significa che invece di una mappa interattiva, utilizzi solo un'immagine della mappa. Il vantaggio di questo è che un'immagine si carica molto più velocemente. Lo svantaggio è che non puoi interagire con un'immagine. Quindi non puoi ingrandire, scorrere o navigare. 

Inizieremo con una mappa statica. Successivamente possiamo convertire questa mappa statica in una mappa interattiva che non interferisce con il pagespeed.

Esistono diversi modi per posizionare mappe statiche sulla tua pagina. Ci sono strumenti che ti aiuteranno a farlo come Static Map Maker,  ma hai bisogno di una chiave API. Ti mostrerò come scaricare manualmente un'immagine di mappa statica.

1 - posiziona le mappe sulla tua pagina.

Posiziona la mappa sulla tua pagina. Vai su Google maps, trova una posizione e fai clic su condividi > incorpora questa mappa. Copia il codice e incollalo sulla tua pagina. Ora fai clic con il pulsante destro del mouse sulla pagina e seleziona 'ispeziona elemento'. Ora vedrai l'ispettore degli elementi della 'dev console' del tuo browser. Ora trova il codice iframe, fai clic destro su di esso e seleziona 'capture node screenshot'.

2. Converti la cartella statica in formato WebP.

L'immagine della mappa appena scaricata è in formato png. Poiché puntiamo al page speed, utilizzeremo il formato WebP molto più veloce. Puoi convertire la tua immagine online su ezgif  o puoi convertirla tu stesso con lo strumento cwebp:  cwebp -q 60 image.png -o image.webp.

Passaggio 2 - Converti l'immagine della mappa statica in una mappa interattiva

La mappa statica assicura che non venga persa page speed durante il caricamento della pagina. Al caricamento della pagina ciò significa che non abbiamo ancora una mappa Google interattiva. Ad un certo punto dopo il caricamento della pagina sostituiremo le mappe statiche in background con una mappa interattiva. Lo faremo dopo che la pagina è stata renderizzata e disegnata. Questo può essere fatto in 2 modi. Il primo modo è sostituire la mappa statica non appena passi il mouse sopra di essa. Il secondo è sostituire le mappe statiche una volta che il browser è inattivo.

3. Posiziona l'immagine delle mappe statiche in un 'segnaposto' speciale

Poiché vogliamo che la nostra mappa appaia bene sia su dispositivi mobili che desktop, utilizzeremo questo  trucco CSS  in cui le proporzioni della mappa sono sempre corrette indipendentemente dalle dimensioni dello schermo del visitatore. Ora aggiungiamo un attributo data-src al contenitore che utilizzeremo successivamente come URL di origine per la mappa Google.

Posiziona prima il contenitore delle mappe sulla pagina:
<div data-src="https://maps.google.com/mapsq=fyn+()&z=9&output=embed" id="mymap"></div>

Aggiungi un po' di stile nel tuo foglio di stile. Come puoi vedere usiamo l'immagine della mappa statica come immagine di sfondo e applichiamo un riempimento del 76,25% in basso per un formato mappa 16:9. La mappa finale avrà una posizione assoluta su tutta la larghezza e l'altezza della mappa statica.

#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. Carica la mappa interattiva durante la prima interazione

È qui che avviene la magia. Senza questo piccolo pezzo di JavaScript, la mappa è solo un'immagine statica. Questo JavaScript aggiunge (e rimuove) un eventlistner al contenitore segnaposto e attende l'evento 'mouseover' (quando passi il mouse sopra la mappa statica) per iniettare la mappa interattiva nel contenitore.

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. Precarica l'immagine di sfondo (facoltativo)

Se la mappa Google è immediatamente visibile nella viewport, è spesso un'idea intelligente 'precaricare' l'immagine della mappa di sfondo. Usa questo codice per precaricare l'immagine delle mappe statiche  <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> e posizionalo il prima possibile nell'<head>della tua pagina. In questo caso di esempio, il precaricamento dell'immagine segnaposto accelera l'LCP di quasi un secondo.

Passaggio 2b - Sostituisci automaticamente l'immagine delle mappe statiche

Quando c'è un'alta probabilità che il visitatore interagisca con la mappa, potrebbe essere una buona idea non aspettare l'evento mouseover. Non appena il browser è inattivo, inizia a iniettare la Mappa nella pagina. Il processo è più o meno lo stesso di cui sopra. Puoi anche combinare entrambi.

4b - carica automaticamente la mappa interattiva

Useremo una 'load event' qui. La load event è un segnale che il tuo browser invia non appena la pagina ha terminato il caricamento. Quindi convertiamo le mappe statiche nella mappa interattiva!

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

Il risultato

Se applichi 1 delle due tecniche noterai che la pagina si carica con un punteggio lighthouse del 100% e un punteggio page speed insight del 100% pur mantenendo tutte le funzionalità di Google Maps!

Buona fortuna nel rendere Google maps più veloce. Hai bisogno di aiuto? Allora contatta me!