preload#
<link rel="preload"> is used to preload resources that are needed for the current page, and it is loaded before the browser parses the HTML document.
<link rel="preload" href="https://example.com/image.png" as="image" />
prefetch#
<link rel="prefetch"> is used to prefetch resources that will be needed for the future pages, and it is loaded after the browser parses the HTML document.
<link rel="prefetch" href="https://example.com/image.png" as="image" />
preload vs prefetch#
- preload is used to load resources that are needed for the current page, and it is loaded before the browser parses the HTML document.
- prefetch is used to load resources that will be needed for future pages, and it is loaded after the browser parses the HTML document.
- preload priority is higher than prefetch