Otimizando a entrega de CSS: entendendo a técnica de carregamento diferido de CSS

Para melhorar o desempenho do site, os desenvolvedores geralmente otimizam a entrega de CSS. Uma estratégia mencionada na documentação do Google Developers envolve incorporar CSS crítico na seção

No entanto, isso nos deixa com a pergunta: como podemos carregar um arquivo CSS grande após o carregamento da página?

Solução: adiar o carregamento de arquivos CSS grandes

Para adiar o carregamento de um arquivo CSS grande, podemos utilizar um trecho de código jQuery simples:

    function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='" src " />"));
    }
};

Ao chamar esta função dentro da função $(document).ready() ou window.onload, podemos carregar dinamicamente o arquivo CSS após o término do carregamento da página.

Verificação de método

Para verificar se este método funciona, tente desabilitar o JavaScript em seu navegador e recarregar a página. Se a página ainda carregar corretamente com as folhas de estilo aplicadas, isso demonstra o adiamento bem-sucedido do carregamento de CSS.

Métodos alternativos

Existem métodos alternativos para adiar o carregamento de CSS, como como usar o elemento