IE9 Performance Checklist

IE9 is a much better and faster browser than IE8. Microsoft really made a big step in closing the gap with Chrome and Firefox. If you, the web developer, do nothing, people who upgrade from IE8 to IE9 will *likely* have a faster experience.
However, when it comes to web performance, IE9 is different from IE8 in many ways and there are quite a few things that can actually hurt the user experience. So, if you care about giving your users an optimal experience, use this IE9 Performance Checklist to check/fix your site.

Please post a comment about any IE9 specific performance stuff I have not listed here and I will update this article. Txs!

Caching

Eric Lawrence wrote a great article about all caching related changes in IE9. This is packed with performance stuff and a must-read!
Eric covers the following topics: Extremely Long-Life Cache Headers, Vary Improvements, Redirect Caching, HTTPS Caching Improvements, Back/Forward Optimization and Heuristic Cache Improvements. My highlight has to do with the heuristic caching logic: "In earlier IE versions, the Automatic Heuristics were simple and only affected cached images, but IE9 improves the heuristics to match RFC2616's suggested behavior ...
If Internet Explorer 9 retrieves a cacheable resource which does not explicitly specify its freshness lifetime, a heuristic lifetime is calculated as follows:
max-age = (DownloadTime - LastModified) * 0.1
As a result of the improvement to heuristic caching, Internet Explorer 9 can perform far fewer conditional HTTP requests when reloading many pages."
Go read the full article: Caching Improvements in Internet Explorer 9

Parallel downloading

External JS and Images

One of the biggest performance issues in IE8 is that it will not start downloading images further down in the page until it finishes downloading, parsing and executing external JavaScript. This is fixed in IE9.

External CSS, inline JS and Images

In IE8, if there is an inline script block between a LINK tag and an IMG tag, the browser would not start downloading the image until the CSS was fully downloaded and the inline JS executed. How silly! Why not download the image in parallel with the CSS? IE9 does this and this alone can speed up pages significantly. View the Browserscope

@font-face

Update to Steve Souders' @font-face performance findings

Read Steve Souders' article on Frontend SPOF. It has very interesting findings on the performance impact of the placement of the @font-face declaration on page rendering in different browsers. Prior to that, Steve wrote another article back in 2009 about @font-face and performance.
The Frontend SPOF article was published on June 1, 2010 and Steve probably tested in IE7 and IE8. I wanted to know if his findings are still valid for IE9. I ran Steve's test pages through Webpagetest.org, comparing IE8 to IE9. My findings are in the little table below. You can click through to the videos on Webpagetest.

Test case IE8 IE9
Inlined @font-face Flash Flash
Stylesheet with @font-face Blank Flash
Script then @font-face Blank Flash
Blank = Nothing in the page is rendered – the entire page is blank.
Flash= DOM elements are rendered immediately, and then redrawn if necessary after the stylesheet or font has finished downloading.

It's clear that IE9 performs better in this area. In two cases, IE9 users will experience the FOUT and not stare at a blank screen while the font file is loading.

As Jake Archibald sums it up nicely in his little gist ... for best performance cross-browser, use @font-face like this:

WOFF format

IE9 supports the WOFF format for font files, older versions of IE - and IE9 - support the EOT format. Why send WOFF to IE9 and not EOT?
Well, WOFF files have GZIP compression built in, so your web server does not have to compress these on the fly and that saves server resources. And that is the only reason. WOFF is about the same file size as the EOT compressed. To make sure you serve WOFF files to IE9 and EOT files to older IE browsers, always use the most recent @font-face syntax from the Fontsquirrel @font-face generator. The syntax changes quite often, so be smart and follow Fontsquirrel on Twitter or the Fontspring blog.

Ethan's findings

Ethan Durham of Fontspring and Fontquirrel wrote a blog post on April 21 2011 about some IE9 specific issues with @font-face. They have to do with MIME types, IIS, the CSS syntax and the font-face declaration and what appears to be mod_security on Apache. Are you using @font-face? Read Ethan's article and test your site thoroughly in IE9. Yes, I consider files not being served at all or the wrong, bigger (EOT) file performance issues. Best Practices for Serving Webfonts to IE9

Navigation Timing

As early as during the Velocity 2010 conference (2011 edition is June 14-16: you should go!. Use code vel11tbb for 20% discount), Microsoft announced and showed IE9 as the first browser to support the W3C Navigation Timing proposal to provide performance information to developers at runtime. Several updates were made during development of IE9 and it now fully supports the Navigation Timing spec.
Read the full article on MSDN: http://blogs.msdn.com/b/ie/archive/2010/11/09/web-page-performance-in-a-standards-compliant-and-interoperable-way.aspx

Other stuff

Text/plain will not be MIME-sniffed

"In Internet Explorer 9's Browser Mode, documents delivered with a text/plain MIME type will not be MIME-sniffed to another type. Documents will render or download as plain text only." One of the consequences is that you cannot use OBJECT with text/plain MIME-type anymore as a 'trick' to preload JS and CSS files without executing.
Read more on MSDN: MIME-Handling Change: text/plain

Data URI

A page object like an image and font file can be embedded directly in the HTML by base64 encoding it into a data URI, basically turning it into a (long) string. Doing this avoids an extra HTTP request. IE8 had a 32 KB upper file size limit for the data URI. In IE9, the file size limit is 4 GB. Yes, that's right, 4 GB. Tip: don't use 4 GB images on the web.
Read more on MSDN: What's New in Internet Explorer 9 - DataURI Improvements

Hardware acceleration

What can I say? IE9 has hardware acceleration built in. It makes a huge difference on some web pages.
http://blogs.msdn.com/b/ie/archive/2010/04/07/a-closer-look-at-internet-explorer-9-hardware-acceleration-through-flying-images.aspx

Send stylesheets with text/css MIME type

"...for security and standards reasons, IE9 Standards Mode requires stylesheet responses have a text/css MIME type. If they do not, the browser will not attempt to load the response as a stylesheet. IE9 communicates this requirement to the server by specifying that it will only accept text/css responses when a HTTP request is made for a stylesheet." Read Eric Law's fine article: IE9 Standards Mode Accepts only text/css for stylesheets

Your feedback please!

I'm looking forward to receiving your tips, questions and remarks.
Leave your comment below (now comment), send me a message via Twitter or via email: aaron {at} aaronpeters {dot} nl.

Like it? Share it!

Comments