Screencast Review: Design Fast Websites

I think it’s safe to say that we are smack-dab in the middle of a bloated Internet. Web sites are increasing in size and with that comes the extra waiting time for the page to load it’s content, graphics, CSS, JavaScript, Flash movies, etc., etc. It leads me to believe that designing a fast and efficient Web site has never been more important than it is today.

Here at iStudio we keep our page weight to an average size (250-300K), but by the time you factor in all the HTTP requests we make to our assets, you can see how things can slow down in a hurry. 

Nicole Sullivan, a Web performance expert, produced an interesting screencast called Design Fast Websites that goes over these issues and the steps that can be taken to improve the performance of a given Web site.

Nicole went over a series of best practices, nine in total. Some I had already been, well, practicing, while others were new to me.

  • Creating a component library. Splitting your design into building blocks that can be used on any page, instead of having each page act like it’s own island – thinking of it as a one-to-many relationship, so that you get a lot more mileage out of your code. Examples of building blocks could be buttons, headings, lists, etc.
  • Avoiding redundancy. Do we really need three similar versions of a rounded corner box, or does just using one type make more sense?
  • “Object-Oriented” Sprites. Sure, you can get a great performance boost by spriting all your images into one file, but what is the cost when it comes to maintenance? It makes more sense to sprite similar images together.
  • Instead of using hacks/scripts to fix the alpha-transparency issue in IE, save the images as 8-bit PNGs and then use Fireworks (there are other programs that do this, apparently – would appreciate which ones, if you know) to manually add in alpha-transparent pixels where needed.
  • Ensure that all images are optimized. There is a service called Smush It that will find the optimal compression algorithm for your image(s) and then spit back a report with the results, as well as a downloadable .ZIP with the optimized images.

In her words, this is all “super” important ;)

This entry was posted in Screencasts, Web Development and tagged , , , , , , . Bookmark the permalink.

Comments are closed.