Menu
My scenario is:
Currently on some pages JS "eats" quite a lot of resources therefor triggering prefetch in some cases during page load is not the best answer - as it will cause a small lag when user interacts with JS created events and elements.
My questions are:
<link rel="prefetch" href="image.png"> or CSS file to be added to <head> so it can prefetch data from another page after current page is fully loaded?<head> as a stylesheet file so it can then render.. or is there another way?
430
The rel="preload" attribute value is used to preload assets. It can be applied to several file formats, including CSS, JS, fonts, images, and more. Depending on the type of file you would like to preload, the corresponding as attribute may also need to be included along with rel="preload" .
Preload is an early fetch instruction to the browser to request a resource needed for a page (key scripts, Web Fonts, hero images). Prefetch serves a slightly different use case — a future navigation by the user (e.g between views or pages) where fetched resources and requests need to persist across navigations.
The HTML preload Attribute is used to specify the way the author thinks the media should be loaded when the page loads. The preload attribute allows the author to portray to the browser about the way the user experience of a website should be implemented.
So, now how to you preload your CSS and other external resources? The answer is simpler than you think. Currently, you load CSS and JS through the link tag. So, to preload those resources, all you need is to change the rel attribute to preload and add the as=”style” attribute (or as=”script” for JavaScript).
You might use Cache Storage to prefetch (precache) assets. I work on an open-source project which uses this approach. Although, to serve precached assets you need a service worker. The logic of finding assets in my project looks like this.
The demo of this project is here. Also, I wrote an article which explains technical details of the project.
Assets get prefetched once the lib is loaded, so I don't wait for the entire page load. Maybe I should use requestIdleCallback to wait until the browser is idle.
Hopefully, it gives you some inspiration.
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
