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

Adebola Adeniran
3 min readSep 5, 2020

--

preloading, prefetching by Adebola Adeniran

Background

The preload effect

I recently noticed that when I search for certain articles on google and click the search result, the page shows up instantly. I was curious as to how it worked and started to do some digging.

The GIF above shows the preloading effect instantly loading whichwifi — a review app i launched recently. If you click this link, it should open up the whichwifi page without “loading” it.

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.

The gist is, when a link(s) shows up on a web page, the browser immediately starts to fetch resources for the linked pages within that domain so that when a user clicks the link, they’re shown the page instantly.

Next.js makes use of this tech extensively in their framework which makes for better responsiveness and faster page load times.

This wikipedia link contains some of the pros and cons of prefetching.

WhichWifi.work loading instantly from Google search

Addy Osmani, a software engineer at google, also has a very insightful article on the tech behind preloading and prefetching and how google uses it in 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.

To preload critical resources before a user lands on your page, instant.page provides a script to help us handle that. Below is a link to my github repo showing how I achieved preloading by modifiying the _document file in next.js

quicklink

Google also has a package that allows you preload websites within your viewport. It’s called quicklink

Instant.page
Instant.page provides a script that you can include in your website to automatically prefetch your site when a user hovers over the link from anywhere.

NB — It doesn’t always work, but when it does, it’s great!

Do it yourself
Most sites use preloading to load the fonts on their website before a user gets to the site to avoid users seeing a strange font for a split second before seeing the actual font. You can achieve this by using

<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.

--

--

Adebola Adeniran

Chief of Staff at Moni (YC W22) | Developer Advocate Building on Tezos