Prefetch, Preload and Preconnect are mechanisms supported by modern web browsers that allow efficient loading of web resources.
<!-- allows preloading an image --> <link rel="preload" href="image.png"> <!-- allows preloading a font file --> <link rel="preload" href="https://example.com/fonts/font.woff" as="font" crossorigin> <!-- allows preloading css --> <link rel="preload" href="https://blog.keycdn.com/blog/css/mystyles.css" as="style">
The main benefit of the preload directive is that it allows important resources to be loaded earlier. For example if there is a stylesheet or image that is required for a page to display properly, then it can be preloaded by adding the relevant link tags in the head section of the document.
Prefetch is similar to preload but allows efficient loading of resources that are likely to be accessed by the user, such as a next or previous link. A drawback of prefetch is that it can cause certain page metrics such as ad statistics, visitor count etc to be miscalculated. For example Google Chrome has been known to miscalculate web analytics stats. There are three types of prefetch directives:
See the article Resource Hints - What is Preload, Prefetch, and Preconnect? for more information on using Prefetch, Preload and Preconnect.