Google PageSpeed

A Guesty otimizou os sites publicados na plataforma para obterem uma pontuação alta no teste PageSpeed do Google. Este teste analisa diversos detalhes técnicos da construção das páginas web e verifica se elas seguem as melhores práticas para garantir um carregamento rápido. A verificação mais importante no teste PageSpeed examina a estrutura do código do site. O Google verifica se o código está estruturado de forma a permitir que o navegador carregue o conteúdo o mais rápido possível.

Por que o Guesty foi otimizado para isso?

Na Guesty, acreditamos que a velocidade de carregamento de sites é um dos maiores problemas que a internet enfrenta hoje. Sites com carregamento lento têm taxas de rejeição mais altas, menor engajamento e dão à internet, como um todo, uma reputação negativa de lentidão. Sabemos que sites com resposta mais rápida agregam muito valor aos visitantes, proporcionando a cada pessoa uma melhor experiência de navegação.

Por que o Google criou esta ferramenta?

O Google criou a ferramenta PageSpeed Insights porque percebeu que muitos sites carregavam muito lentamente e não entregavam conteúdo aos usuários com rapidez suficiente. O Google sabe que os usuários são mais propensos a interagir com sites que exibem conteúdo mais rapidamente, permitindo que tanto o Google quanto o site ofereçam uma experiência geral melhor. Normalmente, isso significa que um site deve carregar em menos de três segundos. Como o principal produto do Google (a busca) depende de sites de terceiros, a empresa quer garantir que webmasters, designers e desenvolvedores criem sites que carreguem rapidamente.

O que o Google verifica

O Google possui uma lista de otimizações que verifica tanto na versão para desktop quanto na versão para dispositivos móveis de um site. Em seguida, utiliza o nível de otimização do seu site para cada uma dessas verificações para gerar uma pontuação geral (de 0 a 100) para a velocidade do seu site. Veja o que o Google verifica:

• Evite redirecionamentos na página inicial. Isso significa que você não deve redirecionar os usuários para outra página do seu site assim que eles o carregarem. Por exemplo, você não deve redirecionar todos os visitantes para uma segunda versão da sua página inicial.
• Elimine o JavaScript e o CSS que bloqueiam a renderização do conteúdo acima da dobra. Esta é, de longe, a verificação mais importante que o Google realiza. Ela analisa o código do seu site e garante que você esteja priorizando o conteúdo em relação a outros códigos. Muitas vezes, os desenvolvedores de sites colocam scripts e arquivos CSS pesados no início de um arquivo HTML. Isso faz com que o navegador processe/carregue esses recursos primeiro, em vez de carregar o conteúdo. Esta verificação garante que você priorize o conteúdo acima da dobra. (Observação: "Acima da dobra" significa o primeiro conteúdo que um usuário vê ao carregar uma página da web. Geralmente, isso inclui o cabeçalho, a navegação e o conteúdo principal do corpo da página.)
• Ative a compressão. Isso garante que seu servidor web comprima (reduza o tamanho) os dados brutos (HTML, CSS e JavaScript) antes de transmiti-los pela internet para o seu navegador. Isso resulta em uma grande economia no tamanho total do seu site.
• Aproveite o cache do navegador. A verificação de cache garante que você instrua o navegador a salvar esse conteúdo localmente, em vez de baixá-lo novamente na próxima vez que precisar acessá-lo. Isso economiza um tempo precioso que geralmente é gasto conectando e baixando conteúdo em recarregamentos de página.
  Minifique o CSS. Minificar CSS significa reduzir o tamanho do arquivo CSS ao máximo, removendo espaços extras, quebras de linha e outras formatações. Pense nisso como algo semelhante a comprimir o arquivo para diminuir o tamanho total.
• Minifique o JavaScript. Assim como a minificação de CSS, a minificação de JS pode economizar muito espaço no arquivo individual que é baixado pelo navegador.
• Minifique o HTML. Semelhante aos dois anteriores, mas remove espaços extras do HTML principal do site.
• Otimização de imagens. A segunda verificação mais importante realizada pelo Google garante que as imagens enviadas ao navegador estejam otimizadas, compactadas e com tamanho adequado. As imagens representam aproximadamente 65 a 70% do tamanho/peso total de um site. Otimizar imagens significa compactá-las e reduzir seu tamanho ao mínimo possível antes que o navegador as baixe. Há dois pontos importantes a serem considerados: (1) Certifique-se de que as imagens estejam compactadas. Isso requer o uso de ferramentas de compressão para reduzir seu tamanho, sem comprometer a qualidade. (2) Redimensione as imagens. Não é necessário enviar uma imagem muito grande (5000 pixels, por exemplo) para um navegador móvel; portanto, você deve redimensioná-la.
• Priorize o conteúdo visível. Isso garante que você coloque o conteúdo no topo do HTML do site. Tente não carregar conteúdo adicional que não seja relevante para o primeiro carregamento do site.
• Reduza o tempo de resposta do servidor. Esta verificação analisa o seu servidor para garantir que ele esteja respondendo rapidamente aos visitantes que acessam seu site. O Google exige que o usuário espere no máximo 200 ms (1/5 de segundo) para receber o conteúdo/HTML do seu servidor.

