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:

Comments

Post a Comment

Popular posts from this blog

Languages for AI

Image
As we know, AI is tremendously growing in the whole world because we want automation or smartness in everywhere like in machines, phones, homes, office, any electronic devices, and etc. Now, there are a huge amount of newcomers of computer science students who are moving to AI, ML(machine learning), DL(deep learning), NN(neural network), Data Science, etc to grabs the opportunity of future technology. But some beginners have some confusion about getting into AI, ML, etc. So in this article, we will roll around to this topic. First of all, The primary step is that which depends on your projects which you have to build using machine learning, artificially intelligence, etc libraries. The implementation of AI, ML, Data Science is all about libraries, which is available in programming languages. Programming languages. 1. Python. 2. Java. 3. JS. 4. C++ 5. R. Here, above the list of programming languages that are majorly useful to build AI, ML, DS, etc. So, the first one...
Read more

How Network Communications Occurs? | OSI Model.

Image
Today, In this blog we are talking about How Network Communication occurs with the OSI Model. First, the OSI Model Stands for  Open Sytems Interconnection. The OSI model is a conceptual model of how network communication occurs. For network communication to happen, the layers must work together to transmit a message from one device to another. There are 7 layers in the OSI model. We'll start at the top-most layer, layer 7, and work our way down to layer 1.     Layer 7 - Application     Layer 6 - Presentation     Layer 5 - Session     Layer 4 - Transport     Layer 3 - Network     Layer 2 - Data Link     Layer 1 - Physical The OSI model is a breakdown of the various aspects of network communication. It is concerned with the ability of different systems to be connected with each other. It's a conceptual breakdown of all the parts that are involved and groups them into logical sections. Let's c...
Read more

Window vs Linux for Android Development.

Image
As we know that, Today the Mobile app developer is growing day-by-day and there are some newbies(beginners) also want to become a mobile app developer or want to build mobile apps. But some beginners(72% out of 100%) have big trouble to get started with mobile app development in Android. Let us see how, First beginners already know what technology or languages he/she has to adopt such as native langs JAVA, kotlin, c++ or libraries and framework React Native, Flutter, Ionic, Xamarin, native scripts, etc. If you want to know more about langs and libraries for mobile app development in a smart way then check it out my blog. If beginners successfully learn the foundation of mobile app development then they have to work on android studio to developed apps. In that`s situation some beginners have trouble to build an android app in their machine. am also faced that trouble in my past. Now shared my exp about android app development in window and Linux(Ubuntu 16.04+). First of a...
Read more