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

Preconnect: It resolves the DNS and TCP handshaking.

DNS-Preconnect: It only resolves the DNS.

Prefetch:It helps to fetch the resource and places it in the cache whenever
the resources needs 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 example you can check it on your own machine.

Now lets see which top sites is using these above Resource hints.

Amazon

Github

Netflix

If you have any doubts feel free to ask.

My other Intersting posts about performance

How Browser Works

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.