Google’s Martin Splitt participated in a Duda Webinar about web page rendering and how it impacts SEO. Rendering is what happens when a browser requests a web page, it’s a key part of Core Web Vitals scores. Understanding this helps take some of the mystery out of Core Web Vitals.
Web Page Rendering
Web page rendering is what happens between the browser and the web page, the process of building a web page. An efficient rendering process results in high Core Web Vitals scores.
Less efficient rendering can impact sales, advertising earnings and even web page crawling to a certain extent.
Google’s Martin Splitt was asked to define what rendering is.
Screenshot of Martin Splitt Explaining Rendering
Martin responded with an analogy between cooking a meal from a recipe and making a web page.
HTML means HyperText Markup Language. It’s a format for creating documents that can be accessed with a browser through the rendering process.
Martin Splitt explained rendering:
“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 really have it in the recipe. The recipe is a piece of paper with all these instructions on how to make a thing.”
The first part of Martin’s explanation is that HTML is like a recipe, the instructions. The text and images are the things used to create the finished meal, which is the web page.
Martin continued the analogy by comparing web page resources with the actual physical ingredients:
And the website that you know and use in your browser you see in your browser, that’s the final dish.”
Screenshot of Jason Barnard
Rendering is Like the Process of Cooking
Martin next compared rendering to the actual process of taking the ingredients (resources like images, CSS, etc.) and doing the cooking.
“And rendering is pretty much the cooking or the preparation process of that.”
Googlebot Crawling and Rendering
Next Martin explains what rendering is for Googlebot.
Martin explained Googlebot and rendering:
“So crawling fundamentally just goes into a big book of recipes and just takes out a page with a recipe and puts that into our realm, our reach, like basically we are standing here at a kitchen table …and we wait for the cooking to begin and crawling will basically just hand us a recipe.
And then rendering is the process where, rendering goes, Aha! Interesting! Crawler over there, can you get me these ten ingredients?
And the crawler will be conveniently, yes, I got you these ten ingredients that you need.
Thank you very much!
And then we start cooking.
That’s what rendering is.”
Parsing the HTML for Web Page Assembly
Martin continued his discussion of rendering:
“So rendering parses the HTML.
HTML fundamentally, when it comes from crawling, is just a bunch of text, conveniently formatted but …Text!
In order to make that into a visual representation, which is the website really, we need to render it, which means we need to fetch all the resources, we need to fundamentally understand what the text tells us to be like:
There’s a header here, okay.
Then there’s an image there and next to the image there’s a bunch of text and then under the image there’s another heading, it’s a smaller heading, it’s a lower level heading …and then there’s a video and then below that video there’s some more text and in this text there’s three links going to here, here and here.
And all this assembly process, this understanding what it is and then this assembling it into a visual representation that you can interact with in your browser window, that is rendering.”
So now you have the onions as a raw ingredient but you don’t put the onions as a whole into your dish, you cut them up.
Screenshot of Bartosz Goralewicz
The Layout Tree
Martin next begins talking about the Layout Tree. He’s making a reference to the Document Object Model, which is an arrangement of all of the parts of the web page in a hierarchical representation.
The different “bits and pieces” of a web page are like the leaves of a tree. In HTML those leaves on what Martin calls the Layout Tree, are called, nodes.
Martin explains the Layout Tree:
But what then happens is we are assembling, like we are figuring out these bits and pieces and how we need to like assemble them on the page and that leads to something called, Layout Tree.
And the Layout Tree tells us how big things are, where on the page things are.
If they are visible or if they are not visible, if one thing is behind another thing.
So that’s rendering in a nutshell.
From we have some HTML to we have potentially a bunch of pixels on the screen. That’s rendering.”
Costly Rendering Can Impact User Experience
Martin Splitt Explains Expensive Rendering
Martin explains the impact of expensive rendering:
“Google Search has the exact same struggle as a real-world user in this case.
Because, for a real-world user, even if you are on a modern phone and a really fast and fantastic and expensive phone as well, more execution also always, always, means more power consumption.
…The more expensive you make it the worse it is for us as an experience.
Google Search doesn’t really care. We just have to invest in the resources that we need and we do a lot of optimizations to make sure that we are wasting as few energy and time as possible.
But obviously, if you are optimizing that, a nice and really nice side effect is that your users will probably also be happier because they need less battery, their old phone will still work fine with what you put out there and they will be able to consume your web content and maybe not your competitors because your competitors don’t care and actually produce something that is less convenient to use on their phones.
So this is not something where you would pit Google versus user experience.
This is kind of like the same problem or the same challenge and we are all facing it, including Google Search.”
Screenshot of Google’s Martin Splitt
Insights into Importance of Rendering
Core Web Vitals can be somewhat abstract and mysterious, especially when techies talk about Document Object Models, DOM trees and rendering.
Martin Splitt’s analogies helped take some of that mystery out of one important part of understanding Core Web Vitals scores, which is rendering.
Another benefit of his discussion is creating awareness about the concept of expensive rendering and how that might impact site visitors whose phones might be older and have trouble rendering the page. And it’s not just older phones but newer phones might have an issue downloading a web page if it’s been on for days and the RAM is spread thin across multiple open browser windows.
Lastly, he demystified the concept of rendering. That helps move the conversation forward on improving web page speed and Core Web Vitals performance because there are few things like technical jargon to slow down or stop progress on understanding something important.
Original Duda Webinar Page for Essential Rendering