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

O impacto do Google Maps nos seus Core Web Vitals

Existem muitos motivos para incorporar o Google Maps na sua página. É excelente 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, ter o Google Maps na sua página é um verdadeiro ralo para a velocidade da página.

Isso custa 14% da minha pontuação perfeita de 100% de velocidade da página. Ele afeta as minhas estatísticas do Google Lighthouse da seguinte forma:

1. First Contentful Paint + 0,8 seg. A primeira pintura ocorre quase um segundo depois 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 thread principal.
3. Largest Contentful Paint + 0,8 seg. O Largest Contentful Paint sofre um atraso de 0,8 segundos, assim como o First Contentful Paint.
4. Time to Interactive + 6,5 seg. Como o Google Maps depende muito de JavaScript, leva mais de 6 segundos para interagir com a página. Desde então, o Lighthouse substituiu o TTI pelo Total Blocking Time, mas a causa raiz é a mesma: o JavaScript do Google Maps bloqueia a sua thread principal, prejudicando a sua Interaction to Next Paint (INP).
5. Total Blocking Time + 320ms. O Google Maps bloqueia a thread principal em 320ms. Isso é exatamente o que não queremos.
6. Aviso de "Remove unused JavaScript". Para piorar, você recebe outro aviso de que não está usando grandes partes do JavaScript do Google Maps. Tente explicar isso para um cliente.

O seu primeiro pensamento pode ser carregar os mapas usando 'lazy load' com o atributo iframe loading="lazy". Isso realmente funciona em navegadores modernos com 95% de cobertura global. Mas para máxima performance, não é suficiente. O Chrome começa a carregar iframes lazy 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 os seus recursos críticos. Para um impacto verdadeiramente zero, você precisa de uma facade: não carregar 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. 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 ampliar, rolar ou navegar.

Nós começaremos com um mapa estático. Mais tarde, poderemos converter este mapa estático em um mapa interativo que não interfere na velocidade da página.

Existem várias maneiras de colocar um mapa estático na 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 como fazer o download de uma imagem de mapa estático manualmente.

1. Coloque o mapa na sua página

Coloque o mapa na sua página. Acesse o Google Maps, encontre um local e clique em compartilhar > incorporar um mapa. Copie o código e cole-o na sua página. Agora, clique com o botão direito na página e selecione 'inspecionar elemento'. Você verá o inspetor de elementos do 'console de desenvolvedor' do seu navegador. Agora encontre o código do iframe, clique com o botão direito nele 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 nosso objetivo é a velocidade da página, usaremos o formato muito mais rápido WebP. Você pode converter sua imagem online no ezgif ou você mesmo pode convertê-la com a ferramenta cwebp: cwebp -q 60 image.png -o image.webp.

Passo 2: Converta a imagem de mapa estático para um mapa interativo

O mapa estático garante que não haja perda de velocidade da página 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, nós substituiremos o mapa estático em segundo plano por um mapa interativo. Nós faremos isso depois que a página for renderizada e pintada. Isso pode ser feito de 2 maneiras. A primeira maneira é substituir o mapa estático assim que você passar o mouse sobre ele. A segunda é substituir o mapa estático quando o navegador estiver ocioso (idle).

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

Como queremos que o nosso mapa fique bom tanto em dispositivos móveis quanto em desktops, usaremos esse truque de CSS onde as proporções do mapa estarão sempre corretas, independentemente do tamanho da tela do visitante. Isso reserva espaço para o mapa e evita o layout shift (CLS) quando o mapa interativo carregar. Agora adicionamos um atributo data-src ao contêiner que usaremos mais tarde como a URL de origem para o mapa do Google.

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

Adicione algum estilo na sua folha de estilo. Como você pode ver, nós usamos a imagem de mapa estático como uma imagem de fundo e aplicamos um padding superior de 76.25% para a proporção correta de aspecto. 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 esse pequeno pedaço de JavaScript, o mapa é apenas uma imagem estática. Este JavaScript adiciona (e remove) um event listener ao contêiner de placeholder e espera pelo evento 'mouseover' (quando você passa o mouse sobre o mapa estático) para injetar o mapa interativo no contêiner.

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 imediatamente visível na viewport, geralmente é uma ideia inteligente fazer o preload da imagem de mapa de fundo. 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 na tag <head> da sua página. Neste caso de exemplo, fazer o preload da imagem de placeholder acelera o LCP em quase um segundo.

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

Quando há uma grande chance de que o visitante interaja 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 do anterior. Você pode até mesmo combinar os dois.

4b. Carregue o mapa interativo automaticamente

Nós usaremos o evento 'load' aqui. O evento 'load' é um sinal que o seu navegador envia assim que a página termina de carregar. Em seguida, nós convertemos o mapa estático no mapa interativo! Para mais técnicas como esta, veja 16 métodos para adiar o carregamento de 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, perceberá que a página carrega com uma pontuação de 100% no Lighthouse e uma pontuação de 100% no PageSpeed Insights, enquanto retém toda a funcionalidade do Google Maps!

De acordo com o Web Almanac de 2025, 91% das páginas com iframes ainda carecem totalmente de um atributo loading. Isso significa que a grande maioria das incorporações do Google Maps carrega sem qualquer otimização. A abordagem de 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 são úteis para depuração, mas os dados de campo 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!