Speed Index, Performance Budget, Delivery Time, Oh My!

Speed Index, Performance Budget, Delivery Time, Oh My!

Posted by Rainey

I am currently thinking “redesign” for Today in Web Design and trying to consider it from all angles. One of these angles is speed. Speed is an important aspect of our work that we rarely consider seriously when designing. I would bet that most of us do our design work, do the coding work and then try to address speed at the tail end of our process. And, in a world of theme happy design, I would also be willing to bet that many folks do not consider speed at all.

I recently wrote a couple of articles about speeding up your website, SPEED UP MY WEBSITE, TURN OFF ETAGS and SET YOUR EXPIRES HEADERS, SPEED UP YOUR WEBSITE. Each of these address things that we can do after the design to speed up delivery time, but what can we do before? Tim Kadlec has a post, “Fast Enough,” that outlines goals, how to set and what to test. Mentioned in this post is the idea of Speed Index, which is the perceived speed of the page loading. The idea is load time is less important if you can get content up that a user can begin interacting with. The logical first step here is to determine what our performance budget should be.

So, Where Am I?

An important part of understanding where we need to go, is knowing where in the world we are. A good site for gaining understanding on this is webpagetest.org. Here we can see a waterfall view of the page load, a video of the site loading, thumbnails of the load progress and more.  The home view of this site falls down pretty hard in the visual test and doesn’t really show anything for about 5 seconds. I suspected this mostly because it loads javascript in the head. Yeah, I know, bad move. I made this theme a long time ago when I didn’t understand this was a no no. Another place this site can improve is loading fewer resources.  Each item takes only takes a fraction of a second to load, but these add up.


Determining where I should go

Ok, so my site takes about 5 seconds to load, depending on which page is loading. This is not to bad, but I am certain it can get better. But, how much faster should it be? I like Kadlec’s suggestion of 20% faster than our competition. So, in my case, I do not really have any competition to speak of.  But, there are plenty of similar sites out there that discuss web design.

Here are some speed details on the sites I chose (sorry I am not sharing which ones):

  • Site 1: 2.5 seconds – first readable 1.9 seconds
  • Site 2: 7.2 seconds – first readable 6.5 seconds
  • Site 3: 6.5 seconds – first readable 2 seconds
  • Site 4: 2.4 seconds – first readable 1.5 seconds

I also found that all of these sites load their javascript in the head which made me feel better and a bit surprised. While my actual load time falls in the middle of these sites, 3 visually load faster than mine. So, knowing this I want to be 20% faster than the fastest site above. I am going to shoot for an actual load time of 1.6 seconds and a visual load time of 1.2 seconds. Sounds aggressive right?


Designing for the speed

Now I know the goals and it is time to shoot for speed.  It is important to know how fast the site needs to be up front because this knowledge will affect design choices along the way. So here is my plan to increase the speed of this site.

  • Move javascript to the footer
  • Combine and minify all javascript.
  • Combine and minify all CSS.
  • Breakup the layout to use smaller images below the scroll.
  • Use a smaller or no background image.
  • Load fewer resources overall.

That’s it! My plan to speed up the load time of todayinwebdesign.com.  I hope sharing my thoughts on this process helps and I would love any insight you have about this.

Oh, that cool photo above is by Brandon Lim.

Like what you are reading? Subscribe to receive monthly tips & updates!

A Monthly Roundup of Articles and a Sweet Deal

Get the latest tips, tricks, tutorials and freebies in your inbox once a monthly.

Join our growing community of front-end web developers and designers. We are constantly publishing new industry tips, tricks and tutorials to help you take your game to the next level. We are also going to include a freebie or deal on something cool each month. Enter your email below and you will only receive this email once a month, nothing else.

Subscribe to our mailing list

* indicates required

Today in Web Design - hosting, Tutorials, Web Design