How to make your websites load in less than a second with react

preloading, prefetching by Adebola Adeniran

Background

The preload effect

The tech

The technique used in showing pages immediately a user clicks on the link is not entirely new. It’s a technique called prefetching/preloading. I’ll explain the difference in a bit. Stick with me.

WhichWifi.work loading instantly from Google search

Preloading vs Prefetching

There’s a slight difference between preloading and prefetching. While preloading allows you load resources ahead of time, prefetching is used for subsequent requests within your site.

How to get started

Next.js
If you’re building on the Next.js framework(my favorite React framework btw), prefetching links comes bundled right out of the box. Once a user lands on your site, Next will automatically prefetch all of the pages that are linked on that page.

<link rel="preload" as="font" type="font" href=[link_to_font] />

Possible issues

You may run into issues with preloading if your application isn’t server-side rendered but generally I’ve found that preloading works most times even if your site is statically rendered.

Conclusion

In conclusion, as developers, we are always looking for ways to give users a better experience. Preloading/prefetching resources speeds up time to first contentful paint, time to interactive and gives your users a better experience on your site resulting in higher conversions.

Full-stack Engineer. Rails/Node.js/React. I love plantain chips! Reach me at Adebola.dev.