From the Author:
My name is Kevin Pauls, I am a human that does SEO and helps local businesses get found online. You will hear me talk a lot about layout trees, render trees, the DOM and user experience in relation to Google’s Core Web Vitals.
Why Rendering SEO Is So Important
This is the technical stuff that lets someone search for a business online, find that business and look at their website on whatever device they are using. This is fundamental to SEO.
A website is only effective if people see it. The whole reason of having one is so that people can learn more about something online. If you are a local service based business like an HVAC company, or a plumber for example, you want to have a websit so that people can learn about your company, the services you offer and ways to contact you to BUY said services.
These days people search for everything online and most often using a mobile device like a phone or tablet.
It is vital to have a presence online and a website is the basis for that. Now let’s get into why rendering SEO is so important for a small business.
Google wants to provide the best user experience possible for people searching so that people continue to use their product “Google Search”.
Since Google wants to provide the best user experience, it needs to serve your web page and its content as quickly as possible. It needs to Render the content in the browser so that the person searching on their device can view it.
How Does Google Render A Web Page
- HTML creates the elements on the page
- CSS styles the page and makes it look nice
We are going to cover this from a high level and then we can break it down into more bite sized chunks in other posts.
Step 1: Process HTML Markup and build the DOM tree
The browser traverses each visible node made up of HTML elements.
- Some elements(nodes) aren’t visible such as script tags and meta tags. Google skips over those types because they are not meant to be visible in the browser’s rendered output.
- Some elements(nodes) are hidden using CSS(Cascading Style Sheets). Examples of these might be a span element that has the “display: none” rule on it. Google also skips over these because it is told to not include it using the CSS rule “display: none”.
So to conclude step 1 the browser collects all the HTML elements on a page and builds something called the DOM or Document Object Model. Next we’ll have to collect all the styles for the web page.
Step 2: Process CSS Markup and Build CSSOM tree
Once the DOM is built, the CSS Object Model(CSSOM) needs to be processed and the style rules need to be matched up with each relevant HTML node.
The above image shows that the browser collects all the html, applies the styles and recalculates multiple times as additional stylesheets are included in teh DOM structure. Once the HTML elements have all been styled based on the assigned CSS rules, we need to go to Step 3 and output the render tree.
Step 3: Output HTML Elements, Content and Their Computed Styles
The output tree is not rendered in the browser yet, but the browser uses the render tree as it contains all the elements, content, and style info. Now is where the calculating happens for the “layout” stage.
Step 4: The Layout Tree
The “layout” stage(also known as “reflow”) is where the browser calculates the exact positions of the elements in the output tree according to the device that is being used. Every device has a different screen size, pixel ratio, etc. so it is important that your content has a great viewing experience regardless of the screen being used.
Once the “layout” stage has been calculated and the browser knows where everything is going to be, the browser can convert the render tree to pixels and show them on the screen.
Step 5: Painting or Rasterizing
Converting all of the elements and their styles into pixels and displaying them on a screen is called “painting” or “rastering”. This part is more intensive for the browser and takes a good chunk of time and computing power.
The image below shows how multiple tasks are carried out until the DOM and CSSOM have been created. You’ll notice that the darker yellow color shows additional scripts continuously being evaluated and compiled as loading continues. It is a gradual process and not quite as simple as I have laid out in this article.
The website code is important.
Why Website Code Is Important For SEO
Lots of people I talk to say “well I don’t think I need to rebuild my website because I see this other site showing up and they built it with bad code”.
This is true. We see this lots where a website is being displayed and it is not built well. But, Google is pushing more and more for a better user experience and more affordable browsing. Remember when I said that a larger DOM and more complicated CSSOM is more expensive? It takes more computing power for Google to process a site.
So if someone decides they want to rebuild their website and make the code clean and “more affordable” while providing a great user experience, who do you think is going to take the top spot? Google gets the best of both worlds then. This is a major driving force for Core Web Vitals. If Google can manipulate behaviors to create better websites that are better built and more affordable, they pay less on server rendering and are more profitable.
This is a win win for everyone. Google makes more money, your website shows up higher in the search results, and users have a better experience using the search engine.