How to use Preload and Prefetch to Improve Load Performance

Optimize Website Load Performance Using Preload and Prefetch

The preload value of the <link> element’s rel attribute lets you declare fetch requests in the HTML’s <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers’ main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page’s render, improving performance.

Here however, we will use a rel value of preload, which turns <link> into a preloader for any resource we want. You will also need to specify:

The path to the resource in the href attribute.
The type of resource in the as attribute.

<head>
  <meta charset="utf-8">
  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">

  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>

  <script src="main.js" defer></script>
</body>

Prefetch

Prefetching is when content is downloaded in the background, this is based on the assumption that the content will likely be requested, enabling the content to load instantly if and when the user requests it. The content is downloaded and cached for anticipated future use without the user making an explicit request for it.

<link rel="prefetch" href="chunk.31132ae6680e598f8879.js">

Subscribe: https://www.youtube.com/channel/UCKu_xF5kVw23457kt3JuMNQ

#web-development #performance