HTML5 Boilerplate and optimizing the critical rendering path by deferring scripts and styles

Question

HTML5 Boilerplate and optimizing the critical rendering path by deferring scripts and styles

Previously, I constructed my website layouts using the HTML5 Boilerplate method: incorporating styles and Modernizr in the head section, jQuery (either from Google CDN or as a hosted file) along with scripts just before the closing body tag. This is an example of how it was set up:

<!DOCTYPE html>
 <!-- modernizr conditional comments here -->
 <html class="no-js">
    <head>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

However, I am now aiming to eliminate all render-blocking below-the-fold CSS and JS files as per recommendations from Google's PageSpeed Insight.

I'm looking for guidance on how to defer the loading of CSS and JS files, especially the jQuery library sourced from Google. Additionally, what steps should be taken regarding Modernizr?

javascript jquery css performance deferred-rendering

Answer 1

Answer №1

If you want to get rid of this specific warning, follow these steps:

Delay the loading of all external CSS until after the page finishes loading
Delay the loading of all external JS until after the page finishes loading

In practical terms, here's what you need to do:

Separate your CSS into two categories: one for preventing the "flash of unstyled content" (FOUC) and the other for everything else
Do the same separation for your javascript files
Inline the necessary CSS and JS
Delay the loading of the remaining CSS and JS until after the page finishes loading

The most effective way to achieve this is by using build tools. You can utilize various Grunt tools or opt for the ant-based H5BP Build Script.

The fundamental approach to deferring loads is as follows:

(function () {
    // Load jQuery after the page has finished loading
    function loadJS() {
        var url = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";
        var n = document.createElement("script");
        n.src = url;
        n.onload = loadJS1;
        document.body.appendChild(n);
    }

    // Load additional JavaScript after jQuery has been loaded.
    function loadJS1() {
        var url = "js/main.js";
        var n = document.createElement("script");
        n.src = url;
        // Add more load functions if necessary.
        //n.onload = loadJS2;
        document.body.appendChild(n);
    }

    // Check for browser support for event handling capability
    if (window.addEventListener) {
        window.addEventListener("load", loadJS, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", loadJS);
    } else {
        window.onload = loadJS;
    }
})();

Answer 2

If you want to get rid of this specific warning, follow these steps:

Delay the loading of all external CSS until after the page finishes loading
Delay the loading of all external JS until after the page finishes loading

In practical terms, here's what you need to do:

Separate your CSS into two categories: one for preventing the "flash of unstyled content" (FOUC) and the other for everything else
Do the same separation for your javascript files
Inline the necessary CSS and JS
Delay the loading of the remaining CSS and JS until after the page finishes loading

The most effective way to achieve this is by using build tools. You can utilize various Grunt tools or opt for the ant-based H5BP Build Script.

The fundamental approach to deferring loads is as follows:

(function () {
    // Load jQuery after the page has finished loading
    function loadJS() {
        var url = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";
        var n = document.createElement("script");
        n.src = url;
        n.onload = loadJS1;
        document.body.appendChild(n);
    }

    // Load additional JavaScript after jQuery has been loaded.
    function loadJS1() {
        var url = "js/main.js";
        var n = document.createElement("script");
        n.src = url;
        // Add more load functions if necessary.
        //n.onload = loadJS2;
        document.body.appendChild(n);
    }

    // Check for browser support for event handling capability
    if (window.addEventListener) {
        window.addEventListener("load", loadJS, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", loadJS);
    } else {
        window.onload = loadJS;
    }
})();

HTML5 Boilerplate and optimizing the critical rendering path by deferring scripts and styles

Answer №1

Similar questions

Is it possible to trigger Material UI Dialogs from the Parent Component?

Understanding the relationship between controller and view in AngularJS is crucial for building dynamic

Having trouble with the tooltip feature in Bootstrap?

What is the process for saving an HTML document with SaveFile.js?

What is the best method for incorporating a YouTube embedded video into an image carousel using HTML and CSS?

Ajax is functioning properly on Internet Explorer and Safari, however it is not functioning on Firefox, Chrome, or Opera

Issue with initializing MdTable in Vue Material when fetching data

Despite correctly declaring jquery-ui.js and numeric.js, the jQuery datepicker and numeric plugins are not working as expected

What could be causing the issue of DataTables not functioning properly when using data from a new partial view?

Aligning SVG shapes within each other

Encountering a "SyntaxError: Unexpected token '/' in... index.ejs while compiling ejs" issue following the recent npm package updates

Ways to dynamically fetch data by merging the response outcome with a dynamic parameter from the route in Vue.js

Multiple instances of the removeClass function getting triggered upon completion

What could be causing my div to display a horizontal scrollbar in Firefox?

Tips for incorporating WinBox JS into Angular applications

Turn off automatic compilation for LESS styling

Modifying radio inputs to update when a state variable is altered in react.js

Trouble sliding with Material UI Slider

JavaScript and PHP open-source libraries for enabling voice chat functionality

Is it possible to use the .focus() event on an entire form in JQuery? If so, how