How to improve web performance By using(Preload, Preconnect, Prefetch)

Today I'm showing the simple techniques to make your site loads fast.

First, we need to know what is Preload, Preconnect, and Prefetch.

Preload: When we use preload in link tag it makes early fetch request to get the resource. Mostly used to fetch high priority resource that is used in the current route.

Preconnect: It resolves the DNS and TCP handshaking.

DNS-Preconnect: It only resolves the DNS.

Prefetch:It helps to fetch the resources and place it in the cache.
whenever the resources might need it will take it from the cache instead of making another request.

I think you can get a doubt what is a difference between preload and prefetch. preload is used for the high priority resources and prefetch is used for the low priority resources.

Now let's see a live example of Vuejs website.

By default vuejs website not using any of these above.

Let's check the web performance of vue site using chrome audits.

Have you seen 43% is the performance on my machine?

After I'm using the Preconnect and Preload.

Now the Performance is 78%.

Here is the exampleyou can check it on your own machine.

Now let's see which top sites are using these above Resource hints.

Amazon

Github

Netflix

If you have any doubts feel free to ask.

Checkout --> Best Programming Laptops