DEV Community

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

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

Sai gowtham
Technical writer & Front end developer
Updated on ・2 min read

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.

vuejs

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

After I'm using the Preconnect and Preload.

Now the Performance is 78%.

vuejs

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

Amazon

Github

github

Netflix

netflix

If you have any doubts feel free to ask.

Checkout --> Best Programming Laptops

Discussion (3)

Collapse
michaelandreuzza profile image
michael-andreuzza

How good. Nice to find this. I implemented preconnect on my site and all the css broke...

...any tips?

Cheers

Collapse
sait profile image
Sai gowtham Author

I think you have removed CSS link tags.

Collapse
michaelandreuzza profile image
michael-andreuzza

Oh,they were there actually

Forem Open with the Forem app