Little is said about what rendering means in the loading process of any website. We know that our page must respond very fast but do you know what it is and what implications it has on SEO? In this article, we are going to unveil the secrets behind the scenes of every website.
What is web rendering?
The rendering of a web page refers to the process in which browser interprets HTML, CSS and JavaScript code of a web page and converts it into the visual representation we see on the screen.
When you visit a web site, your browser downloads the HTML code which defines the structure and content of the page, the CSS styles that determine how the page is viewed and the scripts of the JavaScript that add interactivity and functionality. The browser then parses and processes these files to generate a visual representation of the page.
Let's look at the following example:
As you can see in this graph, once a user enters our website, different processes occur that at first glance are imperceptible to the user and have to do with internal micro processes involving the server, web files and browsers.
This is why the rendering process is so important for performance and for the SEO positioning.
Types of web rendering:
While the general process is similar, this can be done in the following ways server-side, or of the customer side in a static or dynamic way according to each web architecture.
Client-side rendering CSR :
In this rendering, the browser downloads a minimal web page or a shortened version of it of it, which generally contains only the basic structure (HTML) and style files (CSS), along with the JavaScript code needed to load and render the additional content.
The browser takes this JavaScript code and executes it to generate the complete visual representation of the web page.
This type of rendering favors TTFB, one of the Core Webs Vitals, for obvious reasons, since the server response will be lower as it does not depend entirely on it.
SSR server-side rendering:
In this case, the server is responsible for generate the HTML representation of a complete web page and send it to the browser. In this approach, the browser receives a web page already rendered and ready to be displayed.
This type of rendering is very positive for performance since it does not depend on the client's resources and this can favor the crawling and indexing of the page.
However, it must be taken into account that it is a less flexible system because if the server is not powerful enough, it could generate response time problems.
There are other hybrid systems that use both versions. The best thing to do is to analyze possible bottlenecks of your website and act accordingly.
How does JavaScript perform in rendering?
Javascript is a programming language that allows you to add dynamism and execute very important functions on a website.
Some of the actions that Javascript performs on the web are:
- The HTML content is loaded and the browser builds the DOM structure that will later be modified by Javascript.
- Through methods such as getElementById o querySelectorJavascript modifies the elements by styling them.
- Add interactivity elements such as button clicks, form submissions, etc.
- It makes requests to the server asynchronously.
- It adds visual effects such as animations, adds libraries, adds dynamism to CSS.
Is rendering important for the SEO of my website?
If the rendering process is slow, it will cause the performance to be lower and Google will have a hard time crawling and indexing that url. In addition to these problems, we also have:
- Possible increase in the exit or bounce rate of users.
- Locks on priority files: items cannot be viewed or actions cannot be performed by the user.
- Impact on conversions.
- Shorter dwell time.
What does Google say about Javascript rendering?
According to statements by Martin Split (developer at Google) in June 2023, JavaScript processing is now much more user-friendly than it was a few years ago. This is mainly due to the fact that Google is increasingly able to understand the micro-processes that occur and focuses especially on WRS.
The WRS (Web Rendering Service) is what happens after the HTML and resources have been read, but before the generation of the DOM tree which is what Google will ultimately analyze as the "final" page. It is true that this process exists whether or not there is Javascript code, but when it is present, it makes everything more interesting.
In short: Google takes into account the final DOM for indexing, but, if the process to reach that data is too long, it will consequently affect the crawling of the web. This is what we must finally analyze with the different performance tools to see where the rendering fails.
Massive blocks from robots.txt that affect rendering:
Be careful with our faithful friend, the robots.txt. This file, although simple, is actually very effective when it comes to authorizing or disallowing crawling directives. If it contains blocks to priority files such as CSS and JS, it can directly affect rendering and therefore performance.
It is very common to find robots files created by default by WordPress, Prestashop or Magento, but the truth is that it is necessary to adapt them to our context, as our SEO specialist, Natascha Fher, says, when talking about the performance impairment due to blockages in robots.
Real case study:
In reference to robot blocking, a few days ago we received a case of a client whose WordPress development was affected by performance. By using our tools, we detected a serious resource blocking problem, as you can see below:
Thanks to the view Waterfall We have been able to verify the large amount of time that some resources spent blocked. These files were nothing more and nothing less than images in Webp format (the one recommended by Google).
This happened because the plugin used to convert the images was storing them in a WordPress directory that was blocked in the robots.txt . In addition to the images, many CSS and Javascript style files, which are a priority for web rendering, also suffered from this problem.
We checked what the files were and together with the client we determined that they were an important part of the load. Directories such as "wp-content" or "wp-includes" in the case of a WordPress, are tremendously important as they store a large amount of information.
While not everything is a priority, our recommendation is to avoid massive blocking of this directory. and make sure that, with any new implementations, robot policies are not preventing search engines from accessing content you are interested in.
Final SEO tips to improve the performance of your website:
Here are 4 tips that you can follow to avoid rendering problems on your website:
- Analyze different urls of your domain:
With tools such as GTmetrix and Page Speed. If you own a e-commerceWe recommend you to analyze the main url, a category and a product.
- Uses rendering tools:
For example, Fetch & Render to check what the robots read when they enter your site during the first seconds of loading. This way you will be able to know which files are affected and identify if they come from a plugin or are external.
- Modify your robots.txt for each change:
If you have detected blocking of important files or you have implemented changes in your website, check the robots.txt to detect what kind of directives you can add or remove. If you don't know which are priority files, here is a small list of common cases:
Important files:
-CSS cache plugins, speed, etc.
-JS design plugins such as Elementor.
-New images and formats such as webp.
- Don't skimp on quality resources:
At the beginning of any project it is usual to hire basic server and development services, but as the web grows, it becomes increasingly necessary to expand, update and adapt to new circumstances.
We hope this post has helped you to understand the concept of SEO rendering and what actions you can take to detect problems and fix them.
If you have doubts about whether your site is optimized for SEO or you don't know how to address performance issues, contact with us.
EN 
MX