Página 2 s mais rápida: +15 pontos no Pagespeed

Otimizar a velocidade de carregamento de uma página é algo que agrega um valor bastante tangível: o tempo. Quanto vale 1 segundo da vida de cada pessoa que eventualmente venha a acessar determinada página?

SEOLANDIA. Muita coisa acontece entre o momento em que você digita um endereço no seu navegador e pressiona "enter" ou clica num link e o momento em que essa página web, que você está tentando acessar, aparece na tela do seu computador.

Otimizar a velocidade de carregamento de uma página é algo que agrega um valor de bastante peso: o tempo.

Quanto vale 1 segundo da vida de cada pessoa que eventualmente venha a acessar determinada página?

Tudo o que você não quer ao acessar uma página é que ao digitar o glorioso "enter", uma tela em branco congele no seu navegador por alguns segundos, antes da página aparecer.

Já passou por isso?

Quando um arquivo html começa a ser descarregado no navegador, dependendo da estrutura do código html da página, duas coisas podem acontecer.

A página pode, de imediato, "imprimir" conteúdo no navegador ou, em vez disso, mostrar uma tela branca que permanece até que os downloads de arquivos css e js sejam concluídos.


Figura 1:  Diferença entre página com css crítico embutido na página (otimizado) e css em arquivos externos (não-otimizado) que bloqueiam a renderizacnao da página no topo do documento html.

Se a sua página está nesse segundo caso, onde também estava a SEOLANDIA, a otimização do caminho crítico do css da página vai garantir no mínimo 10 pontos a mais no índice Pagespeed, além de poupar alguns segundos a menos da vida de cada um dos seus usuários.

Tudo o que acontece antes da tela se desenhar na parte visível do navegador é considerado crítico.


Figura 2: tudo o que está envolvido no carregamento do conteúdo da primeira dobra ("above the fold") de um navegador é considerado crítico.

Definitivamente, a primeira coisa que a sua página deve oferecer ao navegador, é o seu conteúdo principal e não uma fila de arquivos a serem descarregados.

Faz toda diferença você ter 1 ou 5 aquivos separados, ou não ter nenhum - antes do conteúdo surgir no html da página. Faz diferença também o tamanho de cada arquivo.

Figura 3: primeiro comando recebido pelo navegador é fazer download de arquivos em vez de "desenhar" algo para o usuário.

Isso quer dizer que a forma com que uma página é programada tem influencia direta na sequencia de comandos que o navegador recebe.


Figura 4: agora primeiro comando recebido pelo navegador é a renderização do conteúdo e só depois download de arquivos é feito.

Como otimizar o critical path css?

Para fazer essa otimização os passos são:

1. Extrair o css crítico da página;
2. "Chumbar" esse css crítico na página;
3. Adiar o carregamento do css não-crítico para depois do conteúdo da página;

Como eu fiz...

Para extrair o css crítico da página, optei por procurar alguma solução na web, e encontrei essa aqui: https://www.sitelocity.com/critical-path-css-generator.

Além de gerar o css crítico, essa ferramenta gera também um arquivo com o css não crítico da página.

Após gerar o css crítico, é só seguir a teoria.

Nesse caso, colei o css crítico no documento e joguei as demais chamadas para depois do conteúdo.

Figura 5: CSS crítico declarado diretamente na página

Foi lindo de ver. Ao executar o Pagespeed na página com css crítico os indices FCP (First Content Paint) e LCP(Largest Content Paint) ficaram verdes na hora e a pontuação aumentou considerávelmente.

Mas ainda havia a indicação de que era possível economizar mais 1,57s  eliminando códigos css que não estavam sendo utilizados.

Então chegou a hora de remover o css não utilizado do arquivo gerado pela ferramenta do critical path.

Logo depois de dar uma googlada, eis que chego à uma página do Stack Overflow.



Usando uma extensão para google chrome chamada CSS Used, foi possível fácilmente capturar somente o css utilizado pela página.

Após substituí-lo e rodar novamente a página na análise Pagespeed, a pontuação da página melhora ainda mais e é possível notar a diferença na velocidade de carregamento da página.



 

Conclusões:

• Fica bem evidente que os arquivos css, assim como js, quando colocados no cabeçalho de uma página web antes do conteúdo, bloqueiam o carregamento da página. O navegador então precisa fazer download de cada arquivo antes de renderizar qualquer coisa na tela;
• A quantidade de arquivos externos no cabeçalho também deixa o carregamento de uma página lenta. Se o css da página estiver em 3 arquivos diferentes, a página será bem mais lenta do que se tivesse apenas 1 arquivo com o css combinado;
• A primeira coisa que a sua página deve oferecer ao navegador, é o seu conteúdo principal e não uma fila de arquivos a serem descarregados;
• Para extrair o css crítico de uma página, você pode usar soluções Critical escrita em node js, ou alguma solução na web, como a desse link.
• Código css que não é utilizado pela página também consome tempo. Por isso, você não pode deixar toda aquela biblioteca do bootstrap no seu código. Utilize uma ferramenta como a extensão Used CSS do Google Chrome para extrair apenas o css que realmente vai usar na página.

A melhora em números:


Bons cliques!