<link rel=prefetch >
Let's discuss a rather simple example to understand prefetching: loading images. Loading images is one of the most common actions a web page performs. We decide which image we want to load using either an img tag in the HTML template or the background-image property in CSS.
Either way, the image does not get loaded until the element is parsed. Also, let's say that your image is very large and takes a lot of time to download, then you would have to rely on a bunch of fallbacks, such as providing the image dimension so that the page does not flicker or using the alt attribute in case the download fails.
One possible solution is to prefetch your resources that will be needed in the near future. That way, you can avoid downloading ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access