What is progressive rendering ?

Progressive rendering is a concept that every web developer should know because it helps a lot in the fast loading of a website. Most of the developers are using progressive rendering but they are unaware that the thing that they are doing to load the website quickly is actually progressive rendering.

What is Progressive Rendering?

Before Understanding Progressive rendering, We should understand what is rendering of the webpage and what progressive is.

Rendering means converting code into an interactive webpage that our users can see and utilize its functionality. Now, being Progressive means doing things such that the highest priority thing will be done first, after that less priority thing will be done and in this manner, work will be completed.

So, Progressive Rendering means rendering the webpage in such a manner that high priority component will be rendered first and then low priority component will be rendered. Before going deep into it, we should understand how we can give priority to different components of our webpage.

 So the priory of our component should depend upon the viewport. This means those components that come in the viewport after loading the website for the first time should get high priority and those components that are below that viewport should get low priority.

How Progressive Rendering is different from Server Side Rendering(SSR) and Client Side Rendering(CSR)?

So before knowing that difference, one should first know what client-side rendering and server-side rendering are:

Client-Side Rendering: In Client-Side Rendering the content is rendered on the client side. Here when a user visits any webpage then request to get an HTML and CSS file is made to the server and then the server sends an HTML and CSS file to the client side. After processing that code, a request to get the JS file is made and till the JS file is not loaded, HTML and CSS will not be shown on the browser. So the user will see a blank page until the JS file will not be loaded.

Server-Side Rendering: In Server-Side Rendering, the content is first rendered on the server side and then send to the client side. Here when a user visits then request to get a webpage is made to the server then the server first loads the HTML and CSS file on itself and then processes it and then sends the processed web page to the client side. After getting that webpage, the User can see the webpage and the browser will be waiting for the JS file to be loaded. Till the JS file is not loaded, the User can only see the webpage but can’t interact with it. Interaction with the web page is only possible with the help of JS(Javascript).

Now here the user has to wait till the Webpage containing HTML and CSS is not shown on the screen. But, It is faster than Client-Side Rendering because in Client-Side Rendering, a web page is only shown when javascript will be loaded but this is not the case in Server-Side Rendering.

Now it’s time to see how Progressive rendering is different from both of these.

Progressive Rendering: In progressive Rendering, the web page is divided into different parts on the basis of priority. So different parts will be rendered sequentially according to Server-Side Rendering and sent to the client side. This means that here first whole page will not be rendered on the server instead, high priority part of the page is rendered and sent to the client side, then low priority part of the page is rendered and sent to the client side.

Benefits of Progressive Rendering: These are some of the major benefits of Progressive Rendering-

1. It improves the load time of the website and that eventually leads to a better User Experience.
2. It optimizes the critical rendering path. Critical rendering path is referred to those steps that are done between receiving HTML, CSS, and Javascript code and converting them into a visual webpage.
3. It helps us to overcome the drawback of server-side rendering and client-side rendering.

Different ways to Achieve Progressive Rendering-

1. Lazy Loading of Image: Lazy loading of an image means loading an image when it is about to come in the viewport instead of loading all the images initially at once. This will lead to the progressive rendering of the web page because here the high-priority image is the image that is initially in the viewport and is loaded first and the low-priority image is that which is about to come in the viewport and will be loaded.

2. Not processing all the CSS initially: Most of the developers have a habit of adding all CSS in the head section and because of that whole CSS will be processed first before processing of HTML. But to achieve progressive rendering we should only add that much CSS in the head section that is necessary for those HTML that will be in the viewport at the start. After that, Add the remaining CSS in the body before the HTML tags to which it will be applied.