Bing recently announced it is using IE11’s pre-render tag to enhance the user experience on Bing.com. Pre-rendering enables Bing to automatically download the webpage for the first search result before you visit that page. Note, this only happens for “popular searches”, and I’ll cover more about that below. Pre-rendering via Bing means the destination page will load almost instantaneously when you click through the first search result. Bing explained that over half of users click the first result, and using IE11’s pre-render tag can enhance the user experience by loading the destination page in the background, after the search is conducted.
A Quick Pre-Render Example:
If I search Bing for “Samsung” in IE11, the first result is the U.S. Samsung website. When clicking through to the website, the first page loads immediately without any delay (including all webpage assets, like images, scripts, etc.) Checking the Bing search results page reveals that Bing was using pre-render for the Samsung website homepage. You can see this via the source code. See the screenshots below.
Checking the source code reveals Bing is pre-rendering the U.S. Samsung homepage:
Yes, Google Has Been Doing This With “Instant Pages”
In case you were wondering, Google has been accomplishing this with “Instant Pages” in Chrome since 2011, but it’s good to see Bing roll out pre-rendering as well. My guess is you’ve experienced the power of pre-rendering without even realizing it. When Bing and Google have high confidence that a user will click the first search result, they will use the pre-render tag to load the first result page in the background. Then upon clicking through, the page instantaneously displays. That means no waiting for large photos or graphics to load, scripts, etc. The page is just there.
Testing Bing’s Pre-Render in IE11
Once Bing rolled out pre-render via IE11, I began to test it across my systems. When it kicked in, the results were impressive. The first result page loaded as soon as I clicked through. I was off and running on the page immediately.
But when did Bing actually pre-render the page and why did some search results not spark Bing to pre-render content? Good questions, and I dug into the search results to find some answers.
Identifying Pre-rendering with Bing and IE11
During my testing, I began to notice a trend. Pre-rendering was only happening when sitelinks were provided for a given search result. So, if I searched for “apple ipad”, which Bing does not provide sitelinks for, then pre-rendering was not enabled. But if I searched for just “Apple”, and Bing did provide sitelinks, then pre-render was enabled. If I searched for “Acura”, sitelinks were provided for the branded search, and the first result was pre-rendered.
A Bing search for “Acura” yields sitelinks:
Checking the source code reveals Bing is pre-rendering the first search result for “Acura”:
A Bing search for “Derek Jeter” does not yield sitelinks:
Checking the source code reveals Bing is not pre-rendering the first search result for “Derek Jeter”:
So, Bing clearly needed high confidence that I would click through the first listing in order to use pre-render. In addition, there was a high correlation between sitelinks and the use of the pre-render tag. For example, “how to change oil” did not yield pre-rendering, “Derek Jeter” did not trigger pre-rendering, and “weather” did not trigger pre-rendering. But “Firefox” did trigger sitelinks and the use of pre-render.
How Can You Tell If Pre-Rendering is Taking Place
You need an eagle eye like me to know. Just kidding. :) I simply viewed the source code of the search result page to see if the pre-render tag was present. When it was, you could clearly see the “url0=” parameter and the value (which was the webpage that was being pre-rendered). You can see this in the screenshots listed above.
And for Chrome, you could check task manager and see if a page is being pre-rendered. It’s easy to do and will show you if the page is being pre-rendered and the file size.
Using Chrome’s Task Manager to view Pre-rendered Pages
How Marketers Can Use Pre-Render On Their Own Websites for CRO Today
Yes, you read that correctly. You can use pre-render on your own website to pre-load pages when you have high confidence that a user will navigate to that page. I’m wondering how many Conversion Rate Optimization (CRO) professionals have tried that out! Talk about speeding up the user experience for prospective customers.
Imagine pre-loading the top product page for a category, the first page of your checkout process, the lead generation form, etc. Pre-rendering content is supported by Chrome, IE11, and Firefox, so you can actually test this out today.
I’ve run some tests on my own and the pre-rendered pages load in a flash. But note, Chrome and IE11 support prerender, while Firefox supports prefetch. That’s important to know if you’re a developer or designer. Also, I believe you can combine prerender and prefetch in one link tag to support all three browsers, but I need to test it out in order to confirm the combination works. Regardless, I recommend testing out pre-rendering on your own site and pages to see how it works.
You can analyze visitor paths and determine pages that overwhelmingly lead to other pages. And when you have high confidence that a first page will lead to a second page, then implement the pre-render tag. Heck, split test this approach! Then determine if there was any lift in conversion based on using pre-render to speed up the conversion process.
Analyzing Behavior Flow in Google Analytics to Identify “Connected Pages”:
An Example of Using Pre-Render
Let’s say you had a killer landing page that leads to several other pages containing supporting content. One of those pages includes a number of testimonials from customers, and you notice that a high percentage of users click through to that page from the initial landing page. Based on what I explained earlier, you want to quicken the load time for that second page by using pre-render. Your hope is that getting users to that page as quickly as possible can help break down a barrier to conversion, and hopefully lead to more sales.
All that you would need to do is to include the following line of code in the head of the first document:
<link rel=”prerender” href=”http://www.yourdomain.com/some-page-here.htm” >
Note, that will work in Chrome and IE11. If you combine prerender with prefetch, then I believe that will work across Chrome, IE11, and Firefox.
When users visit the landing page, the second page will load in the background. When they click the link to visit the page, that page will display instantaneously. Awesome.
Summary – Pre-Render is Not Just For Search Engines
With the release of IE11, Bing is starting to pre-render pages in the background when it has high confidence you will click the first search result. And Google has been doing the same with “Instant Pages” since 2011. Pre-rendering aims to enhance the user experience by displaying pages extremely quickly upon click-through.
But pre-render is not just for search engines. As I demonstrated above, you can use the technique on your own pages to reduce a barrier to conversion (the speed at which key pages display for users on your website). You just need to determine which pages users visit most often from other key landing pages, and then implement the pre-render tag. And you can start today. Happy pre-rendering. :)
GG