x
Find out how Path Interactive can deliver a customized approach to growing your business.
Please tell us about yourself and we'll contact you shortly.

What Does It Mean To “Render” a Webpage?

Steven Sonnes July 7, 2014 Category Design & Development

Google recently announced that the majority of web pages they crawl are now being rendered, and they released a new feature in Webmaster Tools to preview a rendered version of your site. So what does it mean to “render” a web page? To understand this concept, you must first understand how a web browser works.

How Web Browsers Work

How Web Browsers Work

The primary function of a web browser is to request resources from the web and display them inside of a browser window. Typically a browser will request HTML, CSS, JavaScript and image content from a server and interpret them based on web standards and specifications. They follow standards because it allows websites to behave the same way across all browsers, and creates less work and fewer headaches for web developers.

There Are 7 Key Components of Any Web Browser

How Web Browswers Work 2

1. Layout Engine – this takes input from the browser (URL bar, search box, mouse clicks and key presses) and passes them to the rendering engine

2. Rendering Engine – this takes HTML code and interprets it into what you see visually. For instance, a tag would be interpreted by the rendering engine as a set of instructions to make the text inside of the element bold

3. User Interface – This is the visual presentation of controls in the browser, for instance the back and forward buttons, bookmarks, and all chrome that appears around the main browser window where web pages display.

4. JavaScript Engine – This engine takes JavaScript code, parses it, executes it, and returns the results.

5. Network Layer – This is a function of the browser that happens behind the scenes and handles network functions such as encryption, http and ftp requests, and all network settings such as timeouts and the handling of HTTP status codes

6. Storage – Browser’s must store some data which can include cached files, cookies, and recently browsers have updated to be able to store data and objects created with JavaScript

7. Operating System Interface – The browser must interact with the operating system to draw out several elements of the page like drop down boxes and the chrome of a window (close, maximize, and minimize buttons)

Let’s Focus on the Rendering Engine

The rendering engine has a very important job as it displays what you see on your screen. It communicates with the networking layer of the browser to grab HTML code and other items passed from a remote server. Then it follows these steps:

How Web Browswers Work 3

1. Parsing HTML and creating the DOM Tree – HTML is a hierarchal structure that begins with a <html> tag, usually contains a <head> and <body> tag, and elements can be nested within elements. These HTML elements are parsed and turned into a “DOM tree” by the rendering engine. It is a tree like structure made out of the HTML, where each tag is a branch starting at the root element.

How Web Browsers Work 4

2. Render Tree Construction – CSS attributes (style attributes) are also parsed and combined with the DOM tree to create a “render tree”. This is a tree of visual elements such as height/width and color ordered in the hierarchy in which they are to be displayed in the browser.

How Web Browsers Work 5

3. Layout Process – Once the render tree is constructed, the rendering engine recursively goes through the HTML elements in the tree and figure out where they should be placed on the screen. This starts at the top left in position 0,0 and elements and attributes are mapped to coordinates on the screen.

4. Painting – Each node (branch) of the render tree is drawn out on the screen by communicating with the Operating System Interface which contains designs and styles for how UI elements should look.

A search engine spider cannot “see” a web page the way we do and will instead use a set of rules programmed into it to construct the DOM tree and understand the elements that are a part of it. For Google to understand that a word on the page is in the body context of the page, it must be able to process the entire page.

Throwing JavaScript into the Mix

JavaScript is a programming language which allows things to happen inside of the browser and makes web pages interactive. Things like popup windows, actions that occur on a button press and elements that move across the page are all things done by JavaScript. This means that JavaScript code executes after the web page has been rendered and painted onto the screen, and when it executes it triggers a re-render to account for changes made.
An example of this is the Like button on Facebook. When you look at it on page load, it says “Like” and shows a thumb up. When you click it, it dynamically changes to say “Unlike” and swaps the thumbs up icon for a thumb down.

Content on the page can be manipulated by JavaScript to display things in your browser that do not appear when you view a web page’s source code. You can have words that appear in the body of your page to a user that do not appear in the source code of the site and search engine spiders who do not render the page will be unable to detect that content.

How Web Browswers Work 6This is how Facebook would look to a search engine spider that did not render content

What Does This Mean for SEO?

The fact that Google looks at the fully rendered version of a webpage means that you can no longer look solely at the source code of a site to understand how it is perceived by a search engine spider. You should assume that search engine spiders see the same page you see in your browser as it appears on page load. Here are some examples of when this matters:

• If you use an image carousel, images are hidden and you have to wait or click through to see all of the images. You should assume that Google perceives these types of sliders the same way a user would and puts more weight on the images and text that appear to the user the second the page is loaded.

• If you have content that is dynamically served through JavaScript, for instance widgets or feeds that are overlaid on the page or A/B tests that are overlaid with JavaScript, Google will see that content

• If you use 3rd party scripts or style sheets, Google will see the content of those resources if they can. You can verify that everything on your page can be seen by Google by using the new fetch as Googlebot rendering tool in Webmaster Tools.

How to Use the New Rendering Tool in Webmaster Tools

In Webmaster Tools, go to Crawl > Fetch as Google then enter the URL you want to test and click FETCH AND RENDER

 

Google will then show you a screenshot of the page as they see it. You can also view files that Google was unable to retrieve and include in the render. This helps with diagnosing issues with indexability and can point out issues with content that does not appear in the site’s source code.

 

If you are curious or unsure of how your business is being presented to search engines, gives us a call today at 800-680-4304 or fill out our express form for a free SEO consultation.

 

Most Recent

App Store Optimization Tips for SEOs (and Other Digital Marketers)

By Romain Damery, PathInteractive | December 5, 2016

Do you know how to make sure that fantastic app is actually seen? So, you or a client has created […]

Read More

Ad Age Names Path Interactive as #3 Best Place to Work in 2016

By Sarah Fonseca Dryden, PathInteractive | December 2, 2016

Many thanks to all our team members for making Path Interactive Ad Age’s #3 Best Place to Work this year. […]

Read More

Content Marketing 101: How to Set Up Buyer Personas & Create a Content Map

By Emil Mequita, PathInteractive | November 21, 2016

The First Rule of Content Marketing: Know Where the Heck You’re Going The ‘Worldwide Web’ is living up to its global […]

Read More