PageSpeed Insights - Aprenda Tudo sobre o PSI

Olá, tudo bem?

Trago a vocês um conteúdo muito completo sobre uma ferramenta muito popular no dia a dia dos profissionais de Marketing Digital e também dos profissionais de TI.

Você já deve ter ouvido falar ou já ter feito vários testes no PageSpeed Insights, mas você sabe como ele realmente funciona? Sabia que ele não traz informações atualizadas em tempo real? Se a resposta para estas duas perguntas for NÃO, você esta no lugar certo!

Neste material rico, preparei um conteúdo definitivo sobre o tema e algumas dicas do que você pode fazer para melhorar os índices de carregamento do seu site. Vamos criar uma certa intimidade com o PageSpeed Insights e a partir de agora, vamos nos tornar mais íntimos dele, vamos chamá-lo por seu apelido: PSI

Antes de mais nada, vamos fazer uma breve análise sobre páginas Web.

Se você é dono ou administrador de um site, blog, e-commerce ou similar, você já deve ter passado em algum momento da sua carreira por situações que levam a crer que seu seu canal online precisa carregar mais rápido.

Acredito que você tenha sentido essa necessidade depois de:

  • Acessar seu site e ele ter demorado para carregar
  • Receber o feedback de um terceiro que seu site demorou muito para carregar
  • Fazer uma analise pró ativa em ferramentas de analise
  • Ler um conteúdo na internet falando da importância sobre o tempo de carregamento dos sites
  • Identificou uma taxa de rejeição muito alta

Quando você vai fazer o lançamento de um site, blog ou e-commerce, tenho certeza que 80% da sua preocupação esta voltada para as imagens, para as cores, para o conteúdo que será publicado neste site. O Administrador do site tem uma gana incrível em publicar o melhor do melhor, não é mesmo? 

Até porque, ao publicar o site na internet, ele estará disponível para um numero gigantesco de pessoas, potenciais clientes e muitos criticos. Entendo que se concentrar no melhor visual, melhor fluxo de interação e em redigir o melhor conteúdo seja parte vital do negócio.

Mas você já parou para pensar, que se o seu site demorar para carregar, as pessoas podem abandonar a pagina, ainda durante o carregamento? 

A entrega de uma experiência rápida de web exige muito trabalho do navegador. A maior parte desse trabalho não aparece para nós, escrevemos a marcação e uma página bonita que é exibida na tela.

Mas como exatamente o navegador transforma o consumo do HTML, CSS e JavaScript em pixels renderizados na tela?

A otimização do desempenho é baseada no entendimento do que acontece nessas etapas intermediárias entre o recebimento de bytes de HTML, CSS e JavaScript e o processamento necessário para transformá-los em pixels renderizados. Esse é o caminho crítico de renderização.

Atualmente a internet está escrevendo muito sobre a importância do tempo de carregamento dos sites, mas infelizmente ainda não vi nenhuma informação sobre como efetivamente melhorar, ou como o PSI trabalhar para gerar estes dados.

"Quando eu era criança, aprendi... que se você entender o funcionamento de algo, você poderá utilizar o máximo daquele recurso".

O que é o PageSpeed Insights?

Segundo o Guia do PSI, o PageSpeed Insights (PSI, na sigla em inglês) informa o desempenho real de uma página para dispositivos móveis e computadores. Além disso, ele sugere maneiras de aprimorar a página, sempre com foco na melhora da performance de carregamento. 

Pontuação de velocidade  

O PageSpeed Insights incorpora dados do relatório de experiência do usuário do Chrome (CrUX, na sigla em inglês) para exibir dados do desempenho real de uma página. O PSI informa duas métricas: primeira exibição de conteúdo (FCP, na sigla em inglês) e carregamento do conteúdo DOM (DCL, na sigla em inglês). 

O valor da mediana de cada métrica (FCP ou DCL) é comparado a todas as páginas monitoradas pelo relatório CrUX. Cada métrica recebe uma categoria, dependendo de onde ela se encaixa na distribuição: 

  • Rápido: o valor da mediana da métrica está no terço mais rápido de todos os carregamentos de página. 
  • Lento: o valor da mediana da métrica está no terço mais lento de todos os carregamentos de página. 
  • Médio: o valor da mediana da métrica está no terço médio de todos os carregamentos de página. 

A pontuação geral de velocidade é calculada com base nas categorias de cada métrica: 

  • Rápido: se cada métrica de uma página for rápida.
  • Lento: se qualquer uma das métricas de uma página for lenta. 
  • Médio: todos os outros casos. 

