2 Why use resource preloading?

Resource preloading can help you improve the performance of your website by reducing latency and blocking time of critical resources, as well as improving the user experience and perception of your website. Preloading a resource can initiate the request earlier in the page load process, before the browser parses the HTML, thus saving time for users with slow or unreliable connections. Additionally, preloading a resource can ensure that it is available in the browser cache when it is needed by the page, preventing the browser from blocking the rendering or execution of the page until it is downloaded. This is especially useful for resources that affect layout or functionality of the page. Moreover, preloading a resource can reduce the chances of users seeing a flash of unstyled content (FOUC), a flash of invisible text (FOIT), or a delayed interactivity of your page.

3 How to use resource preloading correctly?

Resource preloading can be a powerful tool for improving website performance, but it also comes with some caveats and best practices. It's important to use resource preloading for high-priority and critical resources only; preloading too many or unnecessary resources can have a negative impact on your performance. Additionally, caution should be taken when preloading cross-origin resources as it requires the use of the crossorigin attribute and the proper CORS configuration on the server. Furthermore, resource preloading should be used in combination with other optimization techniques, such as minifying, compressing, caching, and lazy-loading your resources. This will give you more control over the timing and priority of your resource requests.

5 How to implement resource preloading on your website?

Resource preloading is supported by most modern browsers, but not by all. To implement resource preloading on your website, you need to use a polyfill or a fallback mechanism for browsers that do not support it. One option is to use the preload-polyfill library, which detects the browser support for resource preloading and adds the necessary <link> tags dynamically. Another option is to use the noscript tag, which provides a fallback for browsers that do not execute JavaScript. For example, you can use the following code to preload a font file with a noscript fallback:

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
<noscript><link rel="stylesheet" href="/fonts/myfont.css"></noscript>        

The noscript tag contains a <link> tag that loads the font file as a stylesheet, which is a common way of loading fonts on the web. This way, you can ensure that the font file is loaded by browsers that do not support resource preloading or JavaScript.