Understanding Preload: A Performance Optimization Technique for Web Resources
This article explains the Preload keyword, how it enables early loading and decoupled execution of web resources, compares it with speculative parsing, async, defer and HTTP/2 Server Push, and provides practical usage guidelines and browser compatibility information.
Today we introduce a performance‑optimization tool called Preload . The author, Huang Xiaolu, is a front‑end engineer at Qiwu Team and a member of the W3C Performance Working Group.
When we want to improve initial page load, we may delay loading some resources or we may want to load resources early but execute them later, depending on dependencies, conditions, and order.
Typical approaches either couple loading with execution (e.g., inserting <img> , <script> , <link> ) or use AJAX, which loads only when the moment is right but cannot be pre‑parsed, causing delays if many blocking scripts exist.
Preload solves this by allowing resources to be fetched early while keeping loading and execution separate.
What is Preload
preload is a keyword that explicitly tells the browser to fetch a resource ahead of time. It can be used in two ways:
Insert a <link rel="preload" href="some-resource-url" as="xx"> element into the <head> (or create it via JavaScript).
Add an HTTP header: Link: <some-resource-url>; rel=preload; as=xx .
When the browser sees such a declaration, it loads the resource with a higher priority and stores it in the HTTP cache; the resource is later used normally via a tag or script, retrieving it from the cache without blocking the page’s load event.
Key characteristics of Preload:
Early loading of resources.
Separation of loading and execution.
Does not delay the page’s load event (unless the preloaded resource itself blocks loading).
Preload vs. Speculative Parsing
Speculative parsing collects external resources while parsing HTML and downloads them in parallel, but it only works for resources discovered in the markup and cannot handle resources loaded asynchronously by scripts. It also lacks an onload event for fine‑grained control.
Preload vs. async
The async attribute causes a script to execute as soon as it is downloaded, blocking the window.onload event, and it only applies to script resources. Preload can achieve the same asynchronous loading for any resource type. Example for loading a CSS file:
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">Note: If the page contains synchronous blocking scripts, the style will be applied only after those scripts finish because Preload does not block the load event.
Preload vs. defer
The defer attribute also separates loading and execution and guarantees execution order for scripts, but like async it is limited to script resources. Preload works with many resource types and can also defer execution while preserving order.
Preload vs. Server Push
HTTP/2 Server Push preloads resources and separates loading from execution, saving a network round‑trip. It can be combined with Preload: when a server detects a Preload declaration, it can push the resource. To disable push, add the nopush attribute:
Link: </app/style.css>; rel=preload; as=style; nopushServer Push only works for same‑origin resources, whereas Preload supports cross‑origin resources.
When to Use Preload
Any scenario where you want to load a resource early but execute it later, or improve rendering performance, is a candidate for Preload. Typical use cases include:
In single‑page applications, preloading route bundles to speed up navigation.
Preloading font files to avoid Flash of Unstyled Text (FOUT) by ensuring fonts are available before CSS is applied.
Browser Compatibility
Preload is supported in the following browsers (as of the article’s writing):
Desktop: Chrome 50+, Safari 11.1+, Edge 17+ (HTML method only, not HTTP header).
Mobile: iOS Safari 11.4+, Android Chrome 67.
Browsers that do not support Preload simply ignore the declaration and fall back to normal loading, making Preload a progressive‑enhancement technique.
Acknowledgments
Thanks to He Wenli and Li Songfeng for valuable revisions, and to the community for feedback.
References
https://www.w3.org/TR/preload/
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content
https://www.jianshu.com/p/24ffa6d45087
https://yoavweiss.github.io/link_htmlspecial_16
https://www.w3cplus.com/javascript/building-the-dom-faster-speculative-parsing-async-defer-and-preload.html
360 Tech Engineering
Official tech channel of 360, building the most professional technology aggregation platform for the brand.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.