From the course: Developing for Web Performance

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Preloading vs. prefetch

Preloading vs. prefetch

- [Instructor] When we know the browser will need an asset, we can preload that asset into the browser cache before the browser needs it. You've already seen an example of how this is done when we've worked with web fonts. Here's that example one more time. What happens when the browser encounters this preload link element is this element now gets priority loading and is stored in the cache. This is important to note because it means you have to be careful about what you preload. Preloading is quite literally jumping the normal loading queue, so it should only be used for critical resources you know you'll need right away. For everything else, images, non-critical styles, non-critical JavaScript, et cetera, the browser will load them when they become relevant and we should not preload them. When preloading assets, like scripts or fonts or links or images, make sure you set the as attribute to describe what this…

Contents