Aqui estou resumindo e estruturando uma documentação sobre o PSI fornecida pelo Google, você pode ler mais sobre a pontuação do PSI

Periodicidade de analise sobre do PSI 

Segundo o guia de perguntas frequentes sobre o PSI as analises não acontecem em tempo real. As métricas informadas analisadas refletem a experiência do usuário durante os últimos trinta dias e são atualizadas semanalmente pelo sistema do PSI.

O PageSpeed Insights armazena em cache e por um curto período os resultados da pontuação de otimização. As mudanças que você tiver feito para implementar as otimizações sugeridas serão reconhecidas dentro de alguns minutos e depois serão armazenados neste cache.

Outro ponto importante para ressalvar neste tópico, é que os índices gerais apresentados no relatório PSI são um reflexo de resultados apresentados por usuários reais da web convergindo com a experiencia do seu site real.

Então a analise não entrega dados com extremo nível de precisão, mas entrega informações consolidadas da experiencia de milhares de pessoas que permitem que o Google aprimore seus dados.

Metodologia do PSI   

O Relatório de experiência do usuário do Google Chrome é medido por usuários reais de métricas da experiência do usuário em toda a web pública, agregado de usuários que optaram por sincronizar seu histórico de navegação, não configuraram uma senha do Sync e têm relatórios de estatísticas de uso ativados. Os dados resultantes são disponibilizados por meio de:

  1. O PageSpeed Insights , que fornece métricas de experiência do usuário em nível de URL para URLs populares que são conhecidos pelos rastreadores da Web do Google.
  2. Projeto público do Google BigQuery , que agrega métricas de experiência do usuário por origem, para todas as origens conhecidas pelos rastreadores da Web do Google e dividido em várias dimensões descritas abaixo.

As métricas fornecidas pelo Relatório público de experiência do usuário do Google Chrome, são hospedados no Google BigQuery e são fornecidas por APIs padrão expostas por navegadores modernos e agregadas à resolução da origem.

Proprietários de sites que desejam uma análise mais detalhada (resolução no nível de URL) e insights sobre o desempenho do site e podem usar as mesmas APIs para coletar dados de medição real do usuário (MRU) para suas próprias origens.

As principais métricas de analise do PSI 

1. FCP e DCL 

Paint Timing API define duas métricas: primeira exibição (FP) "First Print" e primeira exibição de conteúdo (FCP) "First Print Content". Essas métricas são definidas quando o navegador renderiza pixels para a tela, ou seja, quando ele transforma HTML e CSS (códigos) em elementos visuais na tela.

2. FCP 

A principal diferença entre as duas métricas é que a FP marca o ponto em que o navegador renderiza algo visualmente diferente do que estava na tela antes da navegação. E a FCP é o ponto em que o navegador processa o primeiro bit do conteúdo do DOM, que pode ser texto, uma imagem, SVG ou até mesmo um elemento HTML.

Então a FCP – First Contentful Paint ou Primeira exibição de conteúdo é métrica que calcula quanto tempo demora para algum elemento ser carregado no seu site, podendo ser texto, imagem ou renderização de tela.

Com pontuação mais rápida de FCP há mais chances de manter os usuários envolvidos.

3. DCL 

O DOMContentLoaded – carregamento do conteúdo DOM informa a hora em que o documento HTML inicial foi completamente carregado e analisado.

Mais informações da DCL em Mozilla.org

4. Fluxo de carregamento 

O fluxo de carregamento acontece da seguinte forma em navegadores modernos

  • Bytes → caracteres → tokens → nós → modelos de objeto.
  • A marcação HTML é transformada em um Document Object Model (DOM). A marcação CSS é transformada em um CSS Object Model (CSSOM).
  • DOM e CSSOM são estruturas de dados independentes.
  • A "Timeline" do Chrome DevTools permite registrar e avaliar os recursos usados para a criação e o processamento do DOM e do CSSOM.
PageSpeed Insights, tudo sobre PSI

 

O exemplo acima, nos mostra em fluxo visual como uma pagina simples carrega em um navegador.

  1. Toda informações em computadores se resume a 0 e 1, já ouvi falar sobre isso? Quando o navegador esta recebendo informações de Bytes, ele esta interpretando comando exdecimais. 
  2. Após este processo, ele interpreta os caracteres em formato estruturado. São palavras, textos que estão presentes em seu site.
  3. Agora ele identifica as tags que você inseriu em seu código HTML, veja que agora é o primeiro estágio em que os textos vão receber alguma referencia de <div>, <h1>, <h2>, etc...
  4. O navegador agora esta criando os nós com os elementos de texto e os tokens do seu texto estruturado.
  5. Agora é o momento que o navegador é capaz de imprimir o resultado real de uma página renderizada no navegador.

O resultado final de todo esse processo é o Document Object Model, ou "DOM", da nossa página simples, que é usado pelo navegador para todos os demais processamentos da página.

O processo descrito acima, é uma página muito simples, composta apenas por HTML puro, neste caso não está considerando nenhuma folha de estilo extra. Este processo é um exemplo de como o DOM é construído e qual é seu fluxo, mas veja que se considerarmos o CSS, este processo tenta a elevar o tempo e da mesma forma, quanto mais informações forem agregadas no CSS, mais tempo de renderização será necessário para carregar seu website.

Poderíamos ter declarado os estilos diretamente na marcação HTML (embutida), mas a manutenção do CSS independente do HTML nos permite tratar conteúdo e design como assuntos separados. Os designers podem trabalhar no CSS, os desenvolvedores podem se concentrar no HTML, e assim por diante.

Assim como no HTML, precisamos converter as regras CSS recebidas em algo que o navegador consiga entender e usar. Portanto, repetimos o processo do HTML, mas para o CSS dessa vez:

PageSpeed Insights, tudo sobre PSI

Os bytes do CSS são convertidos em caracteres, depois em tokens, nós e, por fim, são vinculados em uma estrutura de árvore conhecida como "CSS Object Model", ou, abreviando, CSSOM:

PageSpeed Insights, tudo sobre PSI

 

Por que o CSSOM tem uma estrutura de árvore? Para calcular o conjunto final de estilos de um objeto da página, o navegador começa com a regra mais geral aplicável a esse nó (por exemplo, se é secundário a um elemento "body", todos os estilos de "body" se aplicam). Em seguida, refina com recursos os estilos calculados aplicando regras mais específicas, ou seja, as regras são aplicadas em "cascata de cima para baixo".

Para sermos mais claros, vamos considerar a árvore do CSSOM acima. Todo o texto dentro da tag span colocado dentro do elemento "body" tem fonte de tamanho 16 pixels na cor vermelha. A instrução de tamanho de fonte é aplicada em cascata de "body" a "span". No entanto, se uma tag span for filha de uma tag paragraph (P), seu conteúdo não será exibido.

Lembre-se que a forma que você criou seu folha de estilo css, pode estar afetando de forma negativa o carregamento do seu site. Segundo os exemplos acima, fica claro o entendimento que detalhes podem afetar o desempenho do seu site como um todo.

As árvores do CSSOM e do DOM são combinadas em uma árvore de renderização, que é usada para processar o layout de cada elemento visível e atua como mecanismo de entrada para o processo de gravação, que renderiza os pixels na tela. A otimização de cada uma dessas etapas é essencial para se obter o desempenho de renderização ideal.

Na seção anterior sobre a construção do modelo de objetos, criamos as árvores do DOM e do CSSOM de acordo com os recursos HTML e CSS. No entanto, ambos são objetos independentes que capturam aspectos diferentes do documento: um descreve o conteúdo e o outro, as regras de estilo que devem ser aplicadas ao documento.

Como podemos mesclar os dois para que o navegador renderize os pixels na tela?

  • As árvores DOM e CSSOM são combinadas para formar a árvore de renderização.
  • A árvore de renderização contém apenas os nós necessários para renderizar a página.
  • O layout calcula a posição e o tamanho exatos de cada objeto.
  • A gravação é a última etapa, em que a árvore de renderização final é usada para renderizar os pixels na tela.

Primeiro, o navegador combina o DOM e o CSSOM em uma "árvore de renderização" que captura todo o conteúdo visível do DOM e todas as informações de estilo do CSSOM de cada nó.

PageSpeed Insights, tudo sobre PSI

Para construir a árvore de renderização, em termos gerais, o navegador executa as seguintes atividades:

  1. A partir da raiz da árvore DOM, percorre cada nó visível.
  • Alguns nós não são visíveis (por exemplo, tags script, tags meta e assim por diante) e são omitidos, pois não são refletidos no resultado da renderização.
  • Alguns nós foram ocultados via CSS e também são omitidos da árvore de renderização, como por exemplo, o nó "span"---do exemplo acima---não está presente na árvore de renderização porque temos uma regra explícita que define a propriedade "display: none" nela.
  1. Para cada nó visível, encontre as regras do CSSOM correspondentes adequadas e aplique-as.
  2. Emita nós visíveis com conteúdo e seus estilos processados.

Observação: um outro ponto que vale destacar é que visibility: hidden é diferente de display: none.

