Google Page Speed Insights 100/100

Science2IT Consulting Services

Web Development

O Google PageSpeed Insights é sem dúvida uma ferramenta muito útil para programadores e proprietários de sites que pretendem avaliar métricas de desempenho de páginas web, de forma a identificar aspectos negativos que possam prejudicar o tempo de carregamento de uma página.

Como testar a velocidade do seu site?

Abra a ferramenta PageSpeed ​​Insights, insira o URL do seu site na barra.

Clique no botão “Analisar” para que o Google iniciar o teste.

Podem ver o relatório de avaliação da Science2it:

No primeiro teste que realizámos, obtivemos 97 em Desktop, no entanto, após alguns segundos voltámos a realizar o teste e tivemos 100. O valor da pontuação depende de vários fatores e a velocidade de resposta do servidor não é uma velocidade fixa.

A página inicial da Science2it é uma landingpage com efeitos em javascript e vários secções que contêm, uma seção com os produtos mais vendidos e os últimos artigos publicados. Temos bastante informação na homepage não é verdade? No entanto, é possível obter uma excelente pontuação colocando em prática algumas sugestões dadas pela ferramenta do Google.

Temos notado que muitas pessoas passam horas obcecadas com a optimização dos sites, para obterem uma pontuação de 100/100 no teste do Google.

Na prática, a ferramenta Google PageSpeed Insights não deve ser utilizada com esse objetivo. Se tem que gerir o orçamento para o seu negócio, ter 100/100 em todas as páginas do seu site não deve ser uma obsessão, pois para manter o negócio é necessário ter vendas, certo?

Se ainda não fez vendas, nunca testou o produto ou serviço que pretende vender, não conhece o seu publico-alvo, porque motivo pretende ter 100 no teste do Google Page Speed Insights?

Obviamente a velocidade de carregamento das páginas é essencial para ter uma empresa de sucesso e um site de alta conversão, mas não fique obcecado em obter 100, pois como vai ver neste artigo, a pontuação depende de vários fatores e o mais importante é ter uma página que não demore mais de 3 segundos a carregar.

Além disso, prejudicar a experiência do utilizador ou instalar plugins no WordPress para carregar todos os conteúdos da página apenas quando se move o rato para ter uma classificação superior a 90, só irá prejudicar o seu negócio. Queremos dar aos clientes uma optima experiência, não queremos que fique à espera quando estava pronto para começar a navegar pelo site.

Quando analisamos o relatório de auditoria do Google, temos de nos concentrar na implementação das recomendações da plataforma. Se todos as possíveis optimizações forem realizadas, sem dúvidas, irá alcançar óptimos benefícios para o seu site.

Neste artigo vamos explicar como funciona a ferramenta PageSpeed Insights, assim como são atribuídas as classificações e o que pode fazer para optimizar as páginas do seu site.

Como são atribuídas as classificações?

O Google PagesSpeed Insights é desenvolvida pela Lighthouse e fornece dados de laboratório e dados de campo de uma página.

Os dados de laboratório são criados em condições fixas, enquanto os dados de campo utilizam velocidades de carregamento reais, obtidos durante um período de tempo.

Quando o intuito é analisar dados de laboratório, a ferramenta PageSpeed Insights analisa um determinado URL com o Lighthouse e fornece a saída como uma pontuação de desempenho.

O objetivo de um teste de laboratório é controlar o máximo de fatores possível, para que os resultados sejam consistentes e reproduzíveis de execução para execução.

Os dados de campo são determinados através da monitorização de todos os utilizadores que visitam uma página tendo em conta um conjunto de métricas de desempenho para cada experiência individual desse utilizador. Como os dados de campo têm como base visitas de utilizadores reais, representam dispositivos, condições de rede e localizações geográficas.

As ferramentas do Chrome que mostram dados de campo, por norma, obtêm esses dados do Relatório de experiência de utilizador do Chrome (CrUX). Também é recomendado que os proprietários de sites, obtenham os dados de campo por conta própria, esses insights são essenciais e devem ser utilizados juntamente com o CrUX.

Podemos concluir que dados de campo são um conjunto de dados de desempenho obtidos de diversos utilizadores. Para um visitante do site, a página pode carregar rapidamente, enquanto para outros pode carregar lentamente.

1. Elimine recursos Render-Blocking

Quando fazemos um teste no Page Speed Insights, são indentificados dois tipos de URLs Render-Blocking: scripts e folhas de estilo (stylesheets).

O que são recursos render-blocking?

Quando visita uma página, o browser começa a ler o código da página, iniciando pelo. Dentro da tag, temos várias chamadas a ficheiros CSS ou JavaScript. Ou seja, antes do browser carregar a página, terá que fazer o download e processar esses ficheiros. O tempo necessário para analisar esses recursos poderia ser gasto em algo mais produtivo, como carregar conteúdos em html.

Primeiro terá que identificar quais os recursos que são realmente críticos e os que não são. Pode utilizar Coverage tab no Chrome DevTools para identificar CSS e JS não críticos. Quando carregar ou executar uma página, Coverage tab irá mostrar o código que utilizado, versus a quantidade de código carregada.

Plugins e extensões úteis para o carregamento de recursos críticos:

Drupal: Advanced CSS/JS Aggregation

Joomla: JSpeed

WordPress: W3 Total Cache

2. Minificação de código

Minificação é o processo de remover espaços em branco e qualquer código que não seja necessário para criar um ficheiro com menos código.

Plugins e extensões úteis para minificação de código:

Drupal: Advanced CSS/JS Aggregation

Joomla: JSpeed

WordPress: W3 Total Cache

3. Optimizar as imagens

A secção Oportunidades do relatório lista todas as imagens não otimizadas, com economia potencial. É essencial optimizar as imagens do site para que a página carregue mais rápido e para que consuma menos dados.

