Created
October 27, 2020 17:28
-
-
Save abha57/641ce9e3d57b22053fded26b3813f615 to your computer and use it in GitHub Desktop.
preload, prefetch, preconnect
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Preload | |
| Generally it is best to preload your most important resources such as images, CSS, JavaScript, and font files. | |
| preload is different from prefetch in that it focuses on fetching a resource for the current navigation. | |
| prefetch focuses on fetching a resource for the next navigation. It is also important to note that preload does not block the window's onload event. | |
| Allows the browser to set resource priority therefore allowing web developers to optimize the delivery of certain resources. | |
| The browser can determine if the request is compliant with the content security policy by referencing what is defined in the as attribute. | |
| An example of preloading fonts. If you are preloading links with CORS enabled resources you must also include the crossorigin attribute. | |
| <link rel="preload" href="https://example.com/fonts/font.woff" as="font" crossorigin>. | |
| Prefetch | |
| prefetch is a low priority resource hint that allows the browser to fetch resources in the background (idle time) that might be | |
| needed later, and store them in the browser's cache. | |
| e.g - HTML: <link rel="prefetch" href="/uploads/images/pic.png"> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment