Wednesday, June 23, 2010

Web SIte Performance: Optimal Page Structure Vs. Reality

Recently, I had the opportunity to talk about Steve Souders' web site performance work with some old friends. While attempting to hammer home the importance of the Souders' performance techniques, I failed to mention one VERY IMPORTANT thing...

It's NOT an all or nothing proposition.

Along with the ideal, there are two VERY important points that need to be conveyed:

1. Not ALL of the techniques need to be deployed at the same time in order to have an impact. Implementing just a few can have a dramatic effect. The more the merrier BUT, all or nothing is DEFINITELY NOT the goal.

2. The techniques are not biblical in stature. There are times when the ideal is simply incongruent with the required solution. For instance, the recipe for optimum performance and IDEAL page structure is:

  • 1 static HTML file

  • 1 css resource

  • 1 image resource

  • 1 js resource

Ideal Page Structure:

        <!-- 1 css resource -->
        <link rel="stylesheet" href="[EXTERNAL_PATH]">
        <div id="container">
            <!-- begin content -->

            <!-- 1 image resource (to be used as sprite) -->
            <img src="[EXTERNAL_PATH]">

            <!-- end content -->

        <!-- 1 js resource -->
        <script src="[EXTERNAL_PATH]"></script>

        <!-- embedded js if required -->
        <script language="javascript">
            your.thing = new your.constructor({
                name1: value1,
                name1: value2

HOWEVER, while this may be the ideal, sometimes, you simply can't get down to a single resource request because of solution requirements. Case in point - if you need to add Google Analytics to your page, you're NOT going to hit the ideal - you're going to have more than 1 js resource.

So, in closing, the idea should always be to strive for the ideal and get as close as possible. Very simply put, taking 10 js requests down to 8 is a GREAT start. Don't skip it because you can't get 10 down to 1.

No comments:

Post a Comment