Widely availableUseful when you know a module will be needed soon and want to reduce the gap before execution.
Performance Widely available

<link rel="modulepreload">

rel="modulepreload" hints that a JavaScript module graph will be needed soon and should be fetched early. It helps reduce startup delay for module-based applications.

PerformanceModulesLoading

Overview

rel="modulepreload" hints that a JavaScript module graph will be needed soon and should be fetched early. It helps reduce startup delay for module-based applications.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
html.elements.link.rel.modulepreload
66
79
115
17
66
17
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML 
<link rel="modulepreload" href="/js/app.js">
<link rel="modulepreload" href="/js/utils.js">
<script type="module" src="/js/app.js"></script>

Live demo

Module preload flow

Show how modulepreload can fetch a module graph before execution time.

PreviewFullscreen

When to use modulepreload

Summarize the cases where modulepreload reduces startup delay.

PreviewFullscreen

Preload comparison

Compare stylesheet preload, classic preload, and modulepreload at a glance.

PreviewFullscreen

Use cases

  • Critical app startup

    Preload entry modules that are certain to be needed during initial rendering.

  • Near-future navigation

    Warm module fetches for the next route or likely interaction path.

Cautions

  • Preloading too many modules can compete with other critical resources and reduce the benefit.
  • It works best when the preload choices are evidence-based rather than speculative everywhere.

Accessibility

  • Faster startup can improve perceived responsiveness, which benefits users who depend on a stable, prompt interface.

Related links

Powered by web-features