Com a introdução do projeto de código aberto Lighthouse em novembro de 2018, o Google PageSpeed Insights passou a analisar uma ampla gama de propriedades de sites, além da velocidade (como SEO, acessibilidade, PWA e boas práticas). Além dos testes mencionados acima, o Lighthouse agora verifica:

• First Contentful Paint (Primeira Exibição de Conteúdo). Essa métrica é obtida a partir do carregamento de um site por um navegador real. Quando você executa um teste do Lighthouse, um navegador real acessa seu site, carrega a página e monitora o desempenho. A métrica First Contentful Paint indica quanto tempo leva para qualquer tipo de conteúdo ser exibido após o início do carregamento da página. Isso pode ser uma imagem, uma cor de fundo, etc., e o tempo até o First Contentful Paint é medido em segundos. A importância dessa métrica reside no fato de que ela representa o primeiro contato do usuário com o carregamento de um elemento do site — é a primeira indicação de que o site está carregando.
• Índice de Velocidade. Essa métrica vem de uma antiga ferramenta de desempenho web chamada WebPageTest. Ela existe desde 2012 e é bastante eficaz para determinar a velocidade de carregamento do conteúdo de um site. O teste funciona capturando screenshots do site a cada 0,5 segundos durante o carregamento. Usando esses screenshots, a ferramenta calcula a porcentagem de conteúdo carregado na página em incrementos de 0,5 segundos e atribui uma pontuação geral de velocidade. Quanto menor o número, mais rápido o site parece carregar para o usuário. O objetivo desse teste é entender a velocidade com que o usuário visualiza o conteúdo e se há algum fator impedindo que o site exiba o conteúdo o mais rápido possível.
• Tempo de Interatividade. Outra métrica importante é a rapidez com que o usuário pode interagir com a página. Por exemplo, o usuário pode querer clicar em um botão ou rolar a página. Isso é particularmente importante em dispositivos móveis, onde o usuário toca diretamente na tela para interagir com a página. O objetivo dos desenvolvedores web deve ser sempre garantir que uma página seja interativa sempre que houver conteúdo nela. Este é um desafio muito difícil devido ao funcionamento dos navegadores.
• Primeiro tempo ocioso da CPU. Essa métrica está intimamente relacionada ao tempo até a interação, pois indica a rapidez com que todo o conteúdo/recursos iniciais do site são carregados e a CPU do dispositivo entra em estado ocioso (sem fazer nada). O motivo pelo qual essa métrica é registrada é que os desenvolvedores devem priorizar o carregamento da quantidade mínima de conteúdo possível inicialmente. Ao enviar uma pequena quantidade de dados, a CPU do dispositivo processará todo o código e entrará em estado ocioso mais rapidamente.
• Latência de entrada estimada. A métrica final que o Lighthouse apresenta não tem relação com o desempenho do primeiro carregamento do seu site. Em vez disso, ela tenta fornecer um número (em milissegundos) que indica quanto tempo seu site leva para responder a toques/cliques. A ideia é que, quanto mais rápido seu site responder, mais os usuários o considerarão ágil e menos propensos a abandoná-lo.

Após realizar esses testes, o Lighthouse também fornecerá recomendações priorizadas sobre como você pode ajudar a melhorar a pontuação geral de velocidade. Essas recomendações aparecem na segunda metade da página e oferecem detalhes técnicos sobre o que você pode fazer e os benefícios que essas alterações podem proporcionar.

O que a Guesty faz

A Guesty otimizou os sites criados em nossa plataforma para obterem altas pontuações, especificamente no teste PageSpeed do Google. Isso significa que analisamos os testes listados acima e otimizamos nossos sites para cada um deles. Veja a seguir um resumo de como realizamos cada uma dessas verificações:

