Guia Google Maps 100% PageSpeed

Impacto do Google Maps nos seus Core Web Vitals

Há muitos motivos para incorporar o Google Maps em sua página. É ótimo para mostrar a localização da sua empresa, por exemplo. Mas há um porém. O Google Maps não é tão rápido quanto você esperaria de um serviço do Google. Na verdade, o Google Maps na sua página é um grande dreno de page speed.

Isso custa 14% da minha pontuação perfeita de 100% de page speed. Ele faz o seguinte com minhas estatísticas do Google Lighthouse:

1. First Contentful Paint + 0.8 seg. O first paint ocorre quase um segundo mais tarde porque o Google Maps interfere no carregamento da página.
2. Speed Index + 3.1 seg. O Speed Index triplicou devido à renderização do mapa e ao bloqueio da main thread.
3. Largest Contentful Paint + 0.8 seg. O largest contentful paint é atrasado em 0,8 segundos, assim como o first contentful paint.
4. Time to Interactive + 6.5 seg. Como o Google Maps depende fortemente de JavaScript, leva mais de 6 segundos para interagir com a página. O Lighthouse desde então substituiu o TTI pelo Total Blocking Time, mas a causa raiz é a mesma: o JavaScript do Google Maps bloqueia sua main thread, prejudicando seu Interaction to Next Paint (INP).
5. Total Blocking Time + 320ms. O Google Maps bloqueia a main thread em 320ms. Isso é exatamente o que não queremos.
6. Aviso para remover JavaScript não utilizado. Para completar, você recebe outro aviso de que não está usando grandes partes do JavaScript do Google Maps. Tente explicar isso para um cliente.

Seu primeiro pensamento pode ser carregar os mapas em modo 'lazy' (preguiçoso) com o atributo iframe loading="lazy". Isso realmente funciona em navegadores modernos com 95% de cobertura global. Mas para máximo desempenho, não é o suficiente. O Chrome começa a carregar lazy iframes aproximadamente 1.250px abaixo da viewport em conexões rápidas e 2.500px em conexões lentas. Se o seu mapa estiver em qualquer lugar perto da área visível, ele ainda será carregado durante a renderização inicial da página e competirá com seus recursos críticos. Para um verdadeiro impacto zero, você precisa de um 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 fácil é usar um mapa estático. Isso significa que, em vez de um mapa interativo, você usa apenas uma imagem do mapa. A vantagem disso é que uma imagem carrega muito mais rápido. A desvantagem é que você não pode interagir com uma imagem. Portanto, você não pode dar zoom, rolar ou navegar.

Nós começaremos com um mapa estático. Mais tarde, podemos converter este mapa estático em um mapa interativo que não interfira no page speed.

Existem várias maneiras de colocar um mapa estático em sua página. Existem ferramentas que ajudarão você a fazer isso, como o Static Map Maker, mas você precisa de uma chave de API. Vou mostrar a você como fazer o download manual de uma imagem de mapa estático.

1. Coloque o mapa em sua página

Coloque o mapa na sua página. Vá para 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'. Você agora verá o inspetor de elementos do 'dev console' do seu navegador. Agora encontre o código do iframe, clique com o botão direito nele e selecione 'capturar nó da captura de tela' (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 estamos buscando page speed, usaremos o formato WebP que é muito mais rápido. Você pode converter sua imagem online no ezgif ou pode convertê-la você mesmo com a ferramenta cwebp: cwebp -q 60 image.png -o image.webp.

Passo 2: Converta a imagem do mapa estático em um mapa interativo

O mapa estático garante que nenhum page speed seja perdido durante o carregamento da página. No carregamento da página, isso significa que ainda não temos um mapa interativo do Google. Em algum momento após o carregamento da página, substituiremos o mapa estático em background por um mapa interativo. Faremos isso após a página ter sido renderizada e pintada. Isso pode ser feito de duas maneiras. A primeira maneira é substituir o mapa estático assim que você passar o mouse sobre ele. A segunda é substituir o mapa estático assim que o navegador estiver ocioso (idle).

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

Como queremos que nosso mapa tenha uma boa aparência tanto no mobile quanto no desktop, usaremos este truque de CSS onde as proporções do mapa estão sempre corretas, independentemente do tamanho da tela do visitante. Isso reserva espaço para o mapa e previne o Cumulative Layout Shift (CLS) quando o mapa interativo for carregado. Agora adicionamos um atributo data-src ao container que usaremos mais tarde como o URL de origem para o mapa do Google.

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

Adicione um pouco de estilo em sua stylesheet. Como você pode ver, usamos a imagem do mapa estático como uma background image e aplicamos um padding de 76.25% no topo para a proporção correta. O mapa final terá uma posição absoluta 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 durante a primeira interação

É aqui que a mágica acontece. Sem este pequeno pedaço de JavaScript, o mapa é apenas uma imagem estática. Este JavaScript adiciona (e remove) um event listener ao container 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 background (opcional)

Se o mapa do Google estiver imediatamente visível na viewport, geralmente é uma ideia inteligente fazer o preload da imagem do mapa de background. Use este código para fazer o preload da imagem do mapa estático: <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> e coloque isso o mais cedo possível no <head> da sua página. Neste caso de exemplo, fazer o preload da imagem placeholder acelera o LCP em quase um segundo.

Passo 2b: Substitua a imagem do mapa estático automaticamente

Quando há uma grande chance de o visitante interagir com o mapa, pode ser uma boa ideia não esperar pelo evento mouseover. Assim que o navegador estiver ocioso (idle), comece a injetar o mapa na página. O processo é mais ou menos o mesmo que o anterior. Você pode até mesmo combinar ambos.

4b. Carregue o mapa interativo automaticamente

Nós usaremos o evento de carregamento ('load event') aqui. O evento de carregamento é um sinal que o seu navegador envia assim que a página termina de carregar. Então, nós convertemos o mapa estático para o mapa interativo! Para mais técnicas como esta, 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

Se você aplicar uma dessas técnicas, notará que a página carrega com uma pontuação de 100% no Lighthouse e 100% no PageSpeed Insights, mantendo todas as funcionalidades do Google Maps!

De acordo com o 2025 Web Almanac, 91% das páginas com iframes ainda não possuem nenhum atributo de carregamento (loading). Isso significa que a grande maioria das incorporações do Google Maps é carregada sem nenhuma otimização. A abordagem facade coloca você muito à frente.

Para verificar se as suas alterações realmente melhoram a user experience real, configure o Real User Monitoring. Pontuações de laboratório (Lab scores) são úteis para depuração, mas os dados de campo (field data) de visitantes reais são o que o Google usa para ranqueamento.

Boa sorte tornando o Google Maps mais rápido. Você precisa de ajuda? Então entre em contato comigo!