Optimización de la entrega de CSS: comprensión del aplazamiento de la carga de CSS

Al optimizar la entrega de CSS, aplazar la carga de archivos CSS grandes después de que se haya cargado la página mejorar significativamente el rendimiento de la página. Si bien el ejemplo proporcionado por los desarrolladores de Google demuestra la incorporación de archivos CSS pequeños para lograr estilos críticos, deja abierta la cuestión de cómo aplazar archivos CSS más grandes.

Acceder al archivo CSS original después de la carga

Para posponer la carga de un archivo CSS grande hasta que la página se haya cargado, podemos utilizar el siguiente fragmento de código jQuery:

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

Esta función crea dinámicamente una etiqueta de enlace en el encabezado HTML y establece el atributo href en el archivo CSS deseado. Para activar la hoja de estilo, simplemente llame a la función dentro del controlador de eventos $(document).ready() o window.onload.

Verificar aplazar resultados

Para verificar Si el archivo CSS realmente se carga después de que se haya cargado la página, puede desactivar JavaScript en su navegador. Si el archivo CSS no aparece en la página, confirma que se está cargando dinámicamente. Además, se recomienda probar la mejora del rendimiento utilizando una herramienta como Google PageSpeed ​​Insights para cuantificar el impacto en los tiempos de carga de la página.

Al emplear esta técnica, podemos optimizar la entrega de CSS y mejorar el rendimiento general de nuestra web. páginas. Aplazar la carga de archivos CSS de gran tamaño permite que la página se represente rápidamente y proporciona una experiencia de usuario más fluida.