O primeiro torna o elemento invisível, mas o elemento ainda ocupa espaço no layout (ou seja, é renderizado como uma caixa vazia), enquanto que o segundo (display: none) remove completamente o elemento da árvore de renderização: o elemento fica invisível e não faz parte do layout."

O resultado final é uma renderização com o conteúdo e as informações de estilo de todo o conteúdo visível na tela.  Com a árvore de renderização concluída, podemos prosseguir para a fase de layout.

Até agora, calculamos que nós devem ser visíveis e seus estilos processados. Mas ainda não calculamos a posição e o tamanho exatos na janela de visualização do dispositivo---essa é a fase do layout, também conhecida como "reflow".

Para determinar o tamanho e a posição exatos de cada objeto, o navegador começa na raiz da árvore de renderização e passa por toda ela. Vamos analisar um exemplo prático simples:

<!DOCTYPE html>
<html>
 <head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Critial Path: Hello world!</title>
 </head>
 <body>
   <div style="width: 50%">
     <div style="width: 50%">Hello world!</div>
   </div>
 </body>
</html>

O corpo da página acima contém dois divs aninhados. O primeiro div (primário) define o tamanho do nó na tela como 50% da largura da janela de visualização. O segundo div---que fica dentro do primário---define sua largura como 50% do seu primário, ou seja, 25% da largura da janela de visualização.

PageSpeed Insights, tudo sobre PSI

O resultado do processo de layout é um "modelo de caixa" que captura a posição e o tamanho exatos de cada elemento dentro da janela de visualização. Todas as medições relativas são convertidas em pixels absolutos na tela.

Agora que conhecemos os nós visíveis, seus estilos processados e sua geometria, podemos finalmente passar essas informações para a última fase, que converte cada nó da árvore de renderização em pixels reais na tela. Essa etapa é frequentemente chamada de "gravação" ou "rasterização".

Esse processo pode demorar um pouco porque o navegador tem bastante trabalho a fazer. No entanto, o Chrome DevTools pode fornecer algumas ideias para as três etapas descritas acima.

Vamos examinar a fase de layout do nosso exemplo original "hello world":

PageSpeed Insights, tudo sobre PSI
  • O evento "Layout" captura a construção, a posição e o cálculo de tamanho da árvore de renderização na "Timeline".
  • Quando o layout é concluído, o navegador emite eventos "Paint Setup" e "Paint", que convertem a árvore de renderização em pixels na tela.

O tempo necessário para se executar a construção, o layout e a gravação da árvore de renderização varia de acordo com o tamanho do documento, dos estilos aplicados e, naturalmente, do dispositivo em que tudo isso é executado.

Quanto maior o documento, maior o trabalho a ser executado pelo navegador. Quanto mais complexos os estilos, mais tempo será necessário para a gravação (por exemplo, o "custo" da gravação de uma cor sólida é pequeno, enquanto que o cálculo e a renderização de uma sombra projetada têm "custo" muito maior).

E finalmente, a página está visível na janela de visualização:

PageSpeed Insights, tudo sobre PSI

Vamos recapitular as etapas do navegador:

  1. Processar a marcação HTML e criar a árvore do DOM.
  2. Processar a marcação CSS e criar a árvore do CSSOM.
  3. Combinar o DOM e o CSSOM em uma árvore de renderização.
  4. Executar o layout na árvore de renderização para calcular a geometria de cada nó.
  5. Pintar os nós individuais na tela.

A nossa página de demonstração pode parecer bastante simples, mas exige bom tempo de trabalho. Se o DOM ou o CSSOM forem modificados, você teria que repetir o processo para descobrir que pixels precisariam ser renderizados novamente na tela.

A otimização do caminho crítico de renderização é o processo de minimizar o total de tempo gasto nas etapas 1 a 5 da sequência acima. Isso permite renderizar conteúdo na tela o mais cedo possível, além de reduzir o tempo entre as atualizações da tela após a renderização inicial, ou seja, atingir uma taxa de atualização mais alta para conteúdo interativo.

Neste momento já escrevi mais de 3000 palavras e ainda estou na metade do tema sobre o PSI. 

Nos exemplos acima falamos sobre o PSI, Metodologia, Métricas, sobre HTML e DOM e ainda não falamos sobre CSS e CSSOM e nem mensionamos os JavaScript e como eles podem impactar o resultado de nosso tempo de carregamento.

Neste ponto, eu decidi dividir este conteúdo em duas partes, e retormar o tema em uma nova publicação em breve.

Espero que tenha gostado até aqui, comenta aqui neste post um feedback ou um tema que gostaria de ver aqui no blog em novas publicações.

Até Logo! 

PageSpeed Insights - Aprenda Tudo sobre o PSI

Leia outras publicações