How to make your web apps load in less than a second
Tags: quicklink, instantpage, preload, prefetch
Published: 2020-09-05 11:30:47


![Preloading/Prefetching by Adebola Adeniran](https://cdn-images-1.medium.com/max/1200/1*02ChEOW5wSAc2SjizDoNJA.png)

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

![Preloading effect on WhichWifi.work](https://cdn-images-1.medium.com/max/1200/1*yEbs_S6bnnNngHkG7DvPAQ.gif)

The GIF above shows the **preloading** effect instantly loading **[whichwifi](https://whichwifi.work)** - a review app i launched recently. If you click [this](https://whichwifi.work) 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](https://en.wikipedia.org/wiki/Link_prefetching). I'll explain the difference in a bit. Stick with me.

The gist is, when a link(s) shows up on a webpage, 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](https://nextjs.org/docs/api-reference/next/link) makes use of this tech extensively in their framework which makes for better responsiveness and faster page load times.

This [wikipedia](https://en.wikipedia.org/wiki/Link_prefetching) entry contains some of the pros and cons of prefetching.

![preloading WhichWifi.work from Google](https://cdn-images-1.medium.com/max/1200/1*XJEqftFaKKSIbjrvs8wCAg.gif)

[Addy Osmani](https://medium.com/@addyosmani), a software engineer at google, also has a very [insightful article](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf) 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](https://nextjs.org/) framework(my favorite React framework btw), [prefetching](https://nextjs.org/docs/api-reference/next/link) 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. Here's a [link](https://github.com/onedebos/which-wifi/blob/master/pages/_document.tsx) 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](https://github.com/GoogleChromeLabs/quicklink)

### Instant.page
[Instant.page](https://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](https://www.freecodecamp.org/news/server-side-rendering-your-react-app-in-three-simple-steps-7a82b95db82e/) 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.