Recursos de bloqueio de renderização

Recursos que bloqueiam a renderização são arquivos que um navegador precisa baixar e processar antes de exibir qualquer conteúdo. São predominantemente folhas de estilo referenciadas no cabeçalho do documento e scripts síncronos encontrados durante a análise sintática, e são o motivo mais comum para uma página demorar mais para carregar do que o conteúdo justifica.

Os bloqueios de folhas de estilo têm uma razão justificável. Renderizar o conteúdo antes que os estilos estejam disponíveis produziria um breve flash de conteúdo sem estilo, seguido por uma transição brusca para uma nova página, então os navegadores esperam. O problema não é que os bloqueios de folhas de estilo existam, mas sim que os sites normalmente carregam muito mais estilos do que a visualização inicial exige, incluindo estilos para componentes mais abaixo na página, para outros modelos e para recursos que o visitante pode nunca usar, e tudo isso precisa chegar antes que qualquer coisa seja exibida.

Os scripts são bloqueados porque um script encontrado durante a análise pode modificar o documento, então o analisador para até que ele seja executado. A maioria dos scripts não precisa desse comportamento: ferramentas de análise, widgets de bate-papo, ferramentas de personalização e a maior parte do código do aplicativo podem ser executados após a análise do documento sem qualquer perda de correção. Adicionar o atributo `defer` permite que a análise continue e execute os scripts em ordem posteriormente, enquanto o atributo `async` os executa assim que chegam, sem garantias de ordem.

A solução padrão para folhas de estilo é separar os estilos necessários para a visualização inicial do restante. A parte crítica é incorporada diretamente no documento, sem necessidade de requisição, e o restante é carregado de forma não bloqueante. Isso é eficaz, mas aumenta a complexidade de compilação, já que o conjunto crítico precisa ser regenerado sempre que os estilos mudam, e CSS crítico desatualizado produz defeitos visíveis.

Recursos de terceiros são frequentemente os maiores contribuintes e os mais difíceis de controlar. Gerenciadores de tags, plataformas de consentimento, provedores de fontes, ferramentas de bate-papo e frameworks de teste são normalmente adicionados ao cabeçalho do documento com comportamento de bloqueio, cada um exigindo uma conexão com uma origem separada. O atraso cumulativo é substancial e, como cada um foi adicionado por uma equipe diferente por um motivo justificável, ninguém é responsabilizado pelo custo total. Auditar o custo total e atribuí-lo à função solicitante é o que torna a relação custo-benefício visível.

As fontes exigem um tratamento especial, pois bloqueiam a renderização do texto em vez da estrutura da página. Dependendo da estratégia de exibição, o texto pode ficar invisível enquanto uma fonte é baixada, o que significa que o conteúdo que já foi totalmente carregado é deliberadamente retido. Escolher uma estratégia que exiba o texto alternativo imediatamente e o substitua quando a fonte for carregada, além de pré-carregar as fontes usadas acima da dobra, evita a situação em que uma página é tecnicamente renderizada, mas aparece em branco.

Medir o custo real exige cuidado, pois remover um recurso bloqueador nem sempre produz a economia prevista. Os recursos são baixados em paralelo, portanto, eliminar um pode simplesmente permitir que outro se torne a restrição, e a melhoria observada é frequentemente menor do que a soma das estimativas individuais. Verificar por meio de medições após cada alteração, em vez de confiar nos totais projetados, mantém as expectativas precisas.

Identificar o que realmente está causando o bloqueio é simples com ferramentas padrão, que relatam os recursos bloqueadores e estimam a economia resultante da resolução de cada um deles. As estimativas devem ser consideradas indicativas, e não precisas, visto que a remoção de um recurso bloqueador frequentemente revela que outro era a verdadeira restrição, e as melhorias são melhor verificadas por meio de medições, em vez de serem presumidas a partir do relatório.

Como os recursos envolvidos geralmente são adicionados por várias equipes ao longo do tempo, a remediação exige governança tanto quanto engenharia. Na prática, a auditoria e a priorização ficam a cargo de... desempenho na web trabalho, as alterações de compilação são implementadas através de desenvolvimento de produtosE as decisões sobre quais ferramentas de terceiros justificam seu custo de bloqueio precisam de consenso com as equipes que as solicitaram, o que para a maioria dos sites significa... departamento de marketing digital.