Get 30% better site performance in IE10 with HTML5

Over the past few months, we’ve been helping developers get their sites ready for Internet Explorer 10. Like web standards, browsers evolve, and our approach to the browser continues to evolve. With IE10, our work with developers is focused on writing HTML5 & CSS3 code that works reliably in all modern browsers including Chrome, Firefox, and IE.

Not only do web standards help reduce the cost of development and the complexity of testing across browsers and devices, but it also can achieve some noticeable performance benefits. In fact, we found that sites in IE10 got an average of 30% better page load time when they switched to Standards Mode. The benefit is similar in IE9 too.

Standards Mode is the default rendering mode of all browsers and offers the best implementation of web standards that work the same in all browsers. In addition to Standards Mode, IE provides compatibility modes to keep web sites designed for old versions of IE working. This was particularly helpful in the past when it was a common practice to first detect a browser and then serve code meant only for it. But this is no longer necessary in many cases because the web standards code is displayed similarly in modern browsers including IE10 and 9 through Standards Mode. This new practice is commonly known as feature detection made popular in the tool Modernizr.

Better site performance can make a big impact on your users. Slow web page loading is a major factor in users abandoning a site, can reduce perceived site credibility, and affect product sales. You can learn how to get your site ready to run in Standards Mode below and on MSDN. It may mean changing a single line of code or a simple upgrade, and it can make a noticeable performance difference on your site too.

 

The Test

We observed page load performance for a sample of 50 top-ranked sites that were not presently rendering in Standards Mode. Then, in our own dev environment, we changed one or two lines of code (either the X-UA-Compatible declaration or the doctype) that forced the site to render Standards Mode instead of Compatibility Mode with IE8 or below. Here’s a sample of what we discovered when we measured page load again in IE10:

· 39% faster on HP.com (shopping)

· 33% faster on Shutterfly.com (lifestyle)

· 31% faster on UPS.com (logistics)

· 27% faster on Citibank.com (finance)

· 11% faster on CNN.com (news)

Why so much better? IE10 and IE9 were both designed for real world site performance – that is measuring all the parts in the browser together rather than looking at a single part in isolation. Having your site in Standard Mode impacts how quickly a page can load and how responsive it is because it can take full advantage of web standards through hardware acceleration, the Chakra JavaScript rendering engine, and the over 2000 other performance improvements. The result is that instant you first see web content in your browser.

 

How to update your site

In our sample of 50 sites, the fixes fell into three categories:

Problem

Solution

Code for older IE browsers is sent to modern browsers like IE10 and 9 (on 15 sites)

We changed the one or two lines of code (either the X-UA-Compatible declaration or the doctype) that forced the site to render like IE8 or below. Many sites had noticeable improvements immediately in the user experience because web standards were already available. The site only needed to tell the browser to expect Web Standards.  Then we retested the site. Some required minor code fixes, typically removing older code practices that is no longer supported as a web standards by modern browsers.

  1. Switch to Standards Mode and then declare a doctype that recognizes web standards
  2. Run Compat Inspector to remove code meant for older browsers

Upgrade your frameworks & libraries (on 30 sites)

We were surprised that the majority of compatibility problems were caused by the developer building blocks of the web. These also detect IE and then serve the older code intended for IE8 or below. Just like a browser, updates from our partners that create frameworks & libraries are shipped regularly. Periodically, all you need to do is upgrade to the latest.

  1. Upgrade jQuery and Modernizr to the latest version (or any others that you use)
  2. Compat Inspector will also detect outdated frameworks & recommend an upgrade

Webkit code instead of web standard (on 5 sites)

We found webkit prefixed code intended for Chrome and Safari browsers was used when an equivalent web standard was already available. This caused page layout problems or broken features in Firefox and IE.

  1. Use web standards like these, most that work without prefixes in all modern browsers
  2. Use vendor prefixes only when you need to

Measure the difference yourself

Use the F12 Developer Tools in IE10 or IE9 to test network performance in multiple rendering modes, including Standards:

  • Go to your site and press F12
  • On the Developer Tools menu, select Cache. Then, select Clear browser cache.
  • Click the Network tab. Then click Start Capturing. Then click Refresh.
  • When the page finishes loading, click Go to Detailed View.
  • On the Timings tab, note the DomContentLoaded (event) and Load (event) times.
  • Switch the Document Mode to IE9 Standards or IE10 Standards and repeat the test

Or for those more visual people, here’s how it looks:

image

Helping developers write cross-browser, cross-device code

Improving site performance through Standard Mode is just one of the many things we’re doing to help developers. We want see the problem of supporting older browsers get better – through standards body leadership and practical learning that developers they can have confidence in.

As IE10 continues towards the path to release, we continue to share a series of new ways we’re making the web an easier place for real web developers to build for.