How Google Rendering Works Explained by Martin Splitt
Practical Rendering SEO Explained October 7, 2021
Martin Splitt is a certified Developer Advocate with the Google Search Relations team in Zurich, Switzerland. In this video interview with Jason Barnard, he explains how rendering works in simple analogy.
00:00 Introducing, Martin Splitt
00:06 HTML as a recipe (Cooking Analogy)
00:49 What is Crawling? (Cooking Analogy)
01:11 What is Rendering? (Cooking Analogy)
Transcript
So if you think about HTML as a recipe and you have all the ingredients in there, you have a bunch of texts, 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 the thing.
Now, the resources of a website are the ingredients such as the CSS, the JavaScript files as well as the images, the videos, all of that stuff that you load to actually make the page look the way that it looks afterward, and then the website that you know and use in your browser and you see in your browser, that’s the final dish and rendering is pretty much the cooking or the preparation process of that.
So crawling, fundamentally just goes into a big book of recipes and takes out a page with a recipe and then puts that into our realm, our reach, like basically, we’re standing here on a kitchen table or maybe we’re on a countertop.
And we wait for the cooking to begin and crawling would 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 10 ingredients?” And the crawler conveniently will be like, “Yes, I got you these 10 ingredients that you need. Fine and thank you very much.” And then we start cooking. That’s what rendering is.
So rendering parses the HTML… HTML fundamentally when it comes from crawling, is just a bunch of text.
Conveniently formatted text, but text. And 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.
It would be like, “Oh!, there’s a header here. Okay. Then there’s an image there. And next to the image, there’s a bunch of texts. And then under the image, there’s another heading, it’s a smaller heading, it’s a lower-level heading. It’s basically indented in the structure of the content and then there’s the video.
And then below that video, there are some more texts. And then in this text, there’s three links going to here, here, and here.”
And all this assembly process is about understanding what (each element of the page) is. And then disassembling it into a visual representation that you can interact with in your browser window. That is rendering.
