Recursos que bloqueiam a renderização

A Silktide verifica se existem folhas de estilo e scripts que o navegador precisa de transferir completamente antes de poder mostrar qualquer coisa na sua página. Cada um deles faz com que os visitantes fiquem a olhar para um ecrã em branco durante mais algum tempo.

Por predefinição, uma folha de estilo ou um script referenciado perto do início de uma página bloqueia a renderização: o navegador não apresenta nada até o ficheiro chegar, porque o ficheiro pode alterar o aspeto ou o comportamento de tudo.

Porque é importante

Os momentos em branco antes de uma página aparecer pela primeira vez são aqueles em que os visitantes decidem se vale a pena esperar. Cada ficheiro que bloqueia a renderização acrescenta uma viagem de ida e volta à rede a esse período em branco, e os atrasos acumulam-se rapidamente em ligações móveis — alguns ficheiros bloqueadores podem manter uma página que, de resto, seria rápida em branco durante vários segundos.

A maior parte desse bloqueio é desnecessária. Normalmente, apenas uma pequena parte do de uma página é necessária para desenhar o primeiro ecrã, e a maior parte do não precisa de ser executada antes de a página aparecer.

Como corrigir

Carregue os scripts sem bloquear, adicionando defer (ou async para scripts independentes, como os de análise):

<!-- Problema: bloqueia a renderização até ser transferido e executado -->
<script src="app.js"></script>

<!-- Corrigido: transfere em paralelo e é executado depois de a página ser analisada -->
<script src="app.js" defer></script>

Insira diretamente na página a pequena quantidade de CSS necessária para o primeiro ecrã e carregue as folhas de estilo completas sem bloquear.
Adicione um atributo media às folhas de estilo que só se aplicam em determinadas situações (como media="print"), para que deixem de bloquear a renderização em todos os outros casos.
Reduza o que pode bloquear: remova estilos e scripts não utilizados e mantenha o restante pequeno — consulte Minificação de CSS e JavaScript minificado.

Como a Silktide testa isto

Carrega a página num navegador real, utilizando o tipo de dispositivo, a velocidade da ligação e a localização do teste configurados para os seus testes de velocidade.
Identifica cada folha de estilo e script que bloqueou a primeira pintura da página.
Estima o tempo durante o qual cada um atrasou a renderização e comunica cada ficheiro com a poupança estimada.
Classifica a página com base no tempo total que poderia ser poupado: cerca de 100 milissegundos reduz a classificação, e 200 milissegundos ou mais resulta numa classificação fraca.

Resolução de problemas

O CSS não tem de bloquear a renderização?

A folha de estilo que controla o primeiro ecrã tem — isso é intencional, para que os visitantes nunca vejam conteúdo sem estilos. A solução não é remover CSS, mas reduzir o que bloqueia: insira a parte crítica na página e carregue o restante de forma não bloqueadora.

O ficheiro bloqueador é um script de terceiros

Os gestores de etiquetas, as fontes e os widgets de conversação são causas frequentes. A maioria funciona corretamente com defer ou async — consulte as instruções atuais de incorporação do fornecedor, que muitas vezes já incluem essa opção.