Adding X-UA-Compatible Efficiently

Properly structuring a page's markup is fundamental when optimizing for performance. You want to reduce the effects META tags, CSS and scripts have on the critical rendering path. If you have never heard of the critical rendering path check out this recent article explaining it and how it is important. In short you want to minimize the number of times the browser has to start the rendering cycle over. One trigger that causes Internet Explorer to rerun the rending cycle is when it encounters the X-UA-Compatible META tag.

The X-UA-Compatible tag is a directive developers can use to cause Internet Explorer to render using an older engine. The directive was originally introduced to allow enterprises to upgrade to newer Internet Explorer versions while they were planning to upgrade legacy applications to support modern standards. The directive has many positive and negative affects, one is how applying the X-UA-Compatible META tag affects performance.

The typical technique is to add an X-UA-Compatible META tag to the document's HEAD. This should be your last option as I will make clear later in the article. When using the X-UA-Compatible META tag you should place it as close to the top of the HEAD as possible. Placing the X-UA-Compatible tag lower in the HEAD causes Internet Explorer to restart the rendering cycle from the beginning using the designated engine. If you are using the X-UA-Compatible to designate 'Edge', which hopefully you are doing this should not trigger a restart. If you are designating an obsolete version of Internet Explorer then the rendering cycle is restarted. Placing the X-UA-Compatible tag at the top of the HEAD causes this restart as soon as possible, saving some valuable milliseconds.

The better way to tell Internet Explorer the X-UA-Compatible value is using an HTTP Response Header. The benefit is Internet Explorer knows what engine to use before any rendering occurs. In the ASP.NET stack this can be done in 2 places, the web.config and via the IIS administration tool. Of course using the IIS administration interface ultimately sets the web.config value.

ASP.NET custom HTTP headers can be defined in the web.config's system.webServer section. You can read more details on defining custom headers in the IIS documentation. Within the system.webServer configuration element add an httpProtocol selection. Within that section add a customHeaders section. Of course if you already have those sections you just need to add the actual headers.

Within the customHeaders section add an add element for each custom header. Below you will see how to add the X-UA-Compatible tag to the response headers. This will add the X-UA-Compatible directive in the response header which Internet Explorer will read before it begins evaluating and rending the page's markup. This improves the page's overall render time.

<configuration>
   <system.webServer>
      <httpProtocol>
         <customHeaders>
            <add name="X-UA-Compatible" value="IE=edge" />
         </customHeaders>
      </httpProtocol>
   </system.webServer>
</configuration>

If you have the ability to add the X-UA-Compatible response header in IIS you can do so either by editing the server's web.config or through the administration tool. In the administration tool you can add custom response headers by selecting the HTTP Response Headers icon.

Once you have selected it a list of custom response headers is displayed. You can add or remove these headers as needed. To add a new header select Add from the options to the right. A dialog is displayed, allowing you to add a header, like X-UA-Compatible.

If you must use use a X-UA-Compatible META tag include it as close to the top of the HEAD as possible. If you can include a custom X-UA-Compatible response header you should do that because it is even more efficient. The goal is to reduce or eliminate the number of times the browser has to start the critical rendering path over again, delaying the page's final rendering.

Share This Article With Your Friends!