Difference between revisions of "Rendering"

From Seobility Wiki
Jump to: navigation, search
Line 1: Line 1:
−
<seo title="Rendering (Web Development): Definition” metadescription="In web development, rendering describes the process that turns code into a web page that the end-user interacts with. Learn more..." />
+
<seo title="Rendering (Web Development): Definition" metadescription="In web development, rendering describes the process that turns code into a web page that the end-user interacts with. Learn more..." />
  
 
== What is rendering? ==
 
== What is rendering? ==

Revision as of 17:47, 19 February 2021

What is rendering?

Rendering is a process used in web development that turns website code into the interactive pages users see when they visit a website. The term generally refers to the use of HTML, CSS, and JavaScript codes. The process is completed by a rendering engine, the software used by a web browser to render a web page. Because of its close association with web browsers, rendering engines are commonly referred to as browser engines.

How browsers render web pages

Web browsers render web pages in the following sequence:

Constructs DOM and CSSOM from raw code

  • While loading a web page, a web server sends a folder of files containing HTML, CSS, and JavaScript code to a user’s web browser.
  • The browser engine converts this data (bytes) into characters (the HTML code).
  • It parses the characters into tokens[1], which are further parsed into nodes[2].
  • The browser engine links the nodes into a tree-like structure known as a Document Object Model (DOM). The DOM is the JavaScript representation of the HTML.
  • Simultaneously, the browser converts the CSS code to a CSS Object Model (CSSOM) through a similar process.

Rendering

Image of HTML rendering from developers.google.com

Uses Render Tree to create the end-user web page

  • The browser engine combines the DOM and CSSOM to create a tree-like structure called a Render Tree. The Render Tree contains the style and content information browsers need to populate a webpage for viewers to see. calculate the layout for each visible element of a webpage and paint them on the screen for the end-users view.
  • The layout operation is the next step. Using the Render Tree, the browser engine calculates the position of each visible element of a web page.
  • Finally, the browser engine adds, or paints, the elements on the screen for the end-users view. The web page has now been rendered.

Dynamic Rendering

JavaScript is a popular choice for rendering web pages because it is used to create an intuitive user experience. However, many search engine bots struggle to process JavaScript readily[3]. Consequently, websites that use JavaScript to house most of their content and navigation run the risk of being invisible to the web crawler. Dynamic rendering addresses this issue by rendering a web page as described above for the human user, while also rendering static HTML for a search engine bot to crawl and index.

Page render speed

Page render speed refers to the time it takes to generate a page. Page render speed is measured from when the browser request is sent (when a user clicks on a link) to when the page becomes fully functional to the user. Page render speed and page load speed (the time it takes for users to see a webpage) are used interchangeably because both processes generally occur within split seconds of one another.

Low page rendering speeds increase bounce rates and lower conversions. In one Google study, loading times for bounced sessions were 2.5 seconds slower than its non-bounced counterparts[4].

Rendering

Image of bounce rate by site load time from thinkwithgoogle.com

Due to page render speed’s influence on the user experience, Google made page speed an official ranking factor in 2010.[5] Keeping rendering speed and overall page speed as fast as possible is, therefore, an important task in SEO.

Importance of Rendering for SEO

Webpage rendering affects how a page is indexed by bots and experienced by users. Understanding the impact of rendering on search engine rankings and SEO results should be a key consideration for any web development team.

In summary, for many websites (such as online retailers), building a website primarily in JavaScript may provide the most user-friendly and aesthetically engaging interface. However, search engine bots can struggle to crawl these websites, which negatively impacts search engine rankings and organic traffic. On the other hand, pages that render slowly negatively impact both user experience and search engine rankings.

These facts considered, web developers must pay careful attention to the requirements for bots and humans to maximize SEO performance.

References

  1. ↑ Anatomy of a Compiler Retrieved 11 December 2020.
  2. ↑ What is a node? Computer Business Review. Retrieved 11 December 2020.
  3. ↑ Implement Dynamic Rendering Google Search Central. Retrieved 8 December 2020.
  4. ↑ Why marketers should care about mobile page speed Think with Google. Retrieved 3 December 2020.
  5. ↑ Using site speed in web search ranking Google Search Central. Retrieved 11 December 2020.

Related links

Similar articles