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

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.

--

--

--

Growth at Moni(YC W22) | Adebola.dev

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Typed take-aways from the React Advanced Conference 2019

React Native or Flutter? Which way should I go?

Image result for react native vs flutter

Could not execute the lambda function.

Strongly Typed Event Emitters with Conditional Types

Maintainable JavaScript — Throwing Errors

Vue 3 Development with the PrimeVue Framework — Pick List, Timelines, and Tree Views

Open sourcing node-publisher

React Tips — Infinite Scroll, Submit, Focus, and Drag and Drop

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adebola Adeniran

Adebola Adeniran

Growth at Moni(YC W22) | Adebola.dev

More from Medium

Module 5: Executive Report — Color Ideas Assignment

Best investments in 2022 — DotBig Review

New Expected Features of Odoo 16- Apagen Solutions

Product Update 15 Mar. 2022: Developer Portfolio