breakthrough design

An amazing article written over at Yahoo on improving page load time, reducing server/page load, and essentially optimizing your website’s performance:

• Best Practices for Speeding Up Your Site

Special thanks to a great article over at Webjackalope:

15 Quick Ways to Shrink Page Load Time

Some Odds and Ends from the Article

Here are some quick tidbits that we have seen overlooked by developers in the past:

Check your Website Load Time

Run your pages through the Web Page Analyzer for oodles of load time tips.

Include the Height & Width in Images

This is important for page load time – allowing the browser to render the page, with image placeholders, rather than waiting for each individual image.

Broken paths and images can be a major load time killer

You can check all the images and scripts on your page in using firebug (see below).  Scan through all these mugs and delete anything that is broken, unnecessary, or ugly.

Firebug is Awesome

The firefox add-on Firebug is typically used for js and other code debugging, but it also contains a sick “Net” Console which displays each individual page element, broken links, paths, and load times for the individual elements.

Firebug Net Console

WordPress Users Only: WP Super Cache Plugin

Download and install the WP_Super_Cache plugin, the defacto standard for anyone who is serious about publishing.

Is there nothing this library can’t do, or can’t be added on to do??  Here we’ve stumbled on how this jquery plugin allows you to fade background colors, images, slide colors from the side/top & even at angles.

Get the jQuery Background Position Plugin

View some Background Transition Examples

Awesome.

The problem

If you’re dealing with absolutely or relatively positioned elements and you’re noticing that the z-index property doesn’t seem to work, you may be encountering yet another IE bug.  In certain cases, IE 6 especially will ignore the z-index property of elements whose parents don’t have a z-index.

The Solution

The credit goes to Nathan Ostgard for his Position Relative, z-index IE Bug fix.  Just give your container, or parent element a z-index of any number.  We added:

z-index:1

UPDATE:  Try the Position-Relative Z-index Bug Fix to see if that clears up your issue first.  It’s worked for us.

Are you or anyone you know (who’s up to our high standards of geekery), ever encountered any of these issues?

• No matter how high you set the z-index of your absolutely or relatively positioned element, it still displays under:
  • A <select> box
  • A flash movie
  • A Java applet
  • A SIFR headline

* Also have you noticed how this is yet another seemingly exclusive IE issue??  Are you surprised?  Do you want to buy us a beer?

Internet Explorer: A browser or a sweaty toothed madman?

Good question.

The Solution

It is important to note that the SIFR, and flash movies can be made to display behind elements by setting the wmode parameter.  However, sometimes this doesn’t seem to work in IE, especially IE6 (We were amazed there).  There is another workaround, which involves iFrames: which always display above everything in IE.  Therefore, there are some great scripts showing how to create these iframe shims on the fly and insert them behind your menu, or absolutely positioned element.

Us being industrius decided to use jQuery to create these shims onload and dynamically insert them.

Then, us being lazy, decided to search for something already in existence.

Low and behold, the jQuery bgiframe plugin.  How I love thee jQuery.