Google’s Martin Splitt Explains Rendering and Its Impact on SEO

What's rendering? It is the process through which Googlebot gets your pages, runs your code, and evaluates your content to fully comprehend your site's layout or structure.

All of the data collected by Google throughout the rendering process is then utilized to rate the quality and value of your site's content in comparison to other sites and what people are searching for on Google.

Rendering is one of the most underestimated concepts in the SEO field, but it is essential to consider these days.

According to Martin, Rendering is crucial in SEO. Only all of the elements on a page would be collected via crawling. Because of these limitations, crawling big sites by search engine bots can be challenging.

According to a Botify study, this problem has caused Google to miss roughly 51% of all pages on business websites. Botify investigated 6.2 billion Googlebot queries across 413 million websites. White label SEO agencies are also rendering SEO services for another organization under their brand name. When other marketing companies lack expertise or in-house resources or services, this allows them to deliver complete digital marketing services to their clients.

Martin Splitt Explaining Rendering

Martin reacted by making a comparison between producing a web page and cooking a dish from a recipe. He takes the example of HTML as a recipe and explains rendering. 

Martin Splitt described rendering in his words:

If you think about HTML as a recipe, and you have all the ingredients in there:

You have a bunch of text.

You have a bunch of images.

You have a bunch of stuff.

But you don’t have it in the recipe. The recipe is a piece of paper with all these instructions on how to make a thing.

Martin expanded the comparison by contrasting the resources on a web page with the actual tangible ingredients:

Now, the resources of a website are the ingredients, such as the CSS, the JavaScript files as well as the images, the videos, all that stuff that you load to make the page look the way that it looks afterward. And the website that you know and use in your browser you see in your browser, that’s the final dish.

How does Google Render a page?

Because rendering is such an essential element of SEO, it's critical to have a full understanding of it. Martin Splitt explained this well:

JavaScript

Rendering begins with the execution of JavaScript. JavaScript helps Google figure out what each on-page element's function is for the user. Google will use your HTML and CSS to identify the content if your website does not have JavaScript.

Tree of Layouts

The Layout Tree is important because it helps Google comprehend the DOM of your page (Document Object Model).

It aids Google in identifying the following:

Which elements of the page are visible to the user and which are not?

What is the size of the components on each page section?

Is there a way to tell if one element is concealed behind another?

What is the page's logical structure?

Rendering, according to Martin, is an asynchronous process that occurs in parallel with crawling. If structured data is detected in the first HTML while crawling, for example, Google will take it up without having to wait for the full Rendering process to complete.

According to Martin, Google uses a feature called the Centerpiece annotation. This is determined (to some part) by the semantic content and the layout tree. On the page, Google uses Natural Language Processing to evaluate if sections of the material are connected to the centerpiece or the page's main theme.

The Centerpiece annotation tells Google about the most essential information on the page and helps them identify it from the boilerplate.

Costly Rendering can Impact Customer Experience

Martin then shares some interesting information on the influence of JavaScript on energy consumption. He uses the word "expensive" to illustrate how pricey JavaScript may be in terms of time and energy. He compares JavaScript to carbon dioxide, a greenhouse gas, and how this affects users and, eventually, publishers' and eCommerce retailers' bottom lines.

Martin outlines the consequences of high-cost rendering:

"In this scenario, Google Search has the same difficulties as a real-world user.

Because more execution always equals greater power consumption for a real-world user, even if they are on a new phone that is likewise really fast, wonderful, and costly.

That's exactly the point. And...some have dubbed JavaScript the CO2 of the Internet, which I don't think is entirely inaccurate.

...The more costly it is, the worse the experience is for us.”

Conclusion

Martin Splitt's analogies helped to remove some of the uncertainty surrounding rendering, which is a crucial component of comprehending Core Web Vitals scores.

His talk raises awareness regarding costly rendering and how it can affect site users with older phones that have difficulties rendering the page. And it's not just older phones; modern phones may have trouble downloading a web page if the phone has been on for days and the RAM is being used up by numerous active browser windows.

You can watch the whole talk here: