- [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 asset is.
If you don't do this, you get a performance hit
just by how the browser works.
There's also prefetch, which is slightly different.
Prefetch is used anytime you want the browser
to load a resource which you believe
will be used in the future.
For example, the next page in a sequence,
like a shopping cart,
or if you have some JavaScript
you know someone will eventually need,
but it's not going to be triggered
until later in the process.
While preload has priority, prefetch has low priority
because it assumes this asset will be used
sometime in the future.
In this example, I'm prefetching an image.
You can also use prefetch to prefetch an actual page
in your site or something else if you want to.
Be careful about what you prefetch
because here you're actively making
the browser download content it does not need yet
and will not use immediately.
Prefetch should only be used for assets
which will most likely be used by the visitor in the future,
and when in doubt, just don't do any of this at all
and leave the browser to do its job
the way it's supposed to be done.