Existem vários passos que devem ser considerados na optimização de imagens:

3.1 Comprimir imagens

O objetivo é obter uma imagem que ocupe o mínimo espaço possível, mantendo uma qualidade aceitável.

Existem vários sites onde pode comprimir as imagens gratuitamente. No TinyJPG, pode comprimirr imagens em WebP, JPEG e PNG.

3.2 Substituir GIFs animados por vídeo

No ezgif.com pode fazer a conversão para vários formatos, comprimir, cortar e fazer ajustes nos vídeos antes de os publicar.

3.3 Lazy loading de imagens

Se utilizar lazy load de imagens no seu site, as páginas vão sendo carregadas à medida que vai fazendo scroll down no página. Assim, só irá carregar os conteúdos que precisa e irá optimizar bastante a velocidade de carregamento das páginas.

Se utiliza WordPress, o plugin A3 Lazy Load é uma excelente opção.

Para os utilizadores de Drupal, podem consultar a seguinte página: lazy-load-module Lazy load module.

Caso pretenda, também pode implementar o script de lazy load diretamente no site sem utilizar plugins.

3.4 Utilização de imagens responsivas

Imagine que está a utilizar um ecrã com 300 pixels de largura e acede a uma página com uma imagem com 1500 pixels de largura. A página desperdiçou muitos dados do seu telemóvel desnecessáriamente, porque o ecrã não pode fazer nada com a resolução extra. O ideal seria ter 3 a 5 tamanhos diferentes de uma imagem para que possam ser utilizados de acordo com a resolução do dispositivo utilizado. A ferramenta ImageMagick CLI é uma excelente opção para redimensionamento de imagens.

3.5 Utilizar imagens WebP

As imagens WebP aumentam a velocidade de carregamento das páginas e sem perder qualidade. Na prática, oferecem uma redução significativa no espaço ocupado pelos ficheiros de forma a tornar as páginas mais eficientes para oferecer uma experiência mais rápida ao utilizador.

Se utiliza WordPress, o plugin imagify é uma excelente opção para converter as imagens do seu site para o formato WebP e optimizar consideravelmente o desempenho de carregamento das páginas.

4. Compressão de Texto

Gzip é o método de compressão muito utilizado eficaz, que por norma, reduz o tamanho da resposta do servidor em cerca de 70%. Muitos sites já têm a compressão de texto ativa no servidor. No entanto, deverá confirmar se já está ativa. Se não estiver e utilizar o WordPress num servidor Apache, pode utilizar o utilizar o seguinte código:

  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent

Cole o código no ficheiro .htaccess, depois do #END.

5. Reduzir o código de terceiros

Um script de terceiros é qualquer script alojado num domínio diferente do seu domínio. À medida que a página carrega, o Google Page Speed Insights calcula o tempo necessário para correr cada um dos scripts de terceiros. Se o tempo total de bloqueio for superior a 250 ms, a auditoria falhará.

Os scripts síncronos atrasam a construção e a renderização do DOM, por isso deve carregar scripts de terceiros de forma assíncrona, a não ser que precise que carregar o script antes que a página seja renderizada.

Os atributos async e defer informam o browser que ele pode analisar o HTML enquanto carrega o script em segundo plano e, em seguida, executar o script depois de carregá-lo. Assim, os downloads de script não bloqueiam a construção do DOM e a renderização da página.

O pode ver a página antes de todos os scripts carregarem.

Utilize o atributo async para que o script seja executado antes do processo de carregamento.

Utilize defer para recursos menos críticos.

Exemplo:

<script async src="science2itEssential.js">

<script defer src="science2itNonessential.js">

5. Utilizar servidor/alojamento web com suporte para o HTTP/2

Um servidor com suporte para HTTP/2 garante o aumento da velocidade do site, assim como mais segurança e criptografia de dados, compressão automática com HPACK e GZIP e priorização de requisições, entre muitas outras vantagens.

Para confirmar que o seu site já está a utilizar HTTP/2, utilize a ferramenta HTTP/2 Test.

6. Implementar AMP?

AMP é uma estrutura HTML de código aberto desenvolvida pelo AMP Open Source Project. Foi originalmente criado pelo Google como concorrente do Facebook Instant Articles e Apple News. O AMP é otimizado para navegação online móvel e visa ajudar as páginas da internet a carregar mais rapidamente.

O Google afirma que as páginas AMP podem carregar em média 4x mais rápido do que as páginas não AMP equivalentes. Isso pode ser muito útil se sua conexão Wi-Fi for lenta ou instável.

Além disso, o Google afirma que as páginas AMP usam até 10 vezes menos dados do que as páginas não AMP equivalentes.

No entanto, de acordo com a pesquisa da Chartbeat e do The Daily Beast, apenas 1 em cada 3 editores testemunha um aumento claro de tráfego de AMP. De acordo com o estudo, apenas 34% dos editores obtêm um aumento significativo de tráfego e muitos enfrentam desafios substanciais de monetização, o que significa que o AMP pode ter um custo elevado para os editores.

Além disso, o AMP danifica muitas galerias de fotos e secção de comentários.

Com a implementação do AMP, temos um aumento substancial da velocidade de carregamento das páginas, visto que utilizamos uma estrutura padrão simples, que não permite proporcionar uma experiência rápida utilizadores mas pouco inovadora.

Como referimos no início do artigo, a velocidade de carregamento das páginas é muito importante e seguir as sugestões de melhorias referidas na auditoria do Page Speed Insights melhorará o desempenho do seu site que consequentemente aumentará as vendas e conversões. Contudo, não é apenas a velocidade que deve ser considerada e a pontuação de uma ferramenta não deve ser obsessão, pois depende de vários fatores que tornam os resultados variáveis.