[RFC] Improve loading sequence #24938
janicklas-ralph
announced in
RFC
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Overview
NextJS currently loads all first party javascript (self bundled JS) with the preload + async technique for priority boosting.
Preloads are added in the (both CSS and JS) and <script async> is added to the end of
We propose an alternate approach to load first party script with defer, where <script defer> will be added to the , with the objective of streamlining the overall loading sequence, modeling web-performance best practices, and moving away from preload as a crutch for signal boosting.
The expected impact of this change will be:
Note that this change also pairs very well with the ScriptLoader component, for improving loading performance with third-parties.
We expect some apps may experience slower time-to-interactive (TTI), particularly apps with third parties, especially if they don’t use the ScriptLoader.
LCP may be slower for apps where LCP image depends on JS execution.
Motivation
This doc goes into the details of the issues we face with preloading and also mentions approaches we want to take to mitigate them.
The main points to highlight are
Preloaded first party script load at highest priority. At the same priority as critical resources such as CSS, fonts.
Preload + async scripts are loaded early and interrupt parser delaying FCP and LCP
LCP gets delayed in most cases since First party scripts are prioritized above LCP item
To fix priority issues, users have to manually curate the loading priority of each item added. Eg. to increase the priority of LCP item, users will have to add a preload for the LCP element above the script preloads
Even after adding preloads to critical resources there is no guarantee that they will be prioritized early since they all load with highest priority. In most cases we’ve still seen First party script load earlier than preloaded LCP images
This eventually results in a list of preloads each manually curated to achieve the best loading sequence.
This loading sequence is usually what the browser gives by default if we hadn’t preloaded all resources in the first place.
Finally, the addition of ScriptLoader gives us a better lever for managing third-parties, and reduces the need to safeguard first party JS.
Approach
Enable this loading strategy by default by adding
<script defer>
in<head>
to load scriptsProvide a new experimental flag
experimental.disableOptimizedLoading
that can be used to opt-out and use the legacy loading strategyRelevant PR - #24939
Beta Was this translation helpful? Give feedback.
All reactions