SA
Skip to main content

Preload vs Prefetch

  1. Preload:

    • The preload directive is used to indicate that a resource should be loaded as early as possible in the page load process.
    • When you use preload, the browser prioritizes the loading of the specified resource, making it available sooner.
    • Preloading is particularly useful for critical resources that are needed immediately, such as CSS files or fonts.
    • By preloading CSS files, you ensure that the styles are available as soon as possible, preventing flash of unstyled content (FOUC) and improving the perceived performance.
    • Preloading fonts is beneficial because it allows the browser to start downloading the font files early, reducing the time until the text is rendered with the correct font.

  2. Prefetch:

    • The prefetch directive is used to indicate that a resource might be needed in the future, but not immediately.
    • When you use prefetch, the browser fetches the specified resource in the background, during idle time, without blocking the page load.
    • Prefetching is useful for resources that are likely to be needed on subsequent pages or later in the user's journey.
    • Prefetching CSS files can be helpful if you have different styles for different pages, and you want to preload them in advance.
    • However, prefetching is not recommended for fonts because fonts are typically needed immediately on the current page, and prefetching them might delay their loading.

For fonts, it is generally recommended to use the preload directive instead of prefetch. Preloading fonts ensures that they are loaded as early as possible, reducing the time until the text is rendered with the correct font. This improves the user experience by avoiding the display of fallback fonts or invisible text while the actual font is being loaded.

<link rel="preload" href="path/to/font.woff2" as="font" type="font/woff2" crossorigin />

By specifying rel="preload", as="font", and the appropriate type attribute, you instruct the browser to preload the font file with the correct context.

Remember to use the crossorigin attribute when preloading fonts from a different origin to ensure proper security measures are in place.

Links to This Note

2024-04-14

- Preload vs Prefetch