Google defines rendering and effects on SEO.

Google’s Martin Split participated in a webinar on web page rendering and how it affects SEO. Rendering is what happens when a browser requests a web page, this core is an important part of the web vital score. Understanding this helps to unravel some of the mysteries of Core WebVital.

Web page rendering.

Web page rendering is the process of creating a web page between a browser and a web page. An efficient rendering process results in a high core web vital score.

Less efficient rendering can affect sales, ad revenue, and even web page crawling to a certain extent.

Google’s Martin Split was asked to explain what rendering is.

Screenshot of Martin Split explaining the rendering.

Martin drew a analogy between cooking with a prescription and creating a web page.

Advertisement

Continue reading below.

HTML stands for Hypertext Markup Language. This is a document creation format that can be accessed through a browser through the access process.

Martin Split explained the rendering:

“If you think of HTML as a recipe, and you have all the components:

You have a bunch of text.

You have a bunch of photos.

You have a bunch of stuff.

But you don’t really have this prescription. A prescription is a piece of paper that contains all the instructions on how to make something.

The first part of Martin’s explanation is that HTML is like a guide, a guide. Text and images are things that are used to make ready-made food, which is a web page.

Martin continued to compare webpage resources to actual physical components:

“Now, a website has resource components, such as CSS, JavaScript files as well as images, videos, everything you load so that the page actually looks like what it looks like later.

And the websites that you know and use in your browser that you see in your browser, this is the ultimate dish.

Advertisement

Continue reading below.

Screenshot by Jason Bernard.

Jason Bernard listens to Google's Martin Split.

Rendering is like a cooking process.

Martin later compared the rendering to the components (resources such as images, CSS, etc.) and the actual cooking process.

He continued:

“And rendering is the process of cooking or preparing it.”

Google bot crawling and rendering.

Next Martin explains the rendering for Google Boot.

Martin explained Google Boot and Rendering:

“So crawling basically just goes into a big book of recipes and just pulls out a page with a prescription and puts it in our circle, within our reach, like we’re standing here at the kitchen table. ..And we wait for cooking and crawling will basically give us just one recipe.

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

And the crawler will be easy, yes, I have found these ten components you need.

Thank you very much!

And then we start cooking.

This is what it offers. “

Related: How (and why) search engines render pages.

Parsing HTML for Web Page Assembly.

In the next section, a programming word, pars, is introduced. Analyzer only takes all parts of the HTML document (JavaScript, CSS, HTML elements) and follows the instructions for creating a web page.

Martin continued to discuss his rendering:

“So rendering parses HTML.

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

To make it a visual representation, which is really a website, we need to present it, which means we need to bring all the resources, we basically need to understand what the text tells us. Is:

Here’s a header, okay.

Then there’s an image and there’s a bunch of text next to the image and then there’s another title below the image, it’s a short title, it’s a lower title; and then there’s a video and then something below that video And there is text and there are three links in this text here, here and here.

And all this assembly process, understanding what it is and then gathering it into a visual representation with which you can interact in your browser window.

Advertisement

Continue reading below.

The role of JavaScript in rendering.

Some Javascript is important for presenting (creating) a web page. Quite a bit of JavaScript, like the script associated with the 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 the navigation menu.

To speed up web page rendering (and to improve core web vitality) some unimportant JavaScript may be delayed or completely removed if not necessary for the web page.

There are some JavaScript that are important for making the page visible and interactive and some that are not yet important at all.

Martin explained:

“And as part of the rendering, in the first phase, we implement JavaScript because JavaScript is basically a version inside the instruction.

So it might be like JavaScript, now cut those onions!

So now you have onions as a raw ingredient but you don’t put onions in your dish completely, you cut them.

And that requires JavaScript, right?

… Implementing JavaScript is only one part.

Advertisement

Continue reading below.

Screenshot of Bartosz Goralewicz.

Screenshot of Bartosz Goralewicz.Related: Introducing the SEO Manifesto: Why we need to go beyond JavaScript SEO.

Layout tree

Martin starts talking about the next layout tree. That document refers to the object model, which sorts all parts of a web page into a hierarchical representation.

The various “pieces and fragments” of a web page are like the leaves of a tree. In HTML, the addresses that are called Martin layout trees are called nodes.

Advertisement

Continue reading below.

Martin explains the layout tree:

“But then when JavaScript execution is over or if JavaScript is not implemented then that’s fine too.

But then what happens is that we’re gathering, like we’re finding these bits and pieces and we need to put them together on a page and that’s why something is called a 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.

This information is also important to us, as is the implementation of JavaScript because JavaScript can modify, delete, or add content that was not in the original HTML as delivered through the server. ۔

So this is summarizing.

We have some HTML to possibly a bunch of pixels on the screen. It is offering. “

Expensive rendering can affect the user experience.

Martin Next provides useful insights into the effects of JavaScript on energy consumption. He uses the word “expensive” to describe how expensive some JavaScript can be in time and energy.

Advertisement

Continue reading below.

He mentioned how JavaScript has been compared to carbon dioxide, greenhouse gases and how it affects consumers, and ultimately the bottom line of publishers and e-commerce stores.

Martin Split explains the expensive rendering.

Google-Martin-Split-Expensive Rendering.Martin explains the effects of expensive rendering:

“Google Search has to struggle like a real-world user.

Because, for a real-world user, even if you’re on a modern phone and on a really fast and terrific and expensive phone, more execution always, always, means more power consumption.

That’s all. And there are people who call JavaScript the CO2 of the Internet and I don’t think that’s completely wrong.

… The more expensive you make it the worse it is for us as an experience.

Google Search doesn’t really care. We only have to invest in the resources we need and we make a lot of improvements to make sure we’re wasting the least amount of energy and time.

But obviously, if you’re improving it, a good and really good side effect is that your users will probably be happier because they need less battery, their old phone will still work fine. What you put there and they will be able to use your web content and maybe not your competitors because your competitors don’t care and actually develop something to use on their phone Less easy.

So this is not where you put the Google vs. user experience.

It’s the same problem or the same challenge and we’re all facing it, including Google search.

Advertisement

Continue reading below.

Screenshot of Google’s Martin Split.

Google Martin Gert.

Insights into the importance of rendering.

Core web vitals can be a bit abstract and mysterious, especially when talking about taxi document object models, DOM trees and rendering.

Martin Split’s metaphors helped unravel some of the mysteries that are an important part of understanding the core web vital score.

Another benefit of this discussion is to raise awareness of the concept of expensive rendering and how it can affect site visitors whose phones may be outdated and may have difficulty presenting the page. And it can be a problem to download a web page not only in old phones but also in new phones if it continues for several days and RAM is spread thinly in many open browser windows.

Advertisement

Continue reading below.

Finally, it eliminates the idea of ​​rendering. This helps to move the discussion forward on improving the speed of the web page and the performance of the core webvital as there are technical terms to slow down or stop the progress in understanding some important things.

Reference

See Martin Split explains rendering from the approximately 15:36 minute mark.

https://www.youtube.com/watch?v=BG56C6XI0YM.

Write a Comment

Your email address will not be published. Required fields are marked *