Resource Prioritization.

Sometimes web app is performing slowly to fetch bundles of files from the server. this is one kind of reason for the poor performance of web app.

Here we have some great interesting technology to get fastest your web app. which is "RESOURCE PRIORITIZATION"

So lets, a discuss little bit about resource prioritization. In that, we have to use "Preload, Prefetch, Preconnect".

The browser provides different relative priority to link, files, font, images, etc. So we have to customize that resources according to the priority to load web app faster.

Preload:

<link rel="preload"> inform that a browser that whenever the web app is load then they load files as soon as possible in preload condition.

<link rel="preload" as="script" href="importantScript.js">
<link rel="preload" as="style" href="criticalStyle.css">

This is above the demonstration that how we can use that resources with preload. So whenever the browser is fetching the resources from the server then they fetch these above preload files as soon as possible.

Preconnect:

<link rel="Preconnect"> is used when you intend to connect to other resources and you did like to to that process as soon as possible.

<link rel="preconnect" href="https://abc.com">

This above we requesting an "abc.com" with the highest priority compared to rest of links

Bear in mind that while <link rel="preconnect"> is pretty cheap, it can still take up valuable CPU time, particularly on secure connections. This is especially bad if the connection isn’t used within 10 seconds, as the browser closes it, wasting all of that early connection work.

Prefetch:

< link="prefetch"> is similar to preload, preconnect but its have a little difference that they usually use by a browser for low priority. and they not required to used it initially but rather used at a later point.

<link rel="prefetch" href="nextPage.html">

This is above they have a low priority at initially rendering process but after a little bit of time, they fetch that files as soon as possible.

Prefetch is load bit little after rest of high priority resources.

Bear in mind that prefetch doesn’t work recursively, though. In the example above you’d only be retrieving the HTML; any resources that abc.html needs would not be downloaded ahead of time unless you explicitly prefetch them as well.

These are a prioritization strategy which we use and it's very necessary when we want to increase the performance of any kind of web app. To learn and practice it!

RESOURCES:

• Learn More.
• Watched Video.