IE Performance Tip: avoid repeating <img> tags
This tip is more for those users who have developed a sophisticated data-crunching interface to their app. On one screen, for simplicity, the app gives a long list of data, without pagination controls being created by the user (such as a “View All” feature). To keep it pretty, each line has a visual icon or some surrounding images. Sound familiar? For example, let’s say the list is created by a testing system, indicating which tests were passed and which failed. The list may look something like:
For this example, we’ve created a few lengthy files to measure IE’s rendering performance. They files may be downloaded from ie-img-performance.zip, and unzipped to your favorite static content server. Due to security zones and caching, IE’s behavior does change when loading these files directly from disk. Thus, it is recommended that the files be placed on a local server for the purposes of comparison.
In our example, the developer designed this report to include 10,000 items. We will use the example test file “test1-imgtags.html”. Each test resides within a HTML <div> tag, and within each of these is a <img> tag pointing to either our pass or fail icon. Opening the file over HTTP from IE 8, we can measure a few behaviors:
- File Size: 9.3 MB
- Time to render (uncached): 16.77 seconds
- Private memory used by iexplore.exe tab process: 199.3 MB
- Time to reload (using the refresh button): 24.5 seconds
It is very puzzling that the time to refresh the page takes longer than the time to load the page, especially noting that the cache is still valid, and the only network traffic is a HTTP 304 check.
Next, let’s try to optimize this page. In our optimized version, our CSS has been divided to include “testpass” and “testfail” types, which respectively describe a background image within each section. The relevant CSS is:
.testpass, .testfail {
background-color: #7F7F7F;
width: 400px;
}
.testpass {
background-image:url('bigcheck.png');
background-repeat: no-repeat;
padding-left: 66px;
height: 66px;
}
.testfail {
background-image:url('bigx.png');
background-repeat: no-repeat;
padding-left: 66px;
height: 66px;
}
Loading the test file “test2-divclasses.html” and repeating:
- File Size: 4.5 MB
- Time to render (uncached): 5.6 seconds
- Private memory used by iexplore.exe tab process: 109.8 MB
- Time to reload (using the refresh button): 5.6 seconds
So, using the CSS to style an entry with an appropriate image, instead of using an image tag gives us a 67% speed increase in IE’s rendering time on the initial download, and a 77% increase in rendering time on refresh.
Web designers may not find this data surprising: the benefits of using CSS are well sung. However, we still see many web developers creating rich reports filled with repetitive markup.
Some readers may be interested to know how we came across this behavior. For those familiar with Load Tester, you are aware that Load Tester has a powerful feature known as the Content View, which uses an IE renderer to show content as it appeared at certain points in time, such as how it was presented to a specific virtual user. During the development of this feature, we observed that the IE renderer would re-open an image from the saved cache file each time an <img> tag was encountered. This might only result in a single network resource download, but the bytes of the file would be re-requested and processed by the renderer each time an <img> tag was discovered. While we expect this behavior to change between IE versions and updates, we thought it was interesting to note just how much difference removing some <img> tags can make.
We hope this example has been interesting, and food for thought for those who find themselves creating data heavy reports in the future. If you have any comments or questions, just feel free to ask!
Happy Testing!
-Frank, Engineer at Web Performance