With IE10 and HTML5 Sites Loads 30% Faster in Standards Mode; Published Bubbles Demo Examining Dramatic Gains in JavaScript Execution in the Release Preview

"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. 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 […]

30% better site performance in IE10 with HTML5

"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. 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," posted Justin Garrett on Exlloring IE blog.

"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," Microsoft's Justin Garrett explains.

He said that they've worked with the site developers to change 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.

Garrett notes, that faster load times can also be generated by site designers updating their frameworks and libraries (see the table below How to update your site). He also said that some websites used webkit-based prefixed code made to run on Google's Chrome and Apple's Safari browsers, and also claims using other web standards that were the equivalent to webkit solved this issues.

Later in the post, he says, to 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

How to update your site

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

In other blog post, Andrew Miadowicz, Program Manager, JavaScript, discusssed the newly published Bubbles demo and examined how it takes advantage of dramatic gains in JavaScript execution the IE10 Release Preview.

Andre shared a few important techniques to achieve good performance in animation-based applications.

Bubbles

He notes, that

"The demo consists of a number of animated bubbles floating through space. At the core is a relatively simple JavaScript physics engine. On every animation frame, about 60 times per second, the physics engine recalculates the positions of all bubbles, adjusts the speed of each bubble by applying gravity, and computes collisions. All these computations involve intensive floating point math. Each bubble is represented on screen by a DOM image element to which a CSS transform is applied. The image is first translated around its origin, and then scaled dynamically to produce the effect of the bubble inflating. In JavaScript, every bubble is represented as an object with accessor properties, as introduced in ECMAScript 5.

Behind the floating bubbles is a large image, which starts off occluded by a fully opaque mask rendered in a <canvas> element. Whenever two bubbles collide, a portion of the occluding mask is removed by applying a Gaussian filter to the mask's opacity component to produce a diffuse transparency effect. This process also involves many floating point multiplications, which are performed on elements of Typed Arrays, if supported by the browser.

Over the floating bubbles rests a touch surface, which responds to touch input if supported by the running browser or mouse events if not. In response to touch simulated magnetic repulsion is applied to the floating bubbles scattering them around."

For more technical details, refer to this post.