Thoughts on how to speed up webpages for IE7

[Cogman]

I thought I might as well record this here for those poor souls that have to support this legacy browser because their clientele/coworkers are too stubborn or unwilling to upgrade their browsers.

First, let me start off by saying that many of the tips here that can positively affect IE7 will generally have no effect/a negative effect on Chrome, firefix, and IE8,9, and 10... Such is life.

Javascript
There are several little javascript tidbits that I ended up running into. Here are a few

• Callback functions in any form are slow.. Replace them with a for/while loop where ever possible
• If using Jquery, use .live() instead of binding values with .bind or .click or whatever it may be.
• Cache everything all the time. If you are going to access an element more than once or that elements location does not change, then store it somewhere like a global variable. Refinding elements can be expensive.
• Prefer finding elements by ID whenever possible. When looking for elements, try and find an element by ID which contains the elements you are searching for and then using that element to find the ones you want.
• Javascript CAN actually make your webpage run faster than raw HTML (more on this later).
• Even though loading stuff with javascript later might be slower than just loading it all at once. You can get a better user experience by loading late instead. (tricking your user into thinking the page is completely loaded.)
• <script defer="defer"> signals to the browser to keep on rendering and not to execute the javascript until that is done. This allows for quicker loading times.
• It is MUCH quicker in IE7 to concatenate a string by pushing each element to be concatenated into an array and later joining that array. += and + are stupidly slow in IE7.
• Math is your friend. If you can find an element on your page using some nifty math formula, use the nifty math formula. Using .offset() stuff is often slower than the straight forward math computation as the math generally doesn't need to go out and find the element it is getting the offset for.
• Looking at element attributes is slow in javascript. If possible, create and array, cache, or whatever and record whatever you need in that instead of relying on the information that is stored in the element attributes.

CSS

• The more selectors you have, the slower your page will be. Remove unnecessary selectors whenever possible. If it is a short, one liner, consider making the page ugly and putting a style="whatever" tag in the elements affected by the style tag. This renders much quicker.
• Interestingly, .ClassName is faster than div.className... yeah, weird, I know.
• Like the selectors in jquery, if possible, doing something like #item .subItem will be faster than .subitem
• Running your CSS through one of those compressors actually makes a difference in how fast IE renders.. silly, I know.

HTML

• Some elements are quicker than others just by default... yeah, go figure.
• links to tag names such as <a href="#someVal"> are REALLY slow. Until recently I didn't realize how slow they were. I removed these and used some javascript wizardry to generate them on the fly. Doing this alone halved the loading time of my webpage. (this is where javascript can actually make a webpage quicker in IE).
• The fewer elements you have, the better.
• IE in strict mode is STUPIDLY slow. Don't put a <!doctype> at the beginning of your page and don't include that handy meta tag which tells IE to use the newest version.. The essentially makes IE7 act like it is IE6, whatever, it renders MUCH quicker like this.
• As a result of this, you are going to have a lot of stuff that is broken in this quirks mode. Have fun trying to make them look halfway decent (while trying not to totally mess them up in competent browsers).
• Nesting elements in IE7 is slow. the fewer nests you have, the better.

General

• Compression is a mixed bag. It does increase loading times, but it also decreases transfer times. If the amount of time actually transmitting the thing is slowing your down, do compression.
• The fastest way to process a lot of data is to do it all at once. The problem is, people don't like looking at a white sheat of paper while the server is busy building the page. If possible, build your page in stages. don't do it line by line, but don't do it all and once either. Do it in chunks if at all possible (most languages don't even let you see what is going on, so this really isn't a big issue).
• Remember that joining a large array trick you used above to make IE7 faster? Yeah, don't use that everywhere. Perl concatinates faster using .= than it does doing a join of a large array.
• Did I mention that IE7 has a really crappy decompression algorithm? Well, it does. Other browser decrompress gzipped data almost as fast as they read the plain text. IE7 has notible overhead, however, when reading a gziped webpage... Again, look at your transfer speeds.
• conditional statements in loops can really bog down code. If possible, move the conditional statement outside of the loop and duplicate the loops with the changed code (yay ugly code!).
• Proccess as much as possible on the server and then let javascript do the rest. Avoid, whenever possible, having IE7 do any javascript processing on its own (it is REALLY slow).

Hopefully you are never in the position where this stuff is actually helpful to you. The simplest solution that would have cut my work by a large degree would be having the holdouts switch over to non-sucky browsers.. They are all running vista, so they could easily upgrade to IE 9 or 10 or even 8 (which has about 2x the speed of 7). I can't get them to move, however. Because of this, they won't let me finish my tool until their prized browser can't handle it.

 

[hooflung]

The biggest speed up anyone could ever get without ever touching code is changing the max download connections from 2 to something like 6 - 10. Firefox and Chrome can DL 6 simultaneous asset files like .js, .css etc in parallel instead of making a lunch line.

Go to Start > Run
Enter "regedit" and hit ENTER
On the left, navigate to the following HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings folder by:
Click HKEY_CURRENT_USER, then
Software, then
Microsoft, then
Windows, then
CurrentVersion, then
Internet Settings
Internet Settings should be selected on the left column
Go to Edit > New > DWORD Value
A box should appear. Put the name as "MaxConnectionsPer1_0Server", without double quotes. Press Enter.
Double click the entry you just created, select Base as "Decimal" and type 10 under Value data
Go to Edit > New > DWORD Value
A box should appear. Put the name as "MaxConnectionsPerServer", without double quotes. Press Enter.
Double click the entry you just created, select Base as "Decimal" and type 10 under Value data
Close Registry Editor
Restart your system

 

[Cogman]

The biggest speed up anyone could ever get without ever touching code is changing the max download connections from 2 to something like 6 - 10. Firefox and Chrome can DL 6 simultaneous asset files like .js, .css etc in parallel instead of making a lunch line.

🙂 not going to happen for me. Updating IE was blasphemous for my audience. Touching the registry would be worse.

 

[hooflung]

Nothing you could ever do to code will make the biggest difference than adding 1 simple registry key. If the site loads slow, the UX has already set the stage for them then. That one simple registry key can turn IE7 into a bread winner. Especially if you use Modernizr and a shiv you can eek it out another year or two easy.

 

[beginner99]

🙂 not going to happen for me. Updating IE was blasphemous for my audience. Touching the registry would be worse.

make an exe file with c# or whatever that changes the registry in that way. Give it a nice name like "SpeedBooster.exe" and there you go.
If they don't know what it does, they can't complain. And obviously they aren't tech savy. ie7...

 

[Cogman]

Nothing you could ever do to code will make the biggest difference than adding 1 simple registry key. If the site loads slow, the UX has already set the stage for them then. That one simple registry key can turn IE7 into a bread winner. Especially if you use Modernizr and a shiv you can eek it out another year or two easy.

This is simply NOT true for all cases. I'm spitting out a lot of HTML, have no external images or files that are being loaded. The client is only loading 3 files (jquery, css, page javascript) and that is it. If you are loading a whole bunch of external objects, then this solution would be useful, but not in my case.

I did some testing to make sure. The page load times with and without the registry key are identical. So yes.. There are things you can do to your code to make the pages load faster. One simple registry key isn't the fix to everything.