Preload critical resources
The runtime engine plays a crucial role in the initial display of a page.
The browser loads the runtime engine only after downloading and parsing the stylesheet.
It may experience defers in downloading and initializing until the first contentful paint if the runtime engine hasn't been preloaded.
Preload critical engine
<link rel="preload" …> to preload the runtime engine.
<!DOCTYPE html><html lang="en" style="display: none"><head><link rel="preload" as="script" href="https://cdn.master.co/css@beta"><link rel="preload" as="style" href="https://cdn.master.co/normal.css@beta"><link rel="stylesheet" href="https://cdn.master.co/normal.css@beta"><script src="https://cdn.master.co/css@beta"></script></head></html>
Now the runtime engine is preloaded, so the download happens in parallel with the stylesheet:
You are telling the browser that you would like to fetch it sooner than the browser would otherwise discover it.
Preloading critical assets can improve the following metrics:
- First Meaningful Paint (FMP): By preloading critical scripts, the browser can start parsing and rendering the script earlier, leading to faster FMP. This allows users to see meaningful content more rapidly, improving the visual presentation of the page.
- Time to Interactive (TTI): Preloading critical scripts reduces waiting time for users, resulting in a faster Time to Interactive. When the critical script has been preloaded and is ready, users can interact with the webpage more quickly, providing a better user experience.
Preloading critical scripts enhances the download and execution speed of the scripts, thereby improving metrics such as First Contentful Paint, First Meaningful Paint, and Time to Interactive.