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.
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.
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.
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 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?