• Evite redirecionamentos na página de destino. Para a maioria dos sites Guesty, passamos nessa verificação em 100% dos casos. Isso não está totalmente sob o controle da Guesty, pois permitimos que os usuários sejam redirecionados para outras páginas por meio do nosso redirecionamento de URL. A recomendação é garantir que você não envie links para seus clientes, parceiros etc. que não sejam páginas reais do seu site.
• Elimine o JavaScript e o CSS que bloqueiam a renderização do conteúdo acima da dobra. Como parte da publicação de sites, a Guesty otimiza a estrutura dos sites para estar em conformidade com esta recomendação. Fazemos isso: (1) Calculando o que chamamos de CSS "crítico". Isso significa que analisamos o site e verificamos quais estilos CSS são necessários para exibi-lo. Em seguida, inserimos esse conteúdo diretamente no site para que ele seja carregado primeiro. (2) Depois, movemos todos os scripts para o final do site, para que o conteúdo seja carregado primeiro.
• Ative a compressão. O Guesty ativa a compressão gzip para conexões com nosso site. Isso garante que o arquivo seja compactado, transferido pela internet e, em seguida, descompactado pelo navegador.
• Aproveite o cache do navegador. O Guesty define cabeçalhos de cache em todos os arquivos que carregamos. Isso garante que os navegadores que baixam esses arquivos (CSS, JS, imagens) saibam como armazená-los temporariamente no cache do navegador, para que, na próxima vez que o navegador precisar acessar esse arquivo, ele esteja armazenado localmente na máquina, em vez de ter que baixá-lo novamente do site.
• Minificamos CSS, JS e HTML. Como parte do processo de publicação da Guesty, minificamos a grande maioria dos recursos CSS. Isso garante que eles sejam o menor possível durante o download. É importante observar que os recursos externos, embora normalmente sejam distribuídos por meio de nossa CDN, podem não ser minificados.
• Otimização de imagens. Todas as imagens JPG ou PNG que você envia para o Guesty passam por um extenso processo de compressão e redimensionamento para garantir o melhor gerenciamento possível das imagens. Executamos os seguintes processos:
  
  • Primeiro, aplicamos um algoritmo de compressão sem perdas à imagem e a salvamos em nossa CDN. Isso reduz o tamanho base da imagem.
  • Em seguida, redimensionamos a imagem em cinco versões diferentes. 
  • Após o redimensionamento, aplicamos um algoritmo de compressão com perda em todas as imagens. Isso reduz distintamente a qualidade da imagem, mas resulta em uma grande economia de espaço. Na grande maioria dos casos, a perda de qualidade é imperceptível ao olho humano.
  • Após a compressão com perdas, aplicamos mais uma compressão sem perdas à imagem para garantir que ela tenha o menor tamanho possível.
• Priorize o conteúdo visível. Como parte da forma como a Guesty constrói cada site, estruturamos o site para atender a essa recomendação por padrão. Isso significa colocar o conteúdo do cabeçalho primeiro, seguido pelo conteúdo do corpo da página.
• Reduzir o tempo de resposta do servidor. Esta verificação visa principalmente garantir que seu site não esteja muito lento, e não necessariamente rápido o suficiente. Como a Guesty hospeda todos os sites em nossa plataforma, podemos garantir que todos os sites que hospedamos respondam rapidamente. Utilizamos os serviços da Amazon Web Services, líderes do setor, o que nos ajuda a manter esses padrões.

O que fazer se o seu site apresentar problemas de verificação?

Embora a Guesty deseje que todos os sites que gerenciamos sempre alcancem altas posições no ranking, não podemos prometer isso. Isso ocorre porque nossos clientes podem adicionar seu próprio código, conteúdo e design ao site, portanto, não temos controle total sobre o que eles podem ou não adicionar. Por esse motivo, existem alguns cenários em que os sites da Guesty não atingem pontuações acima de 90. Aqui está uma lista de erros/problemas que o Google PageSpeed nos reporta, com base em como o site foi construído:

