What is Rendering?
Rendering is the process wherein a browser converts a webpage’s code (HTML, CSS, and JavaScript) and non-code resources (images, videos, and PDF files) into the visible and interactive webpage that we see. In technical terms, rendering is the process of converting initial HTML to rendered HTML.
EIN webpage consists of three sets of code:
- Hypertext Markup Language (HTML)
- Cascading Style Sheets (CSS)
- JavaScript (JS)
These three codes make up the page’s core.
- The HTML code specifies the page’s structure
- The CSS code specifies its visual styling and layout
- The JavaScript code allows visitors to interact with the page
A webpage may also contain non-code resources like images, videos, PDF files, spreadsheets, and text documents. When a browser or crawler requests to access the page, the server returns the relevant code files and non-code resources to them.
The browser or crawler then processes the code and resources into the visible webpage that we see. The act of processing these codes and resources into the visible webpage is called rendering.
Rendering is executed using a rendering engine, which is also called the layout engine. Every browser has one, with the three most popular ones being Blink, WebKit, and Gecko.
- Blink is used by Chromium-based browsers like Chrome
- WebKit is used by Apple’s Safari browser
- Gecko is used by the Firefox browser
Importance of Rendering
Rendering directly impacts how visitors and search engines interact with a site. When a browser renders a page, it transforms raw code (HTML, CSS, and JavaScript) into a visual and interactive site. This, in essence, allows the visitor to access and use the site.
When the rendering is slow or broken, the visitor can encounter delays, layout shifts, or non-functional elements, which all lead to a high Absprungrate and poor user experience. In certain instances, improper rendering may even prevent a page from loading.
Additionally, incomplete or dysfunctional rendering can cause bottlenecks that strain your server and cause server errors that render your site inaccessible.
From the SEO perspective, rendering determines how content is indexed. Modern websites rely heavily on JavaScript to load and display critical content. When a search engine bot cannot render the page correctly, it may miss these key elements, including backlinks, which could hurt a site’s Suchmaschinenoptimierung effort.
How Rendering Works
Every website has two primary states: the unrendered state and the rendered one.
- The unrendered state is called the initial HTML
- The rendered state is called the rendered HTML
When a browser requests a webpage, the server returns the webpage as initial HTML. This code includes the page’s HTML, which contains links to the CSS, JavaScript, images, videos, and other files that make up the webpage.
You can view the initial HTML in the page source on the webpage.
However, once your browser receives the initial HTML, it accesses the other files and compiles them into the webpage you see. The compiled page is called the rendered HTML.
In essence, the rendered HTML includes the initial HTML and any changes made by the JavaScript code. It is also called the Document Object Model (DOM).
