Google explains the rendering and the impact on SEO

0


Martin Splitt from Google participated in a webinar on web page rendering and its impact on 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 unravel part of the mystery of Core Web Vitals.

Rendering web pages

Rendering of web pages is what happens between the browser and the web page, the process of creating a web page. An efficient rendering process results in high Core Web Vitals scores.

Less effective rendering can impact sales, ad revenue, and even web page crawl to some extent.

Martin Splitt of Google was asked to define what rendering is.

Screenshot of Martin Splitt explaining the rendering

Martin responded with an analogy between preparing a meal from a recipe and creating a web page.

Advertising

Continue reading below

HTML stands for HyperText Markup Language. This is a document creation format accessible through a browser through the rendering process.

Martin Splitt explained the rendering:

“If you think of HTML as a recipe and you have all the ingredients in it:

Got a bunch of text

you have lots of pictures

You got a bunch of stuff

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

The first part of Martin’s explanation is that HTML is like a recipe, instructions. Text and images are the elements used to create the finished meal, which is the web page.

Martin continued the analogy by comparing the resources of the web pages with the actual physical ingredients:

“Now a website’s resources are the ingredients, such as CSS, JavaScript files as well as images, videos, whatever you load to make the page look like it eventually looks like it does.” .

And the website you know and use in your browser that you see in your browser is the final dish.

Advertising

Continue reading below

Screenshot by Jason Barnard

Jason Barnard listens to Google's Martin Splitt

Rendering is like the baking process

Martin then compared the rendering to the actual process of taking the ingredients (assets like images, CSS, etc.) and preparing.

He continued:

“And the rendering is pretty much the baking or the process of preparing that.”

Exploring and rendering Googlebot

Next, Martin explains what rendering is for Googlebot.

Martin explained Googlebot and the rendering:

“So basically crawling goes into a great cookbook and just pulls out a page with a recipe and puts it in our domain, our scope, like basically we were standing here at a kitchen table… and waiting for the baking to begin. and crawling will just give us a recipe.

And then rendering is the process where the rendering goes, Aha! Interesting! Crawler over there, can you bring me these ten ingredients?

And the robot will be conveniently, yes, I have you these ten ingredients you need.

Thank you so much!

And then we start to cook.

This is the rendering.

Analyze HTML code for assembling web pages

The next part presents a programming word, parse. The analysis is simply to take all the parts of the HTML document (JavaScript, CSS, HTML elements) and follow the instructions for creating the web page.

Martin continued his discussion on rendering:

“So the rendering parses the HTML.

HTML fundamentally, when it comes to crawling, is just a bunch of text, conveniently formatted but… text!

To make it a visual representation, which is really the website, we have to render it, which means we have to grab all the resources, we have to basically understand what the text looks like:

There’s a header here, okay.

Then there is an image there and next to the image there is a bunch of text and then under the image there is another title, it’s a smaller title, it’s a title lower level… and then there is a video and then below that video there is more text and in that text there are three links to here, here and here.

And this whole assembly process, this understanding of what it is, and then putting it together into a visual representation that you can interact with in your browser window is rendering.

Advertising

Continue reading below

The role of JavaScript in rendering

Some JavaScript are essential for rendering (authoring) the web page. A good deal of JavaScript, like the scripts associated with a contact form, is not really necessary in the initial creation of an interactive web page that a site visitor can scroll through, read and click on a navigation menu. .

In order to speed up web page rendering (and improve Core Web Vitals), some non-critical JavaScript may be delayed or excluded altogether if not needed for the web page.

There is JavaScript that is important to make the page visible and interactive and some that is not yet or not at all.

Martin explained:

“And as part of the rendering, in the very first step, we run the JavaScript because JavaScript just happens to be basically a recipe within the recipe.

So JavaScript can be like, now go chop those onions!

So now you have the onions as a raw ingredient, but you don’t put the whole onions in your dish, you chop them up.

And that’s why JavaScript is needed, right?

… Executing JavaScript is only part of rendering.

Advertising

Continue reading below

Screenshot by Bartosz Goralewicz

Screenshot by Bartosz Goralewicz

The layout tree

Martin then starts talking about the layout tree. It refers to the Document Object Model, which is an arrangement of all parts of the web page in a hierarchical representation.

The different “pieces” of a web page are like the leaves of a tree. In HTML, these sheets on what Martin calls the layout tree are called nodes.

Advertising

Continue reading below

Martin explains the layout tree:

“But then when the JavaScript execution is finished or there has been no JavaScript execution, that’s fine too.

But what happens next is we come together, like we find out these pieces and how we have to like to put them together on the page and that leads to something called Layout Tree.

And the layout tree tells us how big things are, where things are on the page.

If they are visible or if they are not visible, if one thing is behind another thing.

This information is also important to us, just as much as running JavaScript, because JavaScript can modify, remove or add content that was not in the original HTML code as supplied by the server.

So that’s the result in a nutshell.

From we have HTML to potentially we have a bunch of pixels on the screen. This is the rendering.

Expensive rendering can impact user experience

Martin then presents useful information on the impact of JavaScript on power consumption. He uses the word “expensive” to describe how expensive some JavaScript can be in both time and energy.

Advertising

Continue reading below

He mentions how JavaScript has been compared to carbon dioxide, a greenhouse gas, and how that impacts users and ultimately the results of publishers and e-commerce stores.

Martin Splitt explains the expensive rendering

Google-Martin-Splitt-dear-renderingMartin explains the impact of an expensive rendering:

“Google search has the exact same struggle as a real user in this case.

Because, for a real user, even if you’re using a modern phone and a really fast, fantastic, expensive phone, more runtime always means more power consumption.

It’s just the thing. And… there have been people who have called JavaScript the CO2 of the Internet and I don’t think that’s completely wrong.

… The more you make it expensive, 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 waste as little energy and time as possible.

But obviously, if you optimize 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 perform well with whatever you put in there and they can. consume your web content and maybe not your competition because your competition doesn’t care and actually produce something less convenient to use on their phones.

So it’s not something where you would pit Google against user experience.

It’s kind of like the same problem or the same challenge and we all face it including Google search. “

Advertising

Continue reading below

Screenshot of Martin Splitt from Google

Google Martin Splitt

Overview of the importance of rendering

Core Web Vitals can be somewhat abstract and mysterious, especially when techs talk about document object models, DOM trees, and rendering.

Martin Splitt’s analogies have helped remove some of that mystery in an important part of understanding Core Web Vitals scores, which is rendering.

Another benefit of his discussion is to raise awareness of the concept of costly rendering and its impact on site visitors whose phones may be older and have difficulty viewing the page. And it’s not just older phones, but newer phones may have trouble downloading a webpage if it’s been on for days and the RAM is scattered across multiple open browser windows.

Advertising

Continue reading below

Finally, he demystified the concept of rendering. This helps keep the conversation going about improving web page speed and Core Web Vitals performance, as there is little like technical jargon to slow or stop progress in understanding something. important.

Quote

Watch Martin Splitt explain the rendering from around 15:36 minutes


Leave A Reply

Your email address will not be published.