Rendering SEO: Why Your Website Code Is So Important

From the Author:

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

All web pages consiste of HTML, CSS, and Javascript. That is it. There are many frameworks and languages used to create websites such as WordPress which is based on PHP and powers ~40% of websites on the internet, and there are other frameworks such as React or Vue which are Javascript frameworks. Regardless of what framework you use, it is always service HTML, CSS and Javascript to the browser.

1. HTML creates the elements on the page
2. CSS styles the page and makes it look nice
3. Javascript makes the page do things

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.

Rendering has a cost associated with it. The larger the DOM, the more work for the browser. The more complicated the styles, the more computing power is needed. On a simple web page with no Javascript, this is where the process would end and you would be viewing a page on your device.

But, most modern websites do things which requires javascript. Not only that, but most modern websites are made using Javascript components where they add chunks of HTML and CSS to a page. Why this is problematic is because Javascript is often the very last part of this process.

Step 6: Adding Javascript

Javascript is amazing and can allow us to make changes or modify almost anything on a page. We can change content, styles and best of all we can respond to a user’s input with it. When a person taps or swipes on a screen, Javascript makes things happen.

Unfortunately though, Javascript when not implemented properly can block or interrupt the DOM construction which we already spoke about above.

Javascript is often used to add additional HTML elements to the DOM and modify the CSSOM. This is why the location of the scripts is so important.

Up until now, the DOM would get built, the CSSOM would get built and they would be added together to create the “layout” stage. Now when Javascript is adding additional nodes(HTML elements) and styles(CSS rules), the browser pauses the DOM construction and waits till the Javascript finishes running. Then the DOM gets rebuilt with the new nodes and styles.

Since the Javascript is normally deferred or loaded last in the DOM, this process from Steps 1 to 6 get repeated multiple times depending on how many scripts will need to run. This is demonstrated in the image above. Every time the scripts are run, the layout of the page changes, and it takes more time for the page to actually show up on the device of the user.

There are ways to help minimize the impact of Javascript such as asynchronous loading and deferred loading, but at he end of the day, how your website is built matters and its not just how it looks.

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.