Unscrewing Critical Rendering Path
Streamlining Web Performance Through Optimized Rendering Path
Critical Rendering path is a series of steps that browser undergoes in order to show the HTML content in the browser screen.
Let’s understand CRP with an analogy of drawing a painting.
Alright, let’s imagine you want to draw a beautiful picture, and you have lots of colorful crayons to use. The critical rendering path is like the way you decide to draw your picture step by step, making sure it looks great when you’re done!
1. Draw the Outline First: ( Parsing/DOM Construction)
Imagine you’re drawing a house. First, you draw the outline of the house using a black crayon. This is like the critical rendering path’s first step — it outlines the main structure.
2. Fill in the Colors (CSSOM/Render Tree)
Now, you take your colorful crayons and start filling in the different parts of the house. You add a blue color for the sky, green for the grass, and so on. This is similar to what happens in the critical rendering path when your computer or phone decides how to color and fill in the different parts of a webpage.
3. Add Details ( Layouting)
Next, you can add details to make your picture even more interesting. Maybe you draw a red door, yellow windows, and a smiling sun. This step is like the browser adding extra details to the webpage, like images, buttons, and special styles.
4. Review and Show Your Picture (Paint)
Finally, you step back and look at your completed picture. If everything looks great, you can show it to others! In the critical rendering path, the browser makes sure everything is in the right place and looks good before showing the webpage on your computer or phone.
In simple terms, the critical rendering path is the careful process of drawing and coloring a picture step by step, making sure it looks awesome when you’re finished. It’s like when you draw your best picture and want to show it off to everyone!
A web page request starts with HTML, which the browser parses to build the DOM tree. It then fetches external resources, constructs the CSS object model, creates the render tree, and finally renders the page on the screen.
Here are the series of steps involved in CRP:
Document Object Model (DOM)
1. Building Blocks:The browser turns the HTML response into tokens, then nodes, and finally into the DOM Tree, which is like a structure made of building blocks.
2. Nodes Defined: Each building block (node) contains all the details about an HTML element, and these nodes are connected to create the DOM Tree.
3. Hierarchy: If one set of building blocks is inside another set, we get a hierarchy, like having a room inside a house.
CSS Object Model (CSSOM)
4. Styling Instructions: While the DOM is like the structure, the CSSOM contains all the styling instructions to make the structure look good.
5. Render Blocking: CSS can block the page from showing until it’s fully processed because styles can be overwritten, and the browser needs all the information to decide how to display everything.
6. Specificity Matters:Some rules in CSS are more specific, and the browser has to do more work to apply them. However, the impact is usually minimal.
Render Tree
7. Content and Styles Combined- The render tree combines the content from the DOM and the styles from the CSSOM.
8. Visible Content Only — It captures only the visible content, excluding things like the head section or elements set to display: none.
Layout
9. Positioning Elements: Layout decides where and how elements are positioned on the page, determining their width and height.
10. Viewport Impact: The width of elements can depend on the viewport, which is the visible area on your screen.
11. Performance Impact: More elements mean longer layout times, which can impact performance, especially during animations.
Paint
12. Pixels on Screen:Once the render tree and layout are ready, the browser paints the pixels on the screen.
13. Optimized Repainting: After the initial load, only the areas that change are repainted for efficiency.
14. Consideration for Animations: While painting is fast, during animations, it’s essential to consider both layout and repaint times for smoother performance.
Optimization for CRP
1. Resource Management:
— Minimize critical resources by deferring non-critical ones, marking as async, or eliminating unnecessary elements.
2. Request Optimization:
— Optimize the number and size of requests, ensuring efficiency in fetching necessary files.
3. Loading Priority
— Prioritize critical assets’ downloading to shorten the critical path length and enhance overall performance.
