What is prefetching?
Loading web pages could be made faster by fetching the next page (or set of resources for the next page) a user is ...
For further actions, you may consider blocking this person and/or reporting abuse
Great post Addy,
I starred quicklink the other day and noticed you had a hand in it :D Cool that you're thinking of adding support for preload as well!
I remember that dev.to is using a modified version of InstantClick to make the website feel faster, yours seems a more efficient (thanks to the IntersectionObserver) and modern implementation. Am I correct? Aside from the fact that InstantClick seems not to be maintained anymore.
Hi Interesting Plugin , Thanks :) , Here is another plugin, the author in this and this post compares
QuickLinkandInstantPageand says thatQuickLinkdoesn't have options like@ben What both of you think which is better ?
Great overview. One thing worth adding now that it's 2024+: the Speculation Rules API (Chrome/Edge 109+) supersedes the old
<link rel=prefetch>approach for navigation. With Speculation Rules you get prerender (full document + JS execution) not just prefetch, and you can target by URL pattern or eagerness level (immediate / eager / moderate / conservative). For navigations, prerender eliminates almost all perceived latency.The tricky part for e-commerce sites specifically is knowing what to exclude. You generally want to blacklist /cart, /checkout, /account, and /orders — otherwise you risk side effects from prerender executing add-to-cart or session logic prematurely. A safe e-commerce pattern is: try Speculation Rules first (with a URL exclusion list), fall back to hover-intent
<link rel=prefetch>injection for browsers that don't support it, and use IntersectionObserver as a third tier for viewport-visible links on mobile where hover isn't available.I built a Shopify app (Prefetch on the Shopify App Store) that does exactly this 3-tier fallback, and the exclusion list turned out to be the most important detail to get right — prefetching a session-mutating checkout URL in the background caused test orders on a couple of stores before we added the guards.
Great overview! I wonder if this is something we (dev.to) would use. Any thoughts @ben ?
Yeah, I'm super into this kind of stuff. We have some workarounds for performance which make it not quite as obvious when and where we'd make use, but I'm super down to pick the right places to start working with this.
I played with prefetch a while back and then kind of let my efforts drop off. I'm super in favor of finding good spots for our use.
Awesome! Love to hear if you end up experimenting with the ideas here more. In case dev.to tries
quicklink, we just released a new version that gives you a lot more control over what links/URLs to ignore (RegExp, Array or Function) and what origins you'd like to enable prefetching for too: github.com/GoogleChromeLabs/quickl...Been trying out Quicklink. Too little data to share some insights but thanks for that. 👍
That's super cool. Thanks for sharing!
ps: guessjs.com/ doesn't seem to be working
Thanks! I've updated the link :)
Thankful for all the work you do Addy!