Guia do Google maps 100% page speed

Impacto do Google maps na pontuação do Lighthouse

Existem muitos motivos para incorporar um mapa do '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 em sua página é um dreno de pagespeed.
Custa 14% da minha pontuação perfeita de 100% no page speed. Ele faz isso com minhas estatísticas do Google lighthouse  

1. First contentful paint + 0.8 sec . A primeira pintura é executada quase um segundo depois porque o Google maps interfere no carregamento da página.
2. Speed ​​index + 3.1 sec Speed ​​index triplicou devido à renderização do mapa e ao bloqueio do mail thread
3. Largest contentful paint + 0.8 sec. O largest contentful paint atrasa 0,8 segundos, assim como o first contentful paint.
4. Time to interactive + 6.5sec . Como o Google maps depende muito de javascript que precisa ser executado, leva mais de 6 segundos para interagir com a página.
5. Total blocking time + 320ms . O Google maps bloqueia o main thread com 320ms. É exatamente o que não queremos.
6. Aviso Remove unused JavaScript . Para completar, você recebe outro aviso de que não está usando grandes partes do javascript do Google Maps. Tente explicar isso a um cliente.

Seu primeiro pensamento pode ser carregar os mapas 'lazy' com o atributo iframe   loading="lazy" . Infelizmente, isso geralmente faz pouco sentido. iFrames adiados via loading = "lazy" ainda são baixados e executados antecipadamente pelos navegadores. Então precisamos criar algo mais inteligente.

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 aumentar o zoom, rolar ou navegar. 

Começaremos com um mapa estático. Mais tarde, podemos converter este mapa estático em um mapa interativo que não interfere no pagespeed.

Existem várias maneiras de colocar mapas estáticos em sua página. Existem ferramentas que o ajudarão a fazer isso, como Static Map Maker,  mas você precisa de uma chave de API. Mostrarei como baixar uma imagem de mapa estático manualmente.

1 - coloque os mapas em sua página.

Coloque o mapa em sua página. Vá para o Google maps, encontre um local e clique em compartilhar > incorporar este mapa. Copie o código e cole-o em sua página. Agora clique com o botão direito do mouse na página e selecione 'inspecionar elemento'. Agora você 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 'capture node screenshot'.

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

A imagem do mapa que você acabou de baixar está no formato png. Como buscamos o page speed, usaremos o formato WebP muito mais rápido. Você pode converter sua imagem online em ezgif  ou você mesmo pode convertê-la 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 os mapas estáticos em segundo plano por um mapa interativo. 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 os mapas estáticos assim que o navegador estiver ocioso.

3. Coloque a imagem estática dos mapas em um 'espaço reservado' especial

Como queremos que nosso mapa tenha uma boa aparência em celulares e computadores, usaremos este  truque de CSS  onde as proporções do mapa estão sempre corretas, independentemente do tamanho da tela do visitante. Agora adicionamos um atributo data-src ao contêiner que usaremos posteriormente como o URL de origem para o mapa do Google.

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

Adicione algum estilo em sua folha de estilo. Como você pode ver, usamos a imagem do mapa estático como imagem de fundo e aplicamos um preenchimento de 76,25% na parte inferior para um formato de mapa 16: 9. O mapa final terá uma posição absoluta em 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 eventlistner ao contêiner de espaço reservado e aguarda o evento 'mouseover' (quando você passa o mouse sobre o mapa estático) para injetar o mapa interativo no contêiner.

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. Pré-carregue a imagem de fundo (opcional)

Se o mapa do Google estiver imediatamente visível na janela de visualização, geralmente é uma boa ideia 'pré-carregar' a imagem do mapa de fundo. Use este código para pré-carregar a imagem estática dos mapas  <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, o pré-carregamento da imagem de espaço reservado acelera o LCP em quase um segundo.

Passo 2b - Substitua a imagem estática dos mapas 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, comece a injetar o Mapa na página. O processo é mais ou menos o mesmo que o acima. Você pode até combinar os dois.

4b - carregue o mapa interativo automaticamente

Usaremos um 'load event' aqui. O load event é um sinal que seu navegador envia assim que a página termina de carregar. Então convertemos os mapas estáticos para o mapa interativo!

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

O resultado

Se você aplicar 1 das duas técnicas, notará que a página carrega com uma pontuação lighthouse de 100% e uma pontuação page speed insight de 100% enquanto retém todas as funcionalidades do Google Maps!

Boa sorte para tornar o Google maps mais rápido. Você precisa de ajuda? Então contate me!