scottjehl/css-inapplicable-load MIT ★ 75 Última alteração em 2014-05-14

Teste sobre carregamento CSS inapropriado

Quarenta e cinco segundos: esse é o tempo que uma folha de estilos pode atrasar o carregamento da página quando o navegador não prioriza corretamente CSS inapropriado. Primeiro, o scottjehl/css-inapplicable-load investiga como diferentes browsers tratam folhas de estilos condicionais. Depois, demonstra como um simples teste revela diferenças críticas de desempenho.

EVT 1001 Nível Informational Palavra-chave: problema css 00:00:00.137

Navegadores descarregam CSS inapropriado

Folhas de estilo CSS com media queries sempre são descarregadas, mesmo quando as condições não se aplicam. Primeiro, o navegador requisita todos os arquivos CSS declarados. Em seguida, apenas aplica regras se a media query corresponder. O problema: o download sempre ocorre, independentemente de serem úteis para aquele contexto.

Este comportamento pode causar atrasos consideráveis na renderização de páginas. Quando uma folha de estilo demorada é solicitada, o utilizador pode ver a página em branco até o ficheiro terminar de carregar. Em redes lentas, esse atraso pode ultrapassar trinta segundos.

EVT 1002 Nível Informational Palavra-chave: prioridade 00:00:00.274

Prioridade de carregamento em navegadores

Alguns navegadores modernos, especialmente baseados em Webkit e Blink, analisam media queries antes de descarregar folhas de estilo. Se a condição não se aplicar, o carregamento ocorre de modo assíncrono, permitindo exibir o conteúdo da página imediatamente. Outros navegadores, porém, não adotam essa otimização.

Testes mostraram que Chrome 26, Safari 6.0.2, iOS Safari 6.1, Android Webkit, Chrome e Opera Mini exibem o conteúdo imediatamente enquanto a folha de estilo inapropriada ainda carrega.

EVT 1003 Nível Verbose Palavra-chave: experimento 00:00:00.411

Como o teste foi realizado

O scottjehl/css-inapplicable-load define um teste claro: uma folha de estilo com media query impossível de cumprir e um atraso de resposta de 45 segundos. Observa-se se o conteúdo principal da página aparece imediatamente ou só depois do carregamento do CSS.

O HTML do teste inclui um link para uma folha de estilo que simula atraso e uma tag heading visível. Analogia: como uma porta que só abre após uma inspeção—ou se abre enquanto o trabalho ocorre ao fundo.

EVT 1004 Nível Informational Palavra-chave: resultados 00:00:00.548

Principais resultados observados

Resultados variam conforme o navegador. Chrome, Safari, iOS Safari, Android Webkit, Chrome e Opera Mini exibem o conteúdo da página imediatamente enquanto o CSS inapropriado carrega em segundo plano.

Por outro lado, Internet Explorer 8 a 10, Firefox 20, Opera 12.15 e Opera Mobile apresentam uma página em branco pelo tempo total do atraso, retardando a experiência do utilizador.

EVT 1005 Nível Warning Palavra-chave: limitações 00:00:00.685

Limitações e riscos atuais

O teste revela que a priorização do carregamento de CSS inapropriado não é uniforme entre navegadores. Dependendo do browser usado, a experiência pode ser significativamente diferente. O comportamento desejável ainda não é padrão em todos os ambientes.

Ao separar estilos em ficheiros por media query, existe o risco de causar atrasos em navegadores sem suporte a carregamento assíncrono. O experimento mostra a importância de conhecer limitações antes de adotar essa abordagem.

Ver repositório no GitHub