DEV Community

Cover image for How to improve web performance By using(Preload, Preconnect, Prefetch)
Sai gowtham
Sai gowtham

Posted on • Updated on

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.







If you have any doubts feel free to ask.

Checkout --> Best Programming Laptops

Top comments (3)

sait profile image
Sai gowtham

I think you have removed CSS link tags.