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.
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)
How to update your site
In our sample of 50 sites, the fixes fell into three categories:
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.
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.
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.
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:
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.