<zhead>

Link

modulepreload

Learn how to use the modulepreload rel link tag to improve your site.

The modulepreload link relation is used to instruct the browser to preload a JavaScript module before it is needed. This can improve load times by loading dependencies in parallel to parsing and reduces delays in executing modules.

Code Examples

<link rel="modulepreload" href="/scripts/main.mjs">
Preloads a critical JavaScript module that is required for initializing the webpage.
<link rel="modulepreload" href="http://example.com/scripts/main.mjs">
Uses an insecure HTTP URL for preloading a module, which poses security risks. Always use HTTPS.

Recommendations

  • 01
    Prioritize Critical Modules
    Use modulepreload primarily for modules that are critical to the initial rendering or functionality of your page. Overuse can lead to excessive bandwidth use.
  • 02
    Cross-origin Fetching
    When preloading modules from cross-origin URLs, include the crossorigin attribute to avoid CORS issues.

Related Documentation