How to make your websites load in less than a second

How to make your websites load in less than a second

Background

Image for post

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

Image for post

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

How to get started

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

Conclusion

Adebola Adeniran

READ  Laptop Configuration Guide: What Specs Do You Need?