• Eliminate render-blocking JavaScript and CSS in above-the-fold content:
  • Elemento de mapa acima da dobra. Se você colocar um elemento de mapa no topo do seu site, isso geralmente terá um impacto negativo na sua classificação do PageSpeed. Para corrigir isso, mova o elemento de mapa para a parte inferior da página.
  • A página inicial da loja fica visível na parte superior da página. Se você posicionar a loja no topo, isso pode causar a exibição deste aviso. A Guesty está trabalhando em uma correção para esse problema, mas, por enquanto, nossa única recomendação é mover o conteúdo para a parte inferior da página. Uma maneira possível de fazer isso é adicionar uma imagem e um texto explicativo acima do elemento da loja, para que a própria loja não fique visível na área visível da página.
  • Código/script personalizado no cabeçalho. Se você inserir código personalizado na seção <head> do site, o Google geralmente exibirá um erro informando que isso está tornando o carregamento da página mais lento. Existem duas opções para corrigir isso: (1) Coloque o código no arquivo body-end.html do site em vez do cabeçalho. Isso move o código para o final, forçando-o a carregar mais tarde em vez de mais cedo. (2) Certifique-se de que o script integrado seja carregado de forma assíncrona. Isso significa que o navegador o carrega em segundo plano enquanto continua carregando o restante do conteúdo do site. Para habilitar o carregamento assíncrono de scripts, você precisa alterá-lo da seguinte forma:
    • Código antigo: 

      <script src=”https://example.com/script.js”></script>
      
      

    • Novo modo assíncrono: 

      <script src=”https://example.com/script.js” async defer></script>
      
      

  • Você notará que o código acima instrui o navegador a carregar esse código de forma assíncrona, o que deve ajudar a passar neste teste do Google PageSpeed.
  • Integração de iframe. Se você integrar um iframe personalizado em um site acima da dobra, é muito provável que você receba esta mensagem de erro. Mova este conteúdo para baixo na página ou remova-o completamente.
• Otimização de imagens: Atualmente, a otimização de imagens do Guesty funciona apenas com imagens JPG e PNG. Se você estiver enviando um arquivo TIFF, GIF ou outro formato de imagem, o Guesty pode não conseguir otimizá-lo, e esse pode ser o motivo deste aviso. Recomendamos usar um serviço de otimização de imagens, como EzGif, Compressor.io ou TinyPNG. Outra verificação que o Google realiza é garantir que você não tenha imagens grandes sendo redimensionadas para espaços pequenos. O Guesty tenta ajudar com isso, colocando imagens menores em colunas com menos espaço disponível, mas esse processo não é perfeito. Às vezes, pode ser necessário baixar uma imagem, redimensioná-la exatamente para o tamanho da coluna desejada e reenviá-la. Isso é bastante raro.
• Redimensionar imagens: Embora o Guesty otimize as imagens para garantir que sejam compactadas em um tamanho menor, ele não redimensiona a imagem automaticamente na versão desktop do seu site. Por exemplo, se você usar uma imagem de 3000 x 3000 pixels em uma página e redimensioná-la para apenas 300 pixels usando o recurso de arrastar e soltar do editor, isso ainda significa que a imagem inteira de 3000 x 3000 pixels será carregada. Isso pode afetar negativamente a velocidade de carregamento da sua página. Você pode corrigir isso redimensionando a imagem usando o editor de imagens integrado ou redimensionando-a em um software de edição de fotos e reenviando-a.
• Aproveite o cache do navegador: Se você incluir algum código personalizado em seu site, ele geralmente será carregado de um site de terceiros. Se esse site não ativar o cache, o Google detectará isso e recomendará a ativação do cache do navegador. Você deve entrar em contato com esse serviço de terceiros para que eles implementem essa alteração em seu servidor.
• Sua página pode estar muito grande: Se você tiver muito conteúdo em uma única página, isso pode fazer com que ela fique grande mesmo depois de executarmos a ferramenta de otimização em seu site. Considere usar menos imagens ou dividir seu conteúdo, movendo-o para outras páginas.
• Problemas atuais sem solução: Observe que esses são problemas de velocidade de carregamento de página relatados pelo Google que não podem ser corrigidos por você e devem ser tratados como solicitações de recursos para o Guesty:
  • Aproveite o cache do navegador
  • Minificar HTML / CSS / JS
  • Otimizar a entrega de CSS

Casos em que a Guesty não otimiza o site

Existem alguns casos em que a Guesty não tenta otimizar o site após a publicação. Isso ocorre se você inseriu código personalizado que utiliza

jQuery (($(‘#ex’)) 

ou a API JS:

dmAPI.runOnReady(‘code’,function(){});

no cabeçalho do site. Fazemos isso porque esse código geralmente requer jQuery ou as funções da dmAPI, mas como nossa otimização move esse código para uma posição mais baixa na página, ele deixará de funcionar e, portanto, quebrará o código que já foi instalado.