"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
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.
Andre shared a few important techniques to achieve good performance in animation-based applications.
He notes, that
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.