Optimizing CSS delivery: Understanding Deferring CSS Loading

When optimizing CSS delivery, deferring the loading of large CSS files after the page has loaded can significantly improve page performance. While the example provided by Google developers demonstrates inlining small CSS files for critical styling, it leaves open the question of how to defer larger CSS files.

Accessing the Original CSS File After Onload

To defer the loading of a large CSS file until after the page has loaded, we can utilize the following jQuery code snippet:

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

This function dynamically creates a link tag in the HTML head and sets the href attribute to the desired CSS file. To activate the style sheet, simply call the function within the $(document).ready() or window.onload event handler.

Verifying Deferring Results

To verify if the CSS file is truly loading after the page has loaded, you can disable JavaScript in your browser. If the CSS file does not appear on the page, it confirms that it is loading dynamically. Additionally, it is recommended to test the performance improvement using a tool like Google PageSpeed Insights to quantify the impact on page load times.

By employing this technique, we can optimize CSS delivery and enhance the overall performance of our web pages. Deferring the loading of large CSS files allows the page to render quickly and provides a smoother user experience.