7 Important Performance Considerations

Sample Image

I was asked a few days ago about how much attention I pay to speed and performance when launching a new blog, like this one. The answer, of course, is that it really depends on the site. Obviously a site like TUTSPLUS (which I didn’t design or code) will require much more attention than a smaller personal blog like this. With that said, it’s always a best practice to follow a few guidelines. Here are a handful of things that I did.

1. Consider your Audience

This will vary from site to site. When designing, ask yourself about who your target audience is? What will they require? In my case, I guesstimated that the viewers will hold content above all else. As such, I set a goal of using zero images for this blog – nothing fancy. The quicker the page load, the higher the return ratio becomes. I didn’t quite meet my goal, though I kept it down to one or two images for the layout.

If interested, review Amazon’s stats on how page performance affects sales – it’s really quite surprising. Even an additional 500 milliseconds worth of load time can do serious damage. It’s hard to believe, but the numbers don’t lie.

2. Compress all CSS and JavaScript

Using services like CSS Compressor and Packer, you can decrease the size of your external CSS and JS files by 20-30%. This is a substantial savings that, surprisingly, not enough developers take advantage of.

Compression

The image above was taken from CSSDrive.com, which is what I used for this site.

3. Combine CSS and JS

This site uses Cufon for font replacement. I originally planned on using CSS3’s @font-face, however, I determined that this was still too risky, and not completely practical just yet. When setting up Cufon for a site, you’ll receive two files: the core JavaScript and the specific JS file for the font that you choose. Why add an additional HTTP request when you can simply combine those two files into one, and then compress?

The same holds true for your stylesheets. If you started out with, perhaps, a RESET, 960, and Styles.css stylesheet, why not combine them all into one just before deploying your final project? You turn three requests into one simply by copying and pasting.

Remember – fewer HTTP requests equals quicker page loads.

4. Take Advantage of Caching Plugins for your CMS

Truthfully, I’ve yet to do this tip on the site you’re viewing, only because I’m still ironing out some kinks. Nevertheless, you should absolutely consider doing this for own site. For WordPress – which this blog is built on – I’ll be using W3 Total Cache, which, incidentally, is the same plugin that the TUTS sites use.

If an article on your new blog happens to hit the front page of Digg, you’ll be VERY thankful that you installed this plugin.

5. Consider PHP Output Buffering

Rather than forcing your browser to display your site in bits and pieces as it loads, you can instead make it load the entire site as one chunk, and then output that for the user.

To do so, at the top of your document (in my case, header.php), add the following: 

<!DOCTYPE html>
<?php ob_start('ob_gzhandler'); ?>

Then, just below your closing <html> tag, add: 

<?php ob_end_flush(); ?>

This code essentially stores the page inside a variable, and then sends it to the browser once the entire page has loaded. For a full tutorial, refer to Output Buffering for Web Developers: A Beginner’s Guide from Dev-Tips.

It should be noted that, if you use this method, you don’t – at least to my knowledge – need to worry about pushing JS files to the bottom of your page to improve performance. Because it all gets loaded as one chunk, it’s no longer necessary at that point.

6. Can it Be Done Without Images

CSS is much more powerful than we give it credit for – especially with the release of recent browsers. Available to you are animations, transitions, rotations, etc. Granted, these won’t work in all browsers, but that’s okay!

A site does not need to look the same in every browser! Who cares if those corners aren’t rounded in IE6!

For example, look at the date information at the top of this posting (on the image). There are no images there. Instead, I’ve used a few spans along with CSS rotation (and an IE filter) to rotate the date 90 degrees. 

