David’s Web Development Blog

So you have your webpage.  And you have your visitors.  You’ve spent all your time trying to make a cool visual and interactive experience, but chances are you’re viewing your webpage mostly from the cache, and you never realize how slow your webpage is actually loading for everyone else, what with all of those images used in the layout.

Try deleting your browser cache and loading your page cold.  Kinda slow?  Here’s some things you can do to speed it up (many of these tips are from Yahoo developers):

1. Cache your dynamic webpages.

TONS of webpages these days are displayed dynamically, mostly from PHP-based webpages.  The classic setup is to have PHP fetch page data from a database, commonly MySQL.  So what’s the problem?  It’s slow.  It crashes when too many visitors try to access the database at the same time.

It’s a pity, too, since though these users are fetching “dynamic” content, most of them are actually fetching the same data.  In other words, data that might as well be a static HTML page until it’s updated again.  This is essentially a cache.  It works independently from the database, and thus and isn’t limited by its shortcomings.

If you run a blog using Wordpress, I recommend WP Super Cache (even though I’ve occasionally had some issues with it).

2. Use HTTP Compression (gzip)

Configure your server to gzip served components.  This GREATLY reduces the size of plain text content.  To use this in Apache, use mod_deflate.

3. Optimize images

Ooh, now we’re getting to the meat of it.  Unless you also host files or videos, images will be the largest part of your webpages.  As such, wouldn’t it be nice if there was a way to optimize them?  Well…

• For large images: Optimize using smush.it, which compresses images losslessly.  But sometimes it’s just not worth optimizing images, and in that case smush.it will let you know exactly how much space (or lack thereof) was saved during compression.
• For small images: consider using CSS Sprites.  To be honest, sprites are a pain in the neck to pull off, so try using an automator.  I hadn’t heard of webpage sprites until recently.  Think of this: you have 10 small icons that need to be loaded.  If they are separate images (traditional), there will be 10 separate requests to the server.  Instead, put them all into one file and position only the element you want with CSS.  The result?  Just one server request for 10 separate images.  Does anyone actually do this though?  Yes!  For one, Yahoo uses this for the navigation icons on their front page, and they pride themselves in having a fast load time.
• And if you’re planning on resizing content, resize it yourself.  You don’t want the user to download more than they have to, just to have their browser go ahead and downscale it after downloading.  I STILL see webpages with full-resolution photos used as thumbnails.  Stop doing this, people!
• Also, unless you want some sort of image animation, do use PNG instead of GIF.  Not only is it usually smaller and lossless, contrary to popular belief its transparency attribute is actually supported in all major browsers, including IE 6 (boo, hiss).  That is, if you’re using PNG8 with index transparency and not alpha transparency.

4. Minify Javascript and CSS (and maybe HTML?)

Once your Javascript and CSS is finalized and ready to go, use a minifier to remove at the very least extra unneeded spaces and comments.  The downside is you have to keep separate unminified versions that are actually readable by human eyes.  And they have to be reminified every time you make a change!

And if you’re adventurous enough, also minify your HTML.

5. Use YSlow for Firebug.

But take its advice with a grain of salt.  For instance, most small-time websites (including mine) don’t use a CDN (content distribution network), so don’t worry when you get handed that F grade.

6. Put your CSS at the top and Javascript at the bottom

Position matters.  Yahoo found that putting CSS at the top of the page, will give the appearance of the page loading faster.

Likewise, it found that putting Javascript at the bottom of the page forced the browser to first render content above it before calling the script.  Makes a lot more sense to render visual content before interactive content.

Or, if you want to get fancy, you can even…

7. Dynamically load Javascript

Putting Javascript at the bottom of the page should work, but if you want full control of when your scripts are loaded, you can load them dynamically.

For example, if you’re using the YUI framework, the only Javascript you need to call from your HTML directly is YUI Loader, which acts as a seed and will dynamically load additional YUI components (as well as other CSS and JS components) after the page has finished loading.  Neat.

8. Dynamically load images “below the fold”.

A working example of this is Yahoo! Shine.  Notice that the images load as you scroll down the page.  This is accomplished with the YUI Image Loader utility.

While it’s awesome for performance, for some reason I don’t find the effect annoying at all.  By its description I would expect to be annoyed by it.  But as long as the images load fast as I scroll, it’s actually sort of a positive reinforcement that the webpage is responding to my scrolling.  Weird.

9. Reduce requests by combining HTML, CSS, and Javascript (but only if you have TONS of visitors)

Experienced web developers will DEFINITELY balk at this one.  “But David, we’re supposed to keep everything separated!”  I know, I know!  It’s been stressed many times that web developers should separate their content (HTML) from their styling (CSS) and interaction (Javascript).  No inline styling, no inline scripts, etc, etc.

While this is good for maintaining your website and just plain good practice, I’m unsure if it really speeds up loading of your webpages.  What makes me unsure?  Take a look at the sourcecode of the Yahoo frontpage.  Other than looking like a complete mess, notice that there’s a LOT of inline CSS and Javascript.

Ok, by now it’s obvious I’m really familiar with all things Yahoo, so let me use another big example.  Check out the code on Google!  Same thing: inline CSS and scripts.

What gives?  Like my previous tip on using CSS image sprites, it’s always good when you can reduce server requests.  Especially for hugely popular sites that live and die on “uptime” and serving webpages fast.

But this is probably not so useful for the average Joe, where those extra requests are really not noticeable.  In that case, keep your CSS and Javascript separated from your HTML!

10. For PHP: use flush();

Another trick that Yahoo pioneered.  By default, PHP will only send your browser data once it’s parsed together your complete webpage.  So while the header and footer content might already be rendered, it might take just a little bit longer to get the body content.  Using flush() will send to the browser all the content already rendered.  This will result in a faster response, so the user’s browser can start grabbing content requested by the outputted HTML.

Need more tips?  Check out these related articles:
Yahoo’s best practices for speeding up webpages
YUI Blog: Image Optimization (4-part series written by Stoyan Stefanov)
20 Tips and Tricks to Speed-Up Your Wordpress Blog
25 Ways to Speed Up your Website

Know a useful tip that’s not listed?  Leave a comment below!