Optimización de la entrega de CSS: comprensión de la técnica de carga diferida de CSS

Para mejorar el rendimiento del sitio web, los desarrolladores suelen optimizar la entrega de CSS. Una estrategia mencionada en la documentación de Google Developers implica insertar CSS crítico en la sección

Sin embargo, esto nos deja con la pregunta: ¿cómo podemos cargar un archivo CSS grande después de que la página se haya cargado?

Solución: aplazar la carga de archivos CSS grandes

Para aplazar la carga de un archivo CSS grande, podemos utilizar un fragmento de código jQuery simple:

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

Al llamar a esta función dentro de la función $(document).ready() o window.onload, podemos cargar dinámicamente el archivo CSS después de que la página haya terminado de cargarse.

Verificación del método

Para verificar que este método funciona, intente deshabilitar JavaScript en su navegador y luego vuelva a cargar la página. Si la página aún se carga correctamente con las hojas de estilo aplicadas, demuestra el aplazamiento exitoso de la carga de CSS.

Métodos alternativos

Existen métodos alternativos para aplazar la carga de CSS, como como usar el elemento