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.
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
External JS and Images
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
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.
|Stylesheet with @font-face||Blank||Flash|
|Script then @font-face||Blank||Flash|
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:
- Declare the font in an inline <style>
- Place it before any references to external stylesheets
- Place it before any <script> elements (external or inline)
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 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
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
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
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
What can I say? IE9 has hardware acceleration built in. It makes a huge difference on some web pages.
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!
Like it? Share it!