Learn Performance - Render Blocking JavaScript

module

Modern browsers also support type="module" which allows you to serve ES6 modules in the browser. Modules are deferred by default and behave similarly to defer. This makes them non render-blocking.

This demo imports a single JavaScript file using <script src="/module.js" type="module"></script>.

WebPageTest waterfall chart showing four resources. The Start Render mark appears at 2.2s.

This waterfall chart resembles the one for the defer demo, where the script begins downloading immediately but is only executed after the DOM is ready.

View Source Code
<head>
  <link rel="stylesheet" href="/style.css">
  <script src="/module.js" type="module"></script>
</head>