span.year{
  position: relative;
  -moz-transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Internet Explorer filters have been around for year and years – back to the IE6 days. However, we rarely use them, most likely due to the fact that they’re convoluted and hard to remember. So that code snippet above will grab a span element with a class of “year” and rotate it negative ninety degrees in Mozilla (Firefox), Webkit (Safari/Chrome), and Internet Explorer.

Date Example

The point is… don’t always resort to slicing out an image. When adding that “Sign Up Now!” button to your client’s site, ask yourself, “Do I really need an image for this?” Mayhap so, mayhap not.

7. Let Google Review Your Site

Google

Google recently released a “Page Speed” extension for Firefox that will automatically scan your site to detect performance issues that should be reviewed. Truthfully, it’s very tough to get a perfect score. With some sites, certain tasks simply aren’t possible – for example, when using WP plugins that automatically add scripts to the header or the footer. You won’t always have the option to combine those.

Having said that, I analyze my sites with this extension numerous times for each project and do my best! Most importantly, you need to be sure to combine scripts, compress files, set width and height values to your images (if possible), cache pages, move unimportant external scripts to the bottom of your HTML, etc.

Sound Off

This is a huge topic. What are your little tricks?

Comments

  1. Derek Herman said...

    Great article! An addition I would contribute is that when you have no other choice and must use images instead of CSS you have two options to speed up the site.

    First, use image sprites to reduce the http requests.

    Second, if you are not sure how to use sprites then optimize your images so they are smaller. Use a gif, png, or jpg at the proper time, don’t just use one type of image. Mix it up!

    posted on September 27, 2009

  2. Sergio said...

    This article was very useful, I already downloaded the w3 total cache plugin and I’m trying out the google page speed.

    posted on September 27, 2009

  3. admin said...

    @Derek – Yeah, good point. Also, specifying a specific width and height to images in your CSS file helps a bit with performance.

    posted on September 27, 2009

  4. Can Berkol said...

    We are using Yahoo’s YSlow (http://developer.yahoo.com/yslow/ to test the page speed).

    posted on September 27, 2009

  5. admin said...

    @Can – That’s definitely a good one too. :)

    posted on September 27, 2009

  6. Ihab Khattab said...

    very interesting topic Jeffrey

    my humble experience with this topic when I was designing WordPress theme for my friend I used wp-css & wp-js plugins they minify and gzip the content

    http://wordpress.org/extend/plugins/wp-js/

    http://wordpress.org/extend/plugins/wp-css/

    posted on September 27, 2009

  7. irmantas said...

    Very interesting topic, thanks for sharing :)

    posted on September 27, 2009

  8. Michael Irwin said...

    Another great entry! I love the new design by the way…

    Another suggestion… If using images on your site, resize them before uploading them. It saves on filesize transfer, and will save that little bit of time if the browser is trying to resize it to fit on the page.

    posted on September 28, 2009

  9. GaVrA said...

    I’m also using YSlow and it’s just silly how easy it is to make or break performance of web site… :) Thanks for tihs “Page Speed” add on, installing it asap!

    Regarding performance issues, i find it that the easiest thing to do is lower http requests if you use a lot of images for layout. Just look at what youtube is doing:

    http://s.ytimg.com/yt/img/master-vfl121679.png

    Brilliant!

    posted on September 28, 2009

  10. asmedrano said...

    Thanks for the post! Just came across your tutes on nettuts recently as I have been making my way into the PHP/Frontend world. I thought I was a flash only developer but have fallen in love with php/css etc.

    These are great tips, its a bit daunting tho how many best practices there are that im sure im not doing… is there a giant list somewhere? :D

    Im sure my css needs help and I can imagine how messed up my php must be :P
    Slowly but surely I suppose.

    posted on September 28, 2009

  11. KayRoseDesign said...

    Hey jeff, thanks for a great post – some really useful info in here, like i’d never heard of the page speed addon – thanks :)

    posted on September 29, 2009

  12. Matthew Aebersold said...

    Like this content. It’s full of great points that I rarely consider. Thank you for this!

    posted on September 29, 2009

  13. ichselbst said...

    nice, thanks…

    posted on September 29, 2009

  14. Mattia said...

    Another useful tool is Smush.it (http://developer.yahoo.com/yslow/smushit/).

    posted on September 29, 2009

  15. Matt Hill said...

    Very nice tip on the CSS rotation in IE — I wasn’t aware of those.

    As Gavra noted, CSS sprites are awesome too — surprised you didn’t mention those?

    posted on September 29, 2009

  16. 7 Performance Considerations http://jeff… « LinkJAMB said...

    [...] Performance Considerations http://jeffrey-way.com/html/7-important-performance-considerations/ [...]

    posted on September 29, 2009

  17. RobIII said...

    I would like to mention JSMin+ (http://crisp.tweakblogs.net/blog/1856/jsmin+-version-13.html); just because it’s worth taking a look at and take into consideration.

    posted on September 29, 2009

  18. RobIII said...

    Crap; I intended to post the Announcement link (which is more useful to people who are new to JSMin+). My bad. The URL ought to be: http://crisp.tweakblogs.net/blog/1665/a-new-javascript-minifier-jsmin+.html

    posted on September 29, 2009

  19. Jacobo said...

    I did’t know about the google plugin tks.

    posted on September 29, 2009

  20. Dan said...

    #5 is backwards. Using output buffering will slow page rendering because the browser has to wait for PHP to generate the entire page and sent it. If you start sending the page as quickly as possible the browser will start rendering it and it will appear to the user to load faster.

    It also has no impact in how JS is loaded. You still want JS at the bottom of the page.

    posted on September 29, 2009

  21. Aaron said...

    You can also use ajax to load the page a few images at a time when needed say. Say you have a image gallery that slides load the previous current and next image. when the user scrolls through your gallery then drop the image that rolls off this line up and use ajax load its replacement. This keeps you from loading 50 images you just load 3 or 4 at a time.

    posted on September 29, 2009

  22. Robert DeBoer said...

    Excellent article. It is amazing how easy it is to speed up your web site. Do you know of any good CSS/JS compressor software? I’ve been hunting around for something I can use offline, and can’t seem to find any good ones.

    posted on September 29, 2009

  23. Dienstag, 29.09.09 – Web Tweets | abtwittern said...

    [...] smashingmag: 7 Important Performance Considerations – –LINK– [...]

    posted on September 29, 2009

  24. eveevans said...

    great, I already use some of this tricks.
    You also can load libraries ( like javascript framework ) from the google server

    posted on September 29, 2009

  25. Keith Clark said...

    Something I notice lots of people overlook is using setting HTTP headers for caching on dynamic pages (.php .aspx etc.) to ensure the browser doesn’t download static content every request.

    An exmaple of this is, I’ve written my own css handler for .Net that opens a human readable stylesheet and strips out all the comments and whitespace on the fly. To increase speed and reduce server load it then caches the compressed file and returns it to the browser. The best speed improvment came when I set the HTTP headers to prevent the browser from requesting the CSS every time the visitor loaded a page on my site.

    posted on September 29, 2009

  26. Justin said...

    Great article, but I have a question.

    If you are merging all of your CSS/JS together and then compressing it, how do you keep updating simple and less time consuming? I don’t usually work with compression tools because it seems like that extra 20k of filesize i’m saving is not worth the effort for an easily updatable project.

    posted on September 29, 2009

  27. Links salvos de setembro 24, 2009 até setembro 29, 2009 « Thiago Moreira said...

    [...] Jeffrey Way » 7 Important Performance Considerations – I was asked a few days ago about how much attention I pay to speed and performance when launching a new blog, like this one. The answer, of course, is that it really depends on the site. Obviously a site like TUTSPLUS (which I didn’t design or code) will require much more attention than a smaller personal blog like this. With that said, it’s always a best practice to follow a few guidelines. Here are a handful of things that I did. [...]

    posted on September 29, 2009

  28. Ricardo said...

    DON’T use packer. It’s contradictory to recommend it in a performance improvemente list. The unpacking is left to the browser, which adds at least 200ms loading time on a regular computer.

    MINIFY Javascript instead, the file will be larger but will actually get smaller than the packed version when sent GZipped over http, and will have no loading overhead.

    posted on September 29, 2009

  29. admin said...

    @Ricardo – If this is true, I would definitely like to learn more.

    posted on September 29, 2009

  30. Brian Klepepr said...

    Great post but don’t forget the important use of Image sprites. I think this has saved me the most time especially in heavy visually designed sites.

    posted on September 29, 2009

  31. Meshach said...

    Excellent article, these points are often over-looked by new developers.

    posted on September 29, 2009

  32. Meshach said...

    @Jeffrey:

    Ricardo is right it seems, I did a quick google search and here is what I found:

    http://groups.google.com/group/jquery-en/browse_thread/thread/2353515cfdb834b8

    http://ajaxian.com/archives/pbwiki-javascript-testing

    posted on September 29, 2009

  33. graphicbeacon said...

    Some good points, especially the compressed css bit. I never knew you could rotate elements. The only problem im having is that the date is not rotating in my browser and its Firefox im viewing this page in right now.

    posted on September 29, 2009

  34. Steven Berkovitz said...

    There are also tools to optimize your images beyond what Photoshop provides. Optipng comes to mind for optimizing PNG images. http://optipng.sourceforge.net/pngtech/optipng.html

    posted on September 29, 2009

  35. admin said...

    How strange. Do you mind if I ask which version of Firefox you’re using? I’d like to get this fixed asap. :)

    posted on September 29, 2009

  36. links for 2009-09-30 | Yostivanich said...

    [...] every dayHomeAboutDisclaimerPortfoliolinks for 2009-09-302009 September 30by Delicious Blog PostingJef­frey Way » 7 Impor­tant Per­for­mance Considerations“I was asked a few days ago about how much atten­tion I pay to speed and per­for­mance when [...]

    posted on September 30, 2009

  37. Ricardo said...

    @admin A few more links on minifying vs packing:

    http://www.julienlecomte.net/blog/2007/08/13/
    http://ejohn.org/blog/library-loading-speed/
    http://stackoverflow.com/questions/883184/ways-to-compress-minify-javascript-files

    cheers

    posted on September 30, 2009

Leave a Reply