What is rendering?
How browsers render web pages
Web browsers render web pages in the following sequence:
Constructs DOM and CSSOM from raw code
- The browser engine converts this data (bytes) into characters (the HTML code).
- It parses the characters into tokens, which are further parsed into nodes.
- Simultaneously, the browser converts the CSS code to a CSS Object Model (CSSOM) through a similar process.
Image of HTML rendering from developers.google.com
Uses Render Tree to create the end-user web page
- The browser engine combines the DOM and CSSOM to create a tree-like structure called a Render Tree. The Render Tree contains the style and content information browsers need to populate a webpage for viewers to see, calculate the layout for each visible element of a webpage and paint them on the screen for the end user's view.
- The layout operation is the next step. Using the Render Tree, the browser engine calculates the position of each visible element of a web page.
- Finally, the browser engine adds, or paints, the elements on the screen for the end-users view. The web page has now been rendered.
Page render speed
Page render speed refers to the time it takes to generate a page. Page render speed is measured from when the browser request is sent (when a user clicks on a link) to when the page becomes fully functional to the user. Page render speed and page load speed (the time it takes for users to see a webpage) are used interchangeably because both processes generally occur within split seconds of one another.
Image of bounce rate by site load time from thinkwithgoogle.com
Due to page render speed’s influence on the user experience, Google made page speed an official ranking factor in 2010. Keeping rendering speed and overall page speed as fast as possible is, therefore, an important task in SEO.
Importance of Rendering for SEO
Webpage rendering affects how a page is indexed by bots and experienced by users. Understanding the impact of rendering on search engine rankings and SEO results should be a key consideration for any web development team.
These facts considered, web developers must pay careful attention to the requirements for bots and humans to maximize SEO performance.
- Anatomy of a Compiler Retrieved 11 December 2020.
- Node techopedia. Retrieved 27 May 2022.
- Implement Dynamic Rendering Google Search Central. Retrieved 8 December 2020.
- Why marketers should care about mobile page speed Think with Google. Retrieved 3 December 2020.
- Using site speed in web search ranking Google Search Central. Retrieved 11 December 2020.