15.11.2024

Carregamento Assíncrono de CSS para Eliminar Bloqueios de Renderização

Resposta Rápida

Para otimizar o desempenho de uma página da web, é recomendado usar o carregamento assíncrono de CSS. Primeiro, insira seus estilos críticos diretamente no HTML e, em seguida, utilize a tag link com o atributo rel="preload" para os demais estilos CSS. Assim que esses estilos terminarem de carregar, o atributo media é alterado de "print" para "all" usando o manipulador de eventos onload. Para garantir que os estilos sejam exibidos sem JavaScript, utilize o elemento noscript. Veja um exemplo dessa abordagem:

<style>/* Estilos críticos inseridos diretamente no HTML */</style>
<link rel="preload" href="async.css" as="style" onload="this.rel='stylesheet'; this.onload=null;" media="print">
<noscript><link rel="stylesheet" href="async.css"></noscript>

Carregamento Assíncrono com Atributos onload e media

Usar o atributo onload na tag link permite o carregamento assíncrono de arquivos CSS sem prejudicar o processo de renderização da página. O atributo media, inicialmente definido como "print", evita a aplicação imediata dos estilos. Ele é alterado para "all" assim que o arquivo CSS está completamente carregado.

<!-- Carregamento assíncrono de estilos CSS -->
<link rel="stylesheet" href="async.css" media="print" onload="this.media='all';this.onload=null;">

Dessa forma, a página permanece responsiva durante o carregamento dos estilos.

Aprimoramento Progressivo da Experiência do Usuário

De acordo com os princípios do aprimoramento progressivo, forneça inicialmente ao usuário o conteúdo básico e, em seguida, carregue estilos adicionais de forma assíncrona. O JavaScript pode ser utilizado para adicionar elementos link após a página ter sido totalmente carregada. Isso evita que qualquer conteúdo não estilizado apareça abruptamente e melhora a interatividade.

Aqui está um exemplo de código que adiciona CSS após o evento de carregamento da janela:

// Carregamento assíncrono de estilos CSS após o carregamento da página
window.addEventListener('load', function() {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'async.css';
    document.head.appendChild(link);
});

Visualização

Você pode visualizar o carregamento assíncrono de CSS como uma rodovia com faixas dedicadas:

🛣️ Carregamento síncrono: Todos os "carros" (estilos CSS) passam por um único portão, causando um "engarrafamento" 🚗🚕🚙
🚦==========🚧===🌐 Renderização da página interrompida devido ao CSS!

🛣️ Rodovia com faixas dedicadas (Carregamento assíncrono): "Carros" (estilos CSS) transitam em faixas separadas, sem prejudicar o tráfego na via principal 🚗🚕🚙
🚀======🌐 CSS não obstrui a renderização inicial da página!

Tente criar "faixas dedicadas" em seus sites para evitar engarrafamentos durante o carregamento.

Gestão de Recursos e Melhoria de Desempenho

É essencial encontrar um equilíbrio entre melhorar o desempenho e a otimização de recursos. Combinar rel="preload" com métodos de carregamento assíncronos pode ser eficaz quando usado de forma consciente. Para pré-carregar estilos que afetam a renderização inicial da página, adote uma abordagem estratégica.

Fique atento às potenciais complexidades no pré-carregamento — arquivos CSS grandes podem desacelerar inadvertidamente o carregamento de outros recursos. Otimize sua estratégia para permitir a divisão e minimização dos arquivos CSS, mantendo o mínimo necessário em cada um deles.

Acessibilidade e Confiabilidade do Carregamento Assíncrono

Ao carregar CSS de forma assíncrona, certifique-se de que seu site permaneça acessível para todos os usuários. Utilize o elemento noscript para garantir que aqueles que têm JavaScript desativado também possam visualizar o conteúdo estilizado.

<!-- CSS alternativo para usuários com JavaScript desativado -->
<noscript><link rel="stylesheet" href="async.css"></noscript>

Além disso, verifique se seu método de carregamento assíncrono não entra em conflito com as Políticas de Segurança de Conteúdo (CSP).

Carregamento Assíncrono de Múltiplos Arquivos CSS

Para carregar vários arquivos CSS de forma assíncrona, use um loop em JavaScript juntamente com os métodos mencionados. Isso tornará os estilos não bloqueantes e melhorará o desempenho da página.

Aqui está um exemplo de carregamento assíncrono de vários arquivos CSS:

// Carregando vários arquivos CSS de forma assíncrona
var cssFiles = ['async1.css', 'async2.css', 'async3.css'];
cssFiles.forEach(function(cssFile) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = cssFile;
    link.media = 'print';
    link.onload = function() { this.media='all'; };
    document.head.appendChild(link);
});

Recursos Úteis

Para obter uma compreensão mais profunda das técnicas de carregamento assíncrono de CSS, você pode explorar publicações do Filament Group, visitar csswizardry.com para dicas sobre otimização de tipografia na web ou investigar as abordagens de Keith Clark para carregamento de CSS não bloqueante.

1. rel=preload - HTML: Linguagem de Marcação de HiperTexto | MDN — como rel=preload pode acelerar seu site.
2. Carregamento diferido de CSS não crítico | web.dev — uma análise do carregamento diferido de estilos não críticos para melhorar os tempos de carregamento de página.
3. GitHub - filamentgroup/loadCSS: Uma função para carregar CSS de forma assíncrona — um guia prático para carregamento assíncrono de CSS.
4. async vs defer attributes - Crescendo com a Web — entendendo atributos async e defer para scripts.
5. Entendendo CSS Crítico — Smashing Magazine — o impacto do CSS crítico no desempenho de renderização.
6. Usando consultas de mídia - CSS: Folhas de Estilo em Cascata | MDN — usando consultas de mídia CSS para design responsivo.
7. PageSpeed Insights — uma ferramenta para avaliar o desempenho de páginas da web após a otimização.

Video

Navigation