blocking - inline

Similarly to <script> tags found in the <head>, inline scripts are also render-blocking. In this case, the file doesn't need to be downloaded, but it still needs to be parsed and executed.

This demo inlines a <script> element in the <head>. As soon as the script is discovered by the HTML parser—almost immediately—the page stops rendering until the script is parsed and executed.

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

Observe how the Start Render mark—green vertical line—does not appear until the JavaScript is parsed and executed.

View Source Code

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

Learn Performance - Render Blocking JavaScript

blocking - inline