Google PageSpeed

O Duda otimizou os sites publicados na plataforma para que obtenham uma pontuação alta no teste do Google PageSpeed. Esse teste analisa muitos detalhes técnicos de como as páginas da web são construídas e verifica se elas seguem as melhores práticas que permitem que os sites carreguem rapidamente. A verificação mais importante do teste do PageSpeed examina como o código do site está estruturado. O Google realiza a verificação para garantir que o código está estruturado de uma forma que permita que o navegador carregue o conteúdo mais rapidamente.

Por que o Duda implementou essa otimização

No Duda, acreditamos que a velocidade do site é um dos maiores problemas enfrentados na web hoje em dia. Sites com carregamento lento têm taxas mais altas de saltos, reduzem o engajamento e ficam com uma reputação negativa na Internet por serem lentos. Sabemos que sites com resposta mais rápida são valorizados pelos visitantes porque dão uma experiência de navegação melhor a cada pessoa.

Por que o Google criou esta ferramenta

O Google criou a ferramenta PageSpeed porque eles sabiam que muitos sites que carregam muito lentamente não estão entregando conteúdo aos usuários com a rapidez esperada. O Google sabe que é maior a probabilidade de os usuários se interessarem por sites que oferecem conteúdo visível mais rápido, o que permite que tanto o Google quanto o site proporcionem uma melhor experiência geral. No geral, isso significa que um site carrega em menos de três segundos. Como o principal produto do Google (busca) baseia-se em sites de outras pessoas, a empresa quer que os webmasters / designers / desenvolvedores criem sites que carreguem rapidamente.

O que o Google verifica

O Google verifica uma lista de otimizações nas versões de site para computador e para dispositivos móveis. Em seguida, avalia se o site é bem otimizado para cada uma dessas verificações, até chegar a uma pontuação geral (até 100) para a velocidade do site. Veja o que o Google verifica:

• Evitar redirecionamentos das páginas de destino. Significa que você não deve redirecionar os usuários para outra página do seu site quando eles o acessarem. Por exemplo, você não deve redirecionar todos os visitantes para uma segunda versão da sua página inicial.
• Eliminar Javascript e CSS de bloqueio de renderização no conteúdo da região acima da dobra. Essa é, de longe, a verificação mais importante feita pelo Google. O código do site é examinado para garantir que o conteúdo seja priorizado sobre qualquer outro código. Geralmente, os desenvolvedores de sites colocam scripts pesados e arquivos CSS no topo de um arquivo HTML. Isso faz com que o navegador processe/carregue esses recursos primeiro, em vez de carregar o conteúdo primeiro. Essa verificação garante que o conteúdo localizado acima da dobra seja priorizado. (Nota: "acima da dobra" refere-se ao primeiro conteúdo que um usuário vê ao carregar uma página da Web. Geralmente é o cabeçalho, o menu de navegação e o conteúdo mais alto do corpo da página.)
• Ativar compactação. Verifica se o servidor da web compacta (reduz o tamanho) os dados brutos (HTML, CSS e Javascript) antes de transmiti-los pela Internet para seu navegador. Isso gera uma grande economia no tamanho total do site.
• Aproveitar o cache do navegador. A verificação do armazenamento em cache garante que o navegador esteja configurado para armazenar esse conteúdo localmente, em vez de fazer o download novamente na próxima vez em que for necessário acessá-lo. Isso economiza um tempo valioso que geralmente é gasto na conexão e no download de conteúdo sempre que uma página é recarregada.
• Minimizar CSS. Significa que o arquivo CSS é reduzido ao menor tamanho possível, eliminando espaços adicionais, quebras de linha e outros formatos. É mais ou menos como compactar o arquivo para reduzir o tamanho geral.
• Minimizar JavaScript. Assim como minimizar o CSS, minimizar o JS pode economizar muito espaço no arquivo individual que é baixado pelo navegador.
• Minimizar HTML. Similar aos dois anteriores, mas elimina o espaçamento extra do HTML principal do site.
• Otimizar imagens. Essa é a segunda verificação mais importante feita pelo Google e garante que as imagens enviadas para o navegador sejam otimizadas, compactadas e não muito grandes. As imagens representam de 65% a 70% do tamanho total/peso de um site. Otimizar imagens significa que as elas sejam compactadas no menor tamanho de arquivo possível antes de serem baixadas pelo navegador. Aqui há duas etapas importantes: (1) Garantir que as imagens estejam compactadas. O uso de ferramentas de compressão é necessário para reduzir o tamanho das imagens, sem reduzir sua qualidade. (2) Modificar o tamanho das imagens. Não é necessário fornecer uma imagem muito grande (por exemplo, 5000 pixels) para um navegador móvel, portanto o tamanho da imagem deve ser modificado.
• Priorize o conteúdo visível: Isso garante que o conteúdo seja colocado no topo do HTML do site. Tente não subir conteúdo adicional que não seja relevante para o primeiro carregamento do site.
• Reduzir o tempo de resposta do servidor. Essa verificação examina o servidor para garantir que ele responda muito rapidamente aos visitantes que chegam ao site. O Google exige que o usuário não espere mais de 200 ms (1/5 de segundo) para receber conteúdo/HTML do servidor.

Com a introdução do projeto Lighthouse de código aberto em novembro de 2018, a velocidade da página do Google agora analisa uma ampla variedade de propriedades do site, além da velocidade (como SEO, Acessibilidade, PWA e Melhores Práticas). Além dos testes acima, o Lighthouse agora verifica:

• Primeira exibição de conteúdo. Essa é uma métrica que vem de um navegador real carregando um site. Quando você executa um teste do Lighthouse, um navegador real acessa seu site, carrega-o e monitora o desempenho. A métrica de primeira exibição de conteúdo informa o tempo gasto para que qualquer tipo de conteúdo seja exibido após o início do carregamento de uma página. Pode ser uma imagem, uma cor de fundo etc., e o tempo até a primeira exibição de conteúdo é medido em segundos. Essa métrica é valiosa porque é a primeira vez que um usuário percebe que algo no site será carregado, ou seja, é a primeira indicação de que o site está carregando.
• Índice de velocidade. Essa é uma métrica proveniente de uma ferramenta antiga de desempenho da Web chamada WebPageTest. Ela existe desde 2012 e é bastante eficaz para determinar a rapidez com que um site carrega seu conteúdo. Funciona fazendo capturas de tela de um site a cada 0,5 segundos enquanto ele é carregado. Usando essas capturas de tela, ela calcula a porcentagem de conteúdo carregado na página da Web em incrementos de 0,5 segundo e emite uma pontuação geral de velocidade. Quanto menor for o número, mais rápido o site parece carregar para o usuário. O objetivo deste teste é realmente entender a rapidez com que o usuário vê o conteúdo e se há algo impedindo o site de exibir o conteúdo da forma mais rápida possível.
• Tempo até 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 é especialmente importante no celular, onde o usuário toca diretamente na tela para interagir com a página. O objetivo dos desenvolvedores Web deve ser sempre o de garantir que uma página seja interativa sempre que houver algum conteúdo. Esse é um desafio muito difícil devido à forma como os navegadores funcionam.
• Primeiro momento ocioso da CPU. Essa métrica está intimamente relacionada ao tempo até a interatividade, pois é um indicador da rapidez com que todo o conteúdo/recursos iniciais no site são carregados e a CPU do dispositivo entra em um estado ocioso (não faz nada). A razão pela qual isso é relatado é que os desenvolvedores devem se concentrar em carregar a quantidade mínima de conteúdo primeiro. Quando uma pequena quantidade é enviada, a CPU do dispositivo processa todo o código e chega ao estado ocioso mais rápido.
• Latência de entrada estimada. A métrica final relatada pelo Lighthouse não tem nada a ver com o desempenho do primeiro carregamento do site. O que ela faz é tentar fornecer o tempo (em milissegundos) em que o site responde a toques/cliques. A ideia é que, quanto mais rápido o site responder, mais usuários irão considerá-lo rápido e ficarão menos propensos a sair do site.

Após a realização desses testes, o Lighthouse também dará recomendações priorizadas sobre como você pode ajudar a melhorar a pontuação geral de velocidade. Isso aparece na segunda metade da página e fornece detalhes muito técnicos sobre o que você pode fazer e os benefícios que essas alterações podem oferecer.

O que o Duda faz

A Duda otimizou os sites criados em nossa plataforma para obter uma pontuação alta, especificamente no teste do Google Page Speed. Isso significa que examinamos os testes mencionados acima e otimizamos nossos sites para cada um deles. Temos um ótimo post no blog escrito pelo nosso diretor de tecnologia (CTO), que descreve como otimizamos a velocidade da página. A seguir, um resumo de como lidamos com cada uma dessas verificações:

• Evitar redirecionamentos a landing pages. Na maioria dos sites do Duda, temos 100% de aprovação nessa checagem. Isso não está completamente sob o controle do Duda, já que permitimos que os usuários redirecionem para outras páginas por meio do nosso redirecionamento de URL. Nesse caso, recomenda-se não enviar links para seus clientes, parceiros, etc., que não sejam uma página real do seu site.
• Eliminar Javascript e CSS de bloqueio de renderização no conteúdo da região acima da dobra. Como parte da publicação de sites, o Duda otimiza a estrutura deles para estarem de acordo com essa recomendação. Para fazer isso: (1) Calculamos o que chamamos de CSS "crítico". Isso significa que examinamos o site e vemos quais estilos de CSS são necessários para exibir o site. Em seguida, colocamos esse conteúdo embutido no site para que ele seja carregado primeiro. (2) Posteriormente, movemos todos os scripts para a parte inferior do site, para que o conteúdo seja carregado primeiro.
• Ativar compactação. O Duda ativa a compactação gzip para conexões ao nosso site. Isso garante que o arquivo seja compactado, transferido pela Internet e depois descompactado pelo navegador.
• Aproveitar o cache do navegador. O Duda 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 armazenar temporariamente o arquivo no cache do navegador, de modo que na próxima vez que o navegador precisar acessar esse arquivo, ele seja armazenado localmente na máquina, sem a necessidade de ter que baixá-lo novamente do site.
• Minimizar CSS, JS e HTML. Como parte do nosso processo de publicação no Duda, minimizamos todos os recursos CSS. Isso garante que eles tenham o menor tamanho possível quando forem baixados.
• Otimizar imagens. Cada imagem JPG ou PNG que você transfere para o Duda é submetida a um extenso processo de compactação e redimensionamento de imagens para obter o melhor tratamento de imagem possível. Executaremos os processos a seguir:
  • Primeiro, enviamos a imagem para um algoritmo de compactação sem perdas e a armazenamos em nosso CDN. Isso reduz o tamanho da base da imagem.
  • Em seguida, alteramos o tamanho da imagem para cinco versões diferentes. Saiba mais aqui.
  • Depois de alterar o tamanho, submetemos todas as imagens a um algoritmo de compactação com perdas. Isso reduz um pouco a qualidade da imagem, mas proporciona uma grande economia em termos de tamanho das imagens. Na grande maioria dos casos, a perda de qualidade não é visível ao olho humano.
  • Após a compactação com perda, submetemos a imagem a uma compactação sem perdas para garantir que ela tenha o menor tamanho possível.

• Priorizar o conteúdo visível: Como parte do modo como o Duda constrói cada site, nós 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. Essa verificação serve principalmente para garantir que o site não fique muito lento, mas rápido o suficiente. Como o Duda hospeda todos os sites na nossa plataforma, podemos garantir que todos eles respondam rapidamente. Para ajudar a manter esses padrões, usamos a plataforma Amazon Web Services.

O que fazer se seu site não passar no teste

Embora desejemos que todos os sites executados pela Duda atinjam sempre uma pontuação alta, essa não é uma promessa que possamos fazer. Isso ocorre porque nossos clientes podem adicionar seu próprio código, conteúdo e designs ao site e, portanto, não temos controle total sobre o que eles podem ou não podem adicionar. Por esse motivo, há alguns cenários nos quais os sites da Duda não atingem uma pontuação muito acima de 90. A seguir, uma lista de erros/problemas que o teste do Google PageSpeed nos apresenta, dependendo de como o site tiver sido criado:

• Eliminar Javascript e CSS de bloqueio de renderização no conteúdo da região acima da dobra:
  • Elemento de mapa acima da dobra. Se colocar um elemento de mapa no topo do seu site da Duda, você provavelmente terá um resultado negativo na sua classificação do PageSpeed. Para corrigir isso, mova o elemento do mapa para a parte inferior da página.
  • Vitrine acima da dobra. Se colocar uma loja no topo, esse aviso poderá aparecer com frequência. A equipe Duda está trabalhando para resolver essa situação, mas por enquanto, a única recomendação que temos é mover o conteúdo para um lugar mais baixo na página. Uma maneira possível de fazer isso é adicionar uma imagem e um texto úteis acima do elemento da loja, para que a própria loja não esteja na área "acima da dobra" do site.
  • Código/script personalizado no cabeçalho. Se você colocar um código personalizado na seção de cabeçalho do site, um aviso de erro do Google será exibido com frequência, indicando que isso está atrasando a renderização da página. Existem duas opções para corrigir isso: (1) Colocar o código no arquivo body-end.html do site, em vez de colocá-lo no cabeçalho. Dessa maneira, o código vai para o fundo, o que o força a carregar mais tarde, e não no começo. (2) Garantir que o script incorporado aqui 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 a assincronização em scripts, você deve modificá-lo desta maneira:
    • Código antigo: <script src=”https://example.com/script.js”></script>
    • Nova assincronização: <script src=”https://example.com/script.js” async defer></script>
  • Lembre-se de que o código acima pede ao navegador que carregue este código de forma assíncrona, o que deve ajudar a passar este teste do Google PageSpeed.
  • iframe incorporado. Se você incorporar um iframe personalizado em um site da Duda acima da dobra, é mais provável que essa mensagem de erro seja exibida. Mova esse conteúdo mais para baixo da página ou exclua-o completamente.
• Otimizar imagens: atualmente, a otimização de imagem da Duda funciona apenas com imagens JPG e PNG. Se você transferir uma imagem TIFF, GIF ou qualquer outro formato de imagem, é provável que a Duda não possa otimizá-la e essa pode ser a razão deste aviso. É recomendável enviar a imagem para um serviço de otimização de imagens, como EzGif, Compressor.io ou TinyPNG. Outra verificação feita pelo Google é garantir que o site não contenha imagens grandes que mudam de tamanho para caber em pequenos espaços. A Duda tenta ajudar colocando as imagens menores em colunas menores, mas esse processo não é perfeito. Às vezes, pode ser necessário baixar uma imagem, redimensioná-la exatamente para o tamanho da coluna que você deseja usar e recarregar essa imagem. Este caso é bem raro.
• Redimensionar imagens: embora a Duda otimize as imagens para garantir que elas sejam compactadas em um tamanho menor, ela não altera o tamanho da sua imagem na versão para computador 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 px usando a função "arrastar para redimensionar" no editor, ainda assim a imagem inteira será carregada em 3000 x 3000 px. Isso pode afetar negativamente a pontuação "velocidade da página". Para resolver o problema, redimensione a imagem usando o editor de imagem incorporado ou altere-a no software de edição de fotos e recarregue a imagem.
• Aproveite o cache do navegador: se você incluir um código personalizado no seu site, ele geralmente será carregado por um site de terceiros. Se este site não habilitar o cache, o Google vai encontrar este e recomendar a habilitação do cache do navegador. Você deve contatar esse serviço de terceiros para que implementem essa alteração no servidor deles.
• Sua página pode ser muito grande: se você tem muito conteúdo em uma página, pode ser que ela seja grande mesmo depois de usarmos a ferramenta de otimização em seu site. Considere usar menos imagens ou dividir seu conteúdo movendo partes dele para outras páginas.
• Problemas sem solução no momento: para sua informação, estes são os problemas de velocidade da página reportados pelo Google que não podem ser resolvidos por você e devem ser processados como solicitações de funcionalidades para o Duda:
  • Aproveitar o cache do navegador
  • Minimizar HTML / CSS / JS
  • Otimizar a entrega de CSS

Casos em que o Duda não otimiza o site

Há alguns casos em que a Duda não tenta otimizar o site após publicá-lo. Se o código personalizado que usa jQuery (($(‘#ex’)) ou a Duda JS API: dmAPI.runOnReady(‘code’,function(){}); tiver sido colocado no cabeçalho do site. A razão de não otimizarmos é porque esse tipo de código geralmente exige que o jQuery ou as funções dmAPI existam, mas como nossa otimização move esse código mais abaixo na página, ele irá parar de funcionar e, portanto, interromperá o código que foi instalado.