blocking - inverted

In the previous demo, the inline <script> tag was placed above the <stylesheet>. What would happen if we inverted the order?

WebPageTest waterfall chart showing two resources. The Start Render mark appears after 3.0 seconds, after JavaScript execution.

You should notice that the JavaScript execution is delayed until after the stylesheet has finished downloading. Consequently, our Start Render is delayed even further. This is because render-blocking CSS blocks JavaScript execution. This is by design, in case the script makes references to the style. For example when using getComputedStyle.

It is recommended to place render-blocking scripts before any render-blocking stylesheets.

View Source Code

<head>
  <style rel="stylesheet" href="./style.css" />
  <script>
    // simulate CPU intensive JavaScript execution
    sleep(2000);
    console.log("Hello world!")
  </script>
</head>

Learn Performance - Render Blocking JavaScript

blocking - inverted