What is rendering or graphical representation of the page?

All about the method of graphical representation of a web page or rendering

In the following article you will find up-to-date statistics on Google ranking factors, search engine usage, voice search, video SEO, mobile optimisation, backlinks, local SEO, keywords and much more.

The concept of rendering (graphical visualisation) comes from the English term «rendering». Used in the computer field to refer to cases where a computer draws, colours or displays something on the screen. In the case of this article, this is a website. Rendering of the page occurs when the page is accessed and its content is displayed on the screen. This is also done when using tools such as the mobile-friendliness test or from Google Search Console. (Google Search Console) to check whether the tracker Google's crawler interprets the page properly. These resources will show us the graphical representation made by the crawler by capturing it in an image that will be delivered as a result.

Why is rendering important for SEO?

The importance of observing how the tracker is Google graphically represents a page lies in its ability to identify archives CSS o JavaScript that may be blocked by the file robots.txt or any other problem that hinders rendering.

This information is relevant for Google, because if there are hidden parts, it will consider them less significant in the positioning and, in addition, it will check if the page is displayed properly on mobile devices. If we block its access and it fails to render the page properly, it could negatively affect the SEO.

It also allows us to detect JavaScript errors or incompatibilities with the JavaScript engine in the Google crawler that prevent proper display of content. These aspects are crucial to ensure an optimal user experience and a good positioning in search results.

Impact of rendering on SEO ranking

Page load time:

The loading speed of a page is an important factor in the SEO, The rendering method can influence the loading time of a page, as server-side rendering (SSR) can provide a faster initial load than client-side rendering (CSR). The rendering method can influence the load time of a page, as server-side rendering (SSR) can offer faster initial load times than client-side rendering (CSR). However, optimisation techniques and proper implementation can improve load times regardless of the rendering method used.

Content indexing:

In order for a website to be indexed correctly by search engines, its content must be accessible and easy to crawl. In the case of CSRs, search engines may have difficulty crawling and indexing content dynamically generated by JavaScript. However, search engines such as Google have improved their ability to crawl and render JavaScript-based pages, although there are still limitations. SSR can be a safer option in terms of indexing, as it provides search engines with a full, static version of the page content.

User experience:

The user experience (UX) is an important factor in SEO, and the way a page is rendered can affect UX. A slow initial load and poor interaction on a page can lead to a higher bounce rate and lower user satisfaction, which negatively affects the search engine positioning. Hybrid or universal rendering can offer a good combination of fast initial loading and dynamic user experience.

Ask for your audit

Adaptability to mobile devices:

Search engines, especially Google, have adopted a mobile-first approach to indexing, which means that the mobile version of a website is considered the main version for indexing and ranking. The choice of rendering method should take into account compatibility and adaptability with mobile devices to ensure a good experience on all devices and good performance in search results.

Would you like one of our SEO Analysts to audit your website?

Find out what you need to improve to dominate search results

What is the rendering method for a WordPress CMS?

In the case of WordPress, the rendering method used is mainly server-side rendering (SSR). WordPress is a PHP-based content management system (CMS), which runs on the server and generates static HTML that is sent to the user's browser.

When a user visits a WordPress page, The server executes the PHP code, queries the database for the required content and builds the final HTML that is displayed in the user's browser. This means that most of the rendering process occurs on the server before the content reaches the browser.

That said, it is also possible to add interactivity and client-side rendering (CSR) to a WordPress site through the use of JavaScript, including popular libraries and frameworks such as React, Angular and Vue.js. These technologies can be used in conjunction with WordPress to create single-page web applications (SPAs) or to add dynamic components to existing pages. In addition, WordPress includes a REST API that makes it easy to fetch and manipulate site data using client-side technologies.

In summary, although WordPress primarily uses server-side rendering due to its PHP-based nature, it is also possible to implement client-side rendering and hybrid approaches by combining WordPress with modern JavaScript technologies.

Why is it important for WPO?

Rendering optimisation in the browser is crucial to improving the user experience, as poorly implemented styles and animations can slow down the page and clog the interface, resulting in a lower performance rating in Google. This can directly affect ranking in search results.

The rendering optimisation of the page involves the appropriate application of CSS and JavaScript in each situation. In general, it is suggested:

Optimise JavaScript using various techniques that go beyond the scope of this explanation.
Avoid unnecessary screen repainting.
Avoid using complicated CSS rules.
Optimise animations to ensure smooth performance.
Avoid excessive DOM sizes to maintain a simpler and more efficient structure.

How does the browser execute the rendering of a website?

Rendering is triggered by the loading of a page or a change made by JavaScript, which requires the browser to run several algorithms in the following order to display the page to the user:

1. Calculation of styles:

Styles are determined for each HTML element, identifying which CSS rules apply to the page elements and applying their styles in a cascading fashion.

2. Web design:

Each HTML element is represented internally as a rectangle or layer. With the styles calculated in the previous step, you can internally set the position, size and space that each of these rectangles should occupy.

3. Painted:

During the rendering process of a web page, the painting stage is essential to bring the elements to life visually. In this phase, the browser proceeds to fill the pixels in memory with the visual details of each element, such as text, colours, images, borders and shadows.

The painting phase follows the style calculation and layout, where the styles applied to each element and its position on the page are determined. Once these styles have been assigned and the positions and dimensions of the elements have been established, the browser can begin to «paint» the elements in memory.

The painting is carried out in layers, which are then combined in the composition stage. During painting, the browser takes into account the CSS rules applied, as well as any JavaScript interaction that may affect the appearance of the elements on the page.

4. Composition:

All layers previously represented in memory are transferred to the screen. Because layers can overlap each other, it is crucial to render them in the proper order on the screen, ensuring that layers on top are displayed correctly on top of those below.

Types of Rendering

There are several types of rendering depending on the context and technology used. Some of the most common types of rendering are:

1. Client-side rendering (CSR):

In this type of rendering, most of the content and logic of the web page is generated and executed in the user's browser. The server mainly provides HTML, CSS and JavaScript files, and the browser is responsible for interpreting and displaying the content. Single page web applications (SPAs) typically use this approach.

2. server-side rendering (SSR):

In server-side rendering, the web page is generated and completed on the server before being sent to the user's browser. When the user requests a page, the server creates the HTML content with all the necessary data and styles and sends it to the browser, which then displays the page. This approach is common in traditional web applications and can provide faster initial loading and better indexing for search engines.

3. Static rendering:

In static rendering, web pages are pre-generated and stored as HTML files during the site construction phase. When a user requests a page, the server simply delivers the pre-generated HTML file. This approach is common in static websites and static site generators, and offers superior performance and scalability.

4. Hybrid or universal rendering:

Hybrid or universal rendering combines the advantages of client-side and server-side rendering. The page is initially rendered on the server and then sent to the user's browser. Thereafter, additional interactions and updates are handled by client-side rendering. This provides a combination of fast initial loading and a dynamic user experience.

5. GPU (Graphics Processing Unit) rendering:

GPU rendering refers to the process of generating 3D images and graphics using the processing power of a graphics card instead of the CPU. This approach is common in 3D graphics, gaming and animation applications, and offers significantly improved performance compared to CPU-based rendering.Each type of rendering has its own advantages and disadvantages, and the choice of the appropriate approach will depend on the specific needs of the project and considerations of performance, scalability and user experience.