Bug 180574 - Implement link rel=modulepreload
Summary: Implement link rel=modulepreload
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Enhancement
Assignee: Ryosuke Niwa
URL:
Keywords: InRadar
Depends on: 252639 252734
Blocks:
  Show dependency treegraph
 
Reported: 2017-12-08 00:16 PST by Yusuke Suzuki
Modified: 2023-02-23 12:25 PST (History)
15 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Yusuke Suzuki 2017-12-08 00:16:10 PST
https://github.com/whatwg/html/pull/2383
Comment 2 Radar WebKit Bug Importer 2022-02-08 21:54:47 PST
<rdar://problem/88670991>
Comment 3 BenjaminAster 2022-05-18 06:12:04 PDT
I think <link rel="modulepreload"> is currently one of the most important features to be implemented in WebKit, as pages load a lot slower without this.

Without modulepreload, the user agent must first download the primary JavaScript file before it can download its dependencies specified in an ES6 import. These imported JavaScript modules can import other modules as well, and so on. Because of this, the user agent has to make several network requests successively instead of making them all at once in parallel. This results in a noticeably slower page loading speed.

To better illustrate this, here is a screenshot of Chromium's waterfall of JavaScript files of some website of mine: https://user-images.githubusercontent.com/63414473/169042583-ef139e85-d6e3-41b3-afe0-76c65584fc49.png and here is the same website's JavaScript files download timeline in Firefox, which does not support modulepreload either: https://user-images.githubusercontent.com/63414473/169042316-39ff34cf-1121-4b93-922e-84ef15e57088.png. Notice how without modulepreload support, the user agent has to wait for the first file to be downloaded before it can download the other files imported by it. These files themselves import other files which then also import yet another set of files. Blink however can download all JavaScript files in parallel, which results in a ~4 times better loading speed.

Blink is currently the only browser engine that supports this, which is a shame because preloading JavaScript modules is an essential thing that modern browsers are supposed to support. This has been specified for over four years now in the official HTML specification, which is another reason to implement this. Also, there is no way to polyfill this feature with things like <link rel="preload">.
Comment 4 Noam Rosenthal 2022-06-07 08:30:09 PDT
Note that modulepreload should also be supported in link headers.
Comment 5 BenjaminAster 2022-06-07 08:40:50 PDT
(In reply to Noam Rosenthal from comment #4)
> Note that modulepreload should also be supported in link headers.

Indeed it should! But modulepreload is probably a lot less commonly used in link headers, so it isn't really of very high priority. 

Is the WebKit team interested in implementing this? As already mentioned, this would significantly improve page loading speeds in WebKit, which I guess should be very important to Apple if they want to increase Safari's market share. Because why would anyone want to use Safari if they know that sites load faster in Chrome because WebKit doesn't support an important web standard?
Comment 6 Ryosuke Niwa 2023-02-23 00:45:38 PST
Pull request: https://github.com/WebKit/WebKit/pull/10566
Comment 7 EWS 2023-02-23 12:25:04 PST
Committed 260761@main (41bb68d54e7a): <https://commits.webkit.org/260761@main>

Reviewed commits have been landed. Closing PR #10566 and removing active labels.