How to make your web apps load in less than a second

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 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 makes use of this tech extensively in their framework which makes for better responsiveness and faster page load times.

This wikipedia entry 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. Here's 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.