Guia para 100% de velocidade de página com o Google Maps

Impacto do Google Maps nos Core Web Vitals

Há muitos motivos para incorporar o Google Maps na página. Ele é ótimo para mostrar a localização da empresa, por exemplo. Mas há um porém: o Google Maps não é tão rápido quanto se espera de um serviço do Google. Na verdade, o Google Maps na sua página drena bastante a velocidade.

Ele custa 14% da minha pontuação de 100% de velocidade. Veja o que ele faz com as estatísticas do Google Lighthouse:

1. First Contentful Paint + 0,8 s. A primeira renderização ocorre quase um segundo depois porque o Google Maps interfere no carregamento da página.
2. Speed Index + 3,1 s. O Speed Index triplicou devido à renderização do mapa e ao bloqueio da main thread.
3. Largest Contentful Paint + 0,8 s. O Largest Contentful Paint atrasa 0,8 segundo, assim como o First Contentful Paint.
4. Time to Interactive + 6,5 s. Como o Google Maps depende muito de JavaScript, leva mais de 6 segundos até que seja possível interagir com a página. O Lighthouse já substituiu o TTI pelo Total Blocking Time, mas a causa raiz é a mesma: o JavaScript do Google Maps bloqueia a main thread, prejudicando o Interaction to Next Paint (INP).
5. Total Blocking Time + 320ms. O Google Maps bloqueia a main thread por 320ms. É exatamente o que não queremos.
6. Aviso "Remove unused JavaScript". Para completar, você ainda recebe um aviso de que não está usando boa parte do JavaScript do Google Maps. Tente explicar isso para um cliente.

Sua primeira ideia pode ser carregar o mapa com lazy loading usando o atributo loading="lazy" no iframe. Isso funciona em navegadores modernos, com 95% de cobertura global. Mas, para obter o máximo de desempenho, isso não basta. O Chrome começa a carregar iframes com lazy loading cerca de 1.250px abaixo da viewport em conexões rápidas e a 2.500px em conexões lentas. Se o mapa estiver perto da área visível, ele ainda vai carregar durante o render inicial da página e disputar recursos com o que é crítico. Para ter impacto zero de verdade, use uma facade: não carregue absolutamente nada até que o usuário realmente interaja com o mapa.

Passo 1: mapas estáticos

A opção mais simples é usar um mapa estático. Em vez de um mapa interativo, você usa apenas uma imagem do mapa. A vantagem é que uma imagem carrega muito mais rápido. A desvantagem é que não dá para interagir com ela. Você não pode dar zoom, rolar nem navegar.

Vamos começar com um mapa estático. Depois, podemos converter esse mapa estático em um mapa interativo que não interfira na velocidade da página.

Existem várias formas de colocar um mapa estático na página. Há ferramentas que ajudam nessa tarefa, como o Static Map Maker, mas elas exigem uma chave de API. Vou mostrar como baixar uma imagem estática do mapa manualmente.

1. Coloque o mapa na sua página

Coloque o mapa na página. Acesse o Google Maps, encontre um local e clique em compartilhar > incorporar um mapa. Copie o código e cole na sua página. Agora, clique com o botão direito na página e selecione 'inspecionar elemento'. O inspetor de elementos do console de desenvolvedor do navegador vai abrir. Encontre o código do iframe, clique nele com o botão direito e selecione 'capture node screenshot'.

2. Converta a imagem estática para o formato WebP

A imagem do mapa que você acabou de baixar está no formato PNG. Como o foco é velocidade de página, vamos usar o formato WebP, que é muito mais rápido. Você pode converter a imagem online no ezgif ou convertê-la localmente com a ferramenta cwebp: cwebp -q 60 image.png -o image.webp.

Passo 2: converter a imagem estática em um mapa interativo

O mapa estático garante que a velocidade não seja perdida durante o carregamento da página. No momento do carregamento, isso significa que ainda não temos um mapa interativo do Google. Em algum momento após a carga da página, substituímos o mapa estático em segundo plano por um mapa interativo. Fazemos isso depois que a página termina de renderizar e pintar. Isso pode ser feito de 2 maneiras: a primeira é substituir o mapa estático assim que você passar o mouse sobre ele; a segunda é substituir o mapa estático quando o navegador ficar ocioso.

3. Coloque a imagem do mapa estático em um placeholder

Como queremos que o mapa funcione bem tanto no celular quanto no desktop, usamos este truque de CSS para manter as proporções sempre corretas, independentemente do tamanho da tela do visitante. Isso reserva espaço para o mapa e evita layout shift (CLS) quando o mapa interativo carregar. Agora, adicionamos um atributo data-src ao container, que usaremos mais tarde como a URL de origem do mapa do Google.

Primeiro, insira o container do mapa na página:
<div data-src="https://maps.google.com/mapsq=fyn+()&z=9&output=embed" id="mymap"></div>

Adicione o estilo na sua folha de estilo. Como você pode ver, usamos a imagem estática do mapa como imagem de fundo e aplicamos um padding de 76,25% no topo para manter a proporção correta. O mapa definitivo terá posicionamento absoluto sobre toda a largura e altura do mapa estático.

#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. Carregue o mapa interativo na primeira interação

Tudo acontece aqui. Sem esse pequeno trecho de JavaScript, o mapa é apenas uma imagem estática. O script adiciona (e remove) um event listener no container do placeholder e aguarda o evento 'mouseover' (quando você passa o mouse sobre o mapa estático) para injetar o mapa interativo no container.

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. Faça o preload da imagem de fundo (opcional)

Se o mapa do Google estiver visível logo de início na viewport, vale a pena fazer o preload da imagem de fundo do mapa. Use este código para fazer o preload da imagem estática do mapa: <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> e insira essa tag o mais cedo possível no <head> da página. Neste exemplo, o preload da imagem de placeholder acelera o LCP em quase um segundo.

Passo 2b: substituir a imagem estática do mapa automaticamente

Se a probabilidade de o visitante interagir com o mapa for alta, vale a pena não esperar pelo evento mouseover. Assim que o navegador ficar ocioso, comece a injetar o mapa na página. O processo é basicamente o mesmo descrito acima. Você pode até combinar os dois.

4b. Carregue o mapa interativo automaticamente

Usaremos o evento 'load' aqui. O evento load é um sinal que o navegador emite assim que a página termina de carregar. Nesse momento, convertemos o mapa estático no mapa interativo! Para mais técnicas como essa, veja 16 métodos para adiar 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);
});      

O resultado

Ao aplicar uma dessas técnicas, você verá que a página carrega com 100% no Lighthouse e 100% no PageSpeed Insights, mantendo todas as funcionalidades do Google Maps!

Segundo o Web Almanac 2025, 91% das páginas com iframes ainda não usam o atributo loading. Isso significa que a grande maioria dos embeds do Google Maps carrega sem nenhuma otimização. A abordagem com facade coloca você muito à frente.

Para confirmar se as alterações realmente melhoram a experiência real do usuário, configure o Real User Monitoring. Pontuações de lab data são úteis para depuração, mas o field data de visitantes reais é o que o Google usa para o ranqueamento.

Boa sorte ao deixar o Google Maps mais rápido. Precisa de ajuda? Então entre em contato comigo!