The rendering process

The rendering process can be reduced to a situation where the Google bot performs several key steps for the final perception of the website. The first is to download the page, the next – to run the code. Then – on its basis – makes its own analysis of the page layout and the entire structure of the site. The set of information downloaded for a specific assessment is collected by this – usually not perceptible moment – which accompanies rendering of the page. As a result, qualitative content, effective link building or meticulously guarded Google Search Console become secondary factors if website rendering generates errors, delays, departures from the norms adopted by magicians from Alphabet Inc.

It can be assumed – from a technical point of view – that every website is two HTML faces: before rendering and after rendering the resources. The first is a set of basic information generated – from content through images to JS and CSS codes. The second face is the same basic code, but enriched with the changes that HTML has caused. And in this narrow space between the two modes lies one of the paths to SEO effectiveness. How the initially assumed commands are implemented in the user’s browser is one of the foundations of proper operation.

How does it look in practice? Launching a website in a browser causes the server to send specific data to a computer or other device. Data collected in HTML format – as well as, for example, XML – are analyzed by the system in terms of obtaining the planned graphic effect. What is presented on the user’s screen is the rendering effect – regardless of its type. And the types of technology provide a lot: from continuous to progressive.

Why is rendering so important?

The reason is simple, prosaic and ruthless: a site that cannot be rendered is not indexed by Google. Does not exist. It’s somewhere in cyberspace, but without much significance and no chance to show itself to the world. Indexation is rendering, rendering is indexation – in this case Google leaves no wicket and mitigating circumstances.

That is why it is so important to check both the home page and other internal websites for, e.g., whether the website contains resources that are blocked or otherwise not made available for Google bots. These are both CSS and JS files or images.

How to render a website effectively?

Google has its own rules, bots are walking their own paths, and all this is hidden in a thicket of code to which ordinary mortals outside Silicon Valley have at most limited access. How can you then verify that the website meets the requirements of a search engine ruthless in this context?

The basic option for a long time was a test for mobile devices. Contrary to what it seems, it does not have to be used only for smartphones or tablets. Checking how the Google bot downloads and renders a mobile page also gives an answer to its rendering quality. In a situation where the website is responsive, problems – and a bad result – mobile rendering also means incorrect adaptation to computers.

In mid-2019, Google announced that the bot would regularly update the rendering engine – Chrome 41 and its function of detecting functions, filling and log errors became the determinant. Blocked resources cannot be seen – after all, the browser will render them anyway – but this path can still be considered as particularly valuable.

It does not require much commitment: just download and install Chrome 41. Before, it is worth uninstalling the other – newer – versions temporarily and backing up bookmarks and files. Having Chrome 41 already, it is enough to enter any URL, and then – in a typical way – examine the page after pressing the right mouse button. This way, developer tools will be open. In the console tab you can see the errors found – just copy the data to programmers to start the process of repairing the shortcomings.

Complicated? The alternative – how trivial! – there is a rendering plugin. View Rendered Source is an excellent solution that captivates with its simplicity of operation.

Plugin link: https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob

As an extension added to Chrome, it shows how the browser has built – and therefore rendered – the original HTML for the DOM, including all Javascript modifications. So if a programmer uses the JS framework – Angular, React JS, Vue.js – it lets you understand how search engines see the page. It cannot be presented clearly: the differences between the “raw” and the rendered version are marked with an illuminated line.

Why is it worth verifying the website’s appearance?

– for Mobile First Index
– due to blocked resources that may make ranking difficult
– verification of the size of photos that may obscure the text
– a simple test whether the firewall is working properly
– crawl budget analysis
– Google Search Console doesn’t show everything (unfortunately)