SEO rendering

When you have a website, the HTML you write is not the HTML the user ends up seeing, as there might be a CDN, a CMS, or any technology that results in a difference between the code and what is actually displayed.

Rendering is the process of converting HTML into pixels.

This means that rendering is the process of transforming the HTML sent into pixels (what is seen on screen). This result on screen is usually interactive — for example, you can scroll or click.

To understand how this affects SEO, it’s important to grasp how the process between the server and the user works step by step.

Browsers and Google do not read the HTML directly, but rather the DOM tree.

This diagram makes it much easier to understand how a browser actually reads code and how this categorisation allows interaction.

Therefore, the DOM does not necessarily remain static. There can be an element that, when clicked, creates other elements that modify the DOM structure. These changes are usually carried out using JavaScript, as it is the language that interacts with the user (browsers), meaning that, unlike other languages, browsers can read and process JavaScript.

This happens on nearly all websites. The fact that this occurs does not in itself cause any SEO issues. Even if 100% of the page changes, it should not be a problem. In fact, one of the main concerns for any SEO working with a JavaScript framework is rendering in relation to Google.

When Google crawls with JavaScript, it follows the same process and takes a snapshot (screenshot), which is the one used for indexing. As long as the JavaScript transforms the DOM before Google takes that snapshot, there should be no issue. In theory, Google is quite good at deciding the right moment to capture the content.

The DOM is also used to create a layout of the elements and understand where each one goes (although this can be visually altered using CSS).

In the talk, this example was used to show how JavaScript affects a page. We can see in this loading sequence (in the image) how JavaScript (yellow) modifies the HTML (blue that appears after the yellow) and how afterwards, a lot of CSS (purple) loads, taking more than 1 second. This can happen both in websites that use JS to create the DOM and those that do not — it’s simply down to poorly written or unoptimised code.

As a result, the content rendered by Google may not match what we want the user to see and, therefore, this could lead to an indexing and ranking issue.

How does Google understand rendering?

Google does not need the pixels or visual rendering, because it does not use them. According to Martin Splitt, there is no need for a longer screenshot in Search Console, since what Google uses as a reference is the source code from the URL Inspection Tool, which is what appears in the DOM at the time of the capture.

The indexing system is a set of microservices communicating with each other.

Google sends requests to different pages and waits for their responses. Depending on how they behave and interact, it will choose a moment to capture the snapshot — if necessary.

It is not a physical robot, so it analyses various pages and websites simultaneously. For example, one page might return an error response code and get ignored, while another, crawled at the same time, might return all the information correctly and proceed to indexing.

Did you know that Google fakes inactivity for rendering?

List of indexing system microservices

Microservices are the set of processes Google uses before indexing a page. With these microservices, it checks whether a page is worth indexing or not. This is the list of microservices Google uses to split the indexing task:

• Duplicate removal
• Crawling
• Link analysis
• Robots analysis
• Web Rendering Service
• Content analysis

What is the Web Rendering Service?

The Web Rendering Service (WRS) is one of the microservices that form part of the "questions" that Googlebot asks a page before proceeding to index it. You could say that the Web Rendering Service is the "magic" that allows JavaScript to be understood. This is easier to understand for those who have used headless Chrome.

Once the page has been crawled, it passes through the web rendering service, creating the DOM that Google will capture — and which will appear in the URL inspector results in Search Console.

It doesn’t matter whether a website uses JavaScript or not — it will pass through the rendering service, and Google will use whatever appears in that DOM Tree capture.

Nowadays, Google does not take more or less time to index based on the use of JavaScript, but for other reasons. In other words, JavaScript does not impact the indexing time.

How does the WRS work?

It could be divided into the core of the WRS and caching. Caching is important because waiting on continuous responses from other servers online used to consume a lot of resources and time. Through caching, Google manages the massive volume of websites it crawls daily.

When using the Search Console tool for a live test, it accesses the server directly — not what Google has in its cache (otherwise it wouldn’t be a live test). But this doesn’t mean that Google will take it into account at that very moment. You can see what Google is currently considering by checking the cache, as it has to crawl the entire web and will take as long as it needs to apply the necessary changes for indexing or ranking. Even if the correction appears instantly for us in the live testing tool.

Basically, this means that Google uses the cached version of each page, and what we see in Search Console (when clicking on Screenshot) is a current version of the site, not the one cached. So Google queues the task of rechecking it when we run a live test. Therefore, the live test is for our benefit, and Google considers what it has cached.

Google uses all the processes in the image to render a page correctly. If, for any reason, a browser fails to load the page, it will try others multiple times to ensure the rendering is correct (this also helps prevent cloaking, for example).

In any case, this is Google’s job, so it’s not that relevant for SEO. It just means Google tests the rendering several times to get an objective result.

What should an SEO know?

• What Google sees after rendering is what counts for indexing.
• On average, a page is considered rendered after 5 seconds (another reason why WPO matters).
• Rendering caches resources aggressively (for the search engine’s own optimisation). In other words, there’s no need to worry too much about crawl budget in relation to rendering.
• The website should be tested using the URL Inspection Tool in Search Console (not the cached version, view-source, or other tools).
• One must stay updated on how Google renders content. For example, we know that Googlebot remains inactive in the browser to trigger JavaScript events that occur upon inactivity.

Frequently Asked Questions

Is there any issue when using JavaScript with temporary cache (or CDN) links?

This refers to websites that, for cache optimisation, use temporary files such as "/232498r32d.js".
These files are regenerated and renamed periodically for performance reasons. In the case of rendering, Google’s cached file is invalidated when the file changes, but this does not harm performance.

Can you rank with CSR (Client-side Rendering)? Does hybrid still make sense?

If the page is well developed, there should be no issue whatsoever, and hybrid does make sense — when it makes sense for the website — but not for SEO purposes. (See JavaScript Rendering to understand this question better.)

Since I still had doubts about dynamic rendering, I asked Martin Splitt later on Twitter, and his answer was quite definitive:

Conclusion

Google is now able to render JavaScript correctly, due to the time it takes to capture the snapshot. This does not mean that Google has no issues with lazy loading or that every page renders properly for Google.

In any case, we can audit this by checking the code that appears when we click on “Inspect” in the URL Inspection Tool in Search Console.

Sources

• Martin Splitt's talk at SEO On The Beach