Get 30% better site performance in IE10 with HTML5

Get 30% better site performance in IE10 with HTML5

  • Comments 8
  • Likes

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.

8 Comments
You must be logged in to comment. Sign in or Join Now
  • vieya
    44 Posts

    IE 10 is nice and fast but the tabs are way too close and sharp. Not inviting at all. But seriously what about vista? Vista users get the slow sluggish IE 8 only to upgrade to the incomplete that is IE 9.

  • abm
    268 Posts

    Okay IE10 is my favorite browser, but where are the favorites in IE10-Metro?

    At least me and one more guy from Windows Live -- who developed Live Favorites -- miss WL favs. One way to make it right might be; answers.microsoft.com/.../c8c14caa-b187-4a3d-ad01-c2a0e3b02bb8.

    Keep doing the great work IE team!

  • abm
    268 Posts

    When the textarea is rendered in IE9, the undo and redo work unreliably. Same happens in rich text-editor. IE10 fixed this issue to 'some' extent.

    BUT when the rich-text editor is rendered in a popup, forget about undo and redo, be it IE10 or IE9, it will break down and sabotages the whole experience. I will give you TWO examples (plus one for Windows Phone's IE9):

    1- CS-Cart (a business application: shopping cart solution)

    Download trial: www.cs-cart.com/trial.html

    or

    Register for online demo: www.cs-cart.com/personal-demo.html

    Once you are logged-in, open Administrative panel > hover on Design (top-right corner) > click on Template editor > Double click basic > double click admin > click on styles.css > click edit (at the bottom of the page).

    ...and wait until the script loads completely. If the page freezes, recover the page and try again (that's what happened to me on IE10RP, Windows 8). Once the colored CSS code is displayed, try to scroll up/down and click on some code and try to edit it. You will see the reflection of text and some weird things happening like caret automagically changing its position once you press any arrow key or clicked somewhere on the code. There is NO way to edit the text successfully.

    Do the same in IE9 browser (in Windows 7). Then try it on FF, Chrome or any other non-IE browser.

    2- Windows Team Blog (windowsteamblog.com):

    Using IE9 browser (in Windows 7) with standard mode and IE10 RP (in Windows 8) with standard mode.

    Suppose me and Rodney are friends on Windows Team blog network. When I click on Rodney's name to see his profile page (windowsteamblog.com/.../rodneyej), under his picture, I see Start conversation link. Click on that link and the send-message popup will appear with rich-text-editor.

    Now, enter some text in subject and message. Click back and forth in Subject and message field. You will see the text-editor will stop getting focus.

    Then, try to send the message (click on start conversation) in IE9. Once the conversation is started click on Conversations on the top of the page and open the latest conversation you initiated. You will find out the message body is empty.

    To see more miracles, try to send same message on WindowsPhone IE9. (Its literally impossible!!).

    Speaking of Windows Phone IE9 and popups. I have an AT&T device. When I tap on Settings > About and tap the link under 'help contacts' (www.att.com/devicesupport), the page loads with a popup to select your device and there is NO way to successfully select the device and clear this step because everything in that popup is jagged, buttons unclickable and much more... If this is the situation with the device's carrier support homepage (the one present in phone's About screen), what should we expect from other RIAs? The same page works fine in iPhone, Android and even Symbian.

    There is lot of fuzziness when it comes to the behavior of IE with iframe-based rich-text editors and popups. Sometimes the layout is broken, sometimes the whole experience is cluttered, sometimes popup content is flickering/dancing with mouse movement, on WP sometimes popup is running away from you (you swipe down to see the popup and it will keeps running away downward) and since so forth. The text-editor developers still have to use 'hacks' to support even IE10. Compare it with FF and Chrome and having no-compromise approach, 'Nip the evil in the Bud' once forever!

    Thank you for listening.

  • Knarf
    2 Posts

    I do agree: IE 10 rocks, BUT: I am not going to install that unholy crap of mess you are calling user interface coming along with Windows 8 on my desktop, only to be able to use that version.

    Thank god there are enough comparable browsers around which I can use instead on Windows 7!

  • xpclient
    50 Posts

    Sadly IE is tied to Microsoft OS releases. I want my IE10 for Windows Vista SP2 but there isn't one.

  • w1ngnut
    25 Posts

    That's great news. Now, please make IE faster from a 'cold start' and also on tab management. This will add up a lot to the sensation of speed of the browser.

  • @PD, Standards Mode is the best way to support many modern browsers and progress towards writing same markup.  We recognize developers still have to support older browsers too.  I recommend that you use feature detection to support modern browsers.  You might also use browser detection to only support the older versions with your current code base too.

  • Why would I want to do this? Wouldn't this cause older browsers to not be able to render my site as fast as before?