Google Maps 100% page speed: guida completa

Impatto di Google Maps sui tuoi Core Web Vitals

Ci sono molte ragioni per incorporare Google Maps nella tua pagina. È ottimo per mostrare la posizione della tua azienda, per esempio. Ma c'è un problema. Google Maps non è veloce come ci si aspetterebbe da un servizio Google. In realtà, Google Maps sulla tua pagina è un vero freno alla page speed.

Costa il 14% del mio punteggio perfetto di 100% page speed. Lo fa con queste statistiche di Google Lighthouse:

1. First Contentful Paint + 0,8 sec. Il primo paint avviene quasi un secondo dopo perché Google Maps interferisce con il caricamento della pagina.
2. Speed Index + 3,1 sec. Lo 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 viene ritardato di 0,8 secondi, proprio come il first contentful paint.
4. Time to Interactive + 6,5 sec. Poiché Google Maps si basa pesantemente su JavaScript, servono più di 6 secondi per interagire con la pagina. Lighthouse ha da allora sostituito il TTI con il Total Blocking Time, ma la causa principale è la stessa: il JavaScript di Google Maps blocca il tuo main thread, danneggiando il tuo Interaction to Next Paint (INP).
5. Total Blocking Time + 320ms. Google Maps blocca il main thread con 320ms. È esattamente ciò che non vogliamo.
6. Avviso rimuovi JavaScript inutilizzato. Per di più, 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 caricare le mappe in modo 'lazy' con l'attributo iframe loading="lazy". In effetti funziona nei browser moderni con una copertura globale del 95%. Ma per le massime prestazioni, non è sufficiente. Chrome inizia a caricare gli iframe lazy a circa 1.250px sotto il viewport su connessioni veloci e 2.500px su connessioni lente. Se la tua mappa è vicina all'area visibile, si caricherà comunque durante il render iniziale della pagina e competerà con le tue risorse critiche. Per un impatto davvero zero, vuoi una facade: non caricare assolutamente nulla finché l'utente non interagisce effettivamente con la mappa.

Passo 1: Mappe statiche

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

Inizieremo con una mappa statica. In seguito potremo convertire questa mappa statica in una mappa interattiva che non interferisce con la page speed.

Ci sono diversi modi per inserire una mappa statica sulla tua pagina. Ci sono strumenti che ti aiutano come Static Map Maker, ma ti serve una API key. Ti mostrerò come scaricare un'immagine di mappa statica a mano.

1. Inserisci la mappa nella tua pagina

Inserisci la mappa nella tua pagina. Vai su Google Maps, trova una posizione e clicca condividi > incorpora questa mappa. Copia il codice e incollalo nella tua pagina. Ora clicca con il tasto destro sulla pagina e seleziona 'ispeziona elemento'. Vedrai ora l'ispettore elementi della 'console sviluppatore' del tuo browser. Ora trova il codice iframe, clicca con il tasto destro e seleziona 'cattura screenshot del nodo'.

2. Converti l'immagine statica in formato WebP

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

Passo 2: Converti l'immagine statica della mappa in una mappa interattiva

La mappa statica assicura che nessuna page speed venga persa durante il caricamento della pagina. Al caricamento della pagina questo significa che non abbiamo ancora una Google Map interattiva. A un certo punto dopo il caricamento della pagina sostituiremo la mappa statica in background con una mappa interattiva. Lo faremo dopo che la pagina è stata renderizzata e visualizzata. 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 la mappa statica quando il browser è inattivo.

3. Inserisci l'immagine della mappa statica in un segnaposto

Poiché vogliamo che la nostra mappa sia bella sia su mobile che su desktop, useremo questo trucco CSS dove le proporzioni della mappa sono sempre corrette indipendentemente dalle dimensioni dello schermo del visitatore. Questo riserva spazio per la mappa e previene il layout shift (CLS) quando la mappa interattiva viene caricata. Ora aggiungiamo un attributo data-src al contenitore che useremo successivamente come URL sorgente per la Google Map.

Prima inserisci il contenitore della mappa nella pagina:
<div data-src="https://maps.google.com/mapsq=fyn+()&z=9&output=embed" id="mymap"></div>

Aggiungi dello stile nel tuo foglio di stile. Come puoi vedere usiamo l'immagine della mappa statica come immagine di sfondo e applichiamo un padding del 76,25% in alto per il corretto rapporto d'aspetto. 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 avviene la magia. Senza questo piccolo pezzo di JavaScript, la mappa è solo un'immagine statica. Questo JavaScript aggiunge (e rimuove) un event listener al contenitore segnaposto e attende l'evento 'mouseover' (quando passi il mouse sopra la mappa statica) per iniettare la mappa interattiva nel contenitore.

const map = document.getElementById('mymap');
const mapListener = function(e) {
    const frame = document.createElement('iframe');
    frame.src = this.getAttribute('data-src');
    map.appendChild(frame);
    map.removeEventListener('mouseover', mapListener);
};
map.addEventListener('mouseover', mapListener);

5. Precarica l'immagine di sfondo (opzionale)

Se la Google Map è immediatamente visibile nel viewport, è spesso una buona idea fare il preload dell'immagine di sfondo della mappa. Usa questo codice per precaricare l'immagine della mappa statica: <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 preload dell'immagine segnaposto velocizza il LCP di quasi un secondo.

Passo 2b: Sostituisci l'immagine della mappa statica automaticamente

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 sopra. Puoi anche combinare entrambi.

4b. Carica la mappa interattiva automaticamente

Useremo il 'load event' qui. Il load event è un segnale che il tuo browser invia non appena la pagina ha terminato il caricamento. Poi convertiamo la mappa statica nella mappa interattiva! Per altre tecniche come questa, vedi 16 metodi per differire JavaScript.

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

Il risultato

Se applichi una di queste tecniche noterai che la pagina si carica con un punteggio Lighthouse del 100% e un punteggio PageSpeed Insights del 100% mantenendo tutte le funzionalità di Google Maps!

Secondo il Web Almanac 2025, il 91% delle pagine con iframe non ha ancora un attributo loading. Ciò significa che la stragrande maggioranza degli embed di Google Maps si carica senza alcuna ottimizzazione. L'approccio facade ti mette molto avanti.

Per verificare che le tue modifiche migliorino effettivamente la user experience reale, configura il Real User Monitoring. I punteggi di laboratorio sono utili per il debug, ma i dati sul campo dei visitatori reali sono ciò che Google usa per il ranking.

Buona fortuna nel rendere Google Maps più veloce. Hai bisogno di aiuto? Allora contattami!