TTFB Optimization React Save
This POC intends to make the the time to first byte as short as possible by sending the HTML in chunks through node server and other optimisations to progressively load the page in browser.
Have you ever wondered why the Google search pages or Amazon site loads really fast? Well stay with me while I take you through the concept, implemented by the big giants, that drastically reduces Time to first byte, improves time to interactivity and page speed index. But firstly, let us go through some concepts that leads to the idea.
Analyzing Critical Rendering Path (CRP)
First of all, let us define the vocabulary that we would be using frequently :->
- Critical Resource: Resource that could block initial rendering of the page.
- Time To First Byte(TTFB): Measures the duration from the user or client making an HTTP request to the first byte of the page being received by the client's browser.
Optimizing web performance is all about understanding what happens in the intermediate steps between receiving the HTML, CSS, and JavaScript bytes and the required processing to turn them into rendered pixels - that's the critical rendering path(CRP).
Before the pages are rendered the browser has to go through all the following steps:->
When the browser first hits the page it downloads the HTML. It then start building up the DOM tree. Each tag in HTML represents node inside the DOM tree which has all the information regarding it. Let us take an example to understand this fully :->
Suppose Browser receives the following HTML form server.
<html>
<head>
<meta name="viewport" content="width=device-width,initial- scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
Open Source Agenda Badge
