Idle Hacking » Performance

CSS Performance tips and Internet Explorer

taf2 — Sat, 31 Jan 2009 18:34:20 +0000

I thought it might be useful to share some techniques I’ve started to adopt when building a website’s CSS. These range from reducing the number of requests to keeping it easy to develop for multiple browsers.

Performance topics:

Technique 1:
First know, your CSS less is always better. For example, a lot of times I find myself writing:

margin-left:0px;
margin-right:10px;
margin-top:5px;
margin-bottom:8px;

This can be converted to:

margin: 0px 10px 5px 8px; /* top, left, bottom, right */

Doing this can reduce the size of your CSS file, making it load faster.

Technique 2:
Use conditional comments to support IE a slightly modified approach to including a separate style sheet. Typically, you will see people import a completely new CSS file. For example, this is what blueprint suggests.

This works great, but IE takes a performance penalty, because it has to make 2 requests instead of one. Think about this for a second and it’s even worse when you consider IE 6 already limits the number of concurrent requests to 2. Let’s say your screen.css includes a graphic, either that image will be queued up behind the ie.css or ie.css will be queued up behind that graphic. Either, way it’ll degrade an already slowish browser. It’s great to want to focus on the new browsers, but consider your users for a minute and realize that they might not point the finger at the browser as you’d like and instead at you and your application. Keeping that in mind, we can deal with internet explorer and still provide an optimal experience to our users, by putting into use 2 features. One conditional comment, and two CSS selectors. If instead of including the second style sheet we copy the contents of ie.css into the bottom of screen.css, making the following changes:

/* ie.css */
body {text-align:center;}
.container {text-align:left;}
* html .ie .column {overflow-x:hidden;}
* html .ie legend {margin:-18px -8px 16px 0;padding:0;}
.ie ol {margin-left:2em;}
.ie sup {vertical-align:text-top;}
.ie sub {vertical-align:text-bottom;}
html>body .ie p code {*white-space:normal;}
.ie hr {margin:-8px auto 11px;}

Now each of the original IE specific rules are targeted at IE only. We have only one other issue to solve, how to include an “ie” class name in our DOM without exposing it to our other browsers. The solution: conditional comments.

  
    

     Your site content goes here

This adds the DOM elements .ie and .ie6, for internet explorer 6 and .ie for 7 and leaves them out for gecko, webkit, and opera. From this technique we got one less HTTP request and easier way to manage IE compatibility in our CSS documents.

Technique 3:
Improving IE CSS can be painful. One of the simplest additions to blueprint is to use zoom:1 effectively. First off, what is zoom:1? zoom is a property supported by IE that allows you to zoom an element. zoom:1 has the effect of giving the element layout, making it appear on the page. Generally, if you don’t see an element or region of your page after floating another element left or right. Zoom the elements parent will trigger it to reappear. Here’s what I add to my ie.css:

.ie div { zoom:1; }

overlapping io for mongrel-esi

taf2 — Wed, 04 Jun 2008 13:26:00 +0000

I’ve been doing a little work on mongrel-esi to improve it’s concurrency. Here’s a little test script I wrote to verify some of my thinking. The tricky part, is keeping all the bytes in the correct order, while still requesting as much as possible in parallel. Here’s my thinking at the moment.

# reading a file
# as we read and encounter 
# spawn a thread and simulate requesting, but continue parsing the file looking for more on the main thread
# tweak the sleep calls to get different behavior...
require 'thread'

# define a sample buffer here:
input_stream = %Q(
  hello there world

  

  some more bytes here

  

  and some more here
)

# lets read line by line

count = 0
output = []
back_buffer = []
lock = Mutex.new
in_request = false
requesting = []
last_out = 0

input_stream.split("\n").each do|line|
  if line.match(/
One obvious issue with this implementation is the number of threads per request is bounded by the response document.

Update: I've checked the above into svn, with a few updates

IE 6 image caching bug

taf2 — Sun, 29 Jan 2006 21:04:00 +0000

“Here’s the problem: Internet Explorer forgets to look into its own cache when inserting HTML via JavaScript DOM manipulation (read: if you use img tags or any tags with CSS background images, Internet Explorer will always try to redownload these images). Read the detailed account on this.

Microsoft says it’s designed that way. Well, Sure.

“There’s an other bug in Intenet Explorer (unrelated?) that causes caching of images in CSS only happen with relative paths, so never use background-image:url(/images/blah.png) but do a background-image:url(../images/blah.png), relative to the path your CSS file is in.”

It’s an older article, but hopefully has a little of something for everyone. –> Speaking loudly against IE is only in our interest as consumers and users of the web!

Update: More details about IE caching bug can be found here: http://www.ahinea.com/en/tech/ie-dhtml-image-caching.html