Sep 5, 2020
How to make your websites load in less than a second with react
Background
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.
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
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.
