I’ve been doing lots of research lately on efficiencies you can put in place on your website to make it more efficient from a load time perspective, which gives a better experience for your visitors.  The problem is none of the sources I’ve been reading from seem to want to put it all together in one place.  I’m hoping to do that here.  We’ll work from the ground up.  Here are some things that every user should be able to do, even in a shared hosting environment where you don’t have direct control over the server configuration.

One thing I will not be doing is giving Web Dev 101 instructions.  Even though any user should be able to do this, for some of the items, you should have a basic understanding of things such as what an .htaccess file is and basically how it works.  None of this is too terribly advanced however, so don’t worry too much if you’re still learning these things.

.htaccess
There are several items you can typically control with your .htaccess file to provide for a slip streamed experience when visiting your website:

Expires Headers:
In general, it’s fine to let the visitor cache your site.  By properly setting your content expiration, you can prevent the visitor from having to re-download content that their browser has already received:

<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresDefault "access plus 10 years"
</IfModule>

Gzip JavaScript and CSS:
With sites offering richer experiences these days, the number and size of the JavaScript and CSS files are starting to get unwieldy. Luckily it’s rather easy to compress these types of components, allowing them to be downloaded more quickly:

<IfModule mod_deflate.c>
  <FilesMatch "\.(js|css)$">
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>

Configure ETags:
Yahoo! probably does a better job explaining the ETag situation then I can. But the basics of it are that, especially in a scenario where multiple servers serve your content, the ETag check (which helps the browser figure out if an item is cached or not) can end up needlessly costing more time when requesting data. It’s fairly easy to turn off:

FileETag none

CSS
Minify CSS and use a <link> to include it at the TOP of the page: Minifying your CSS will reduce the overall file size allowing it to be more quickly downloaded. Basically the idea is to remove spaces/tabs/linebreaks. Browsers don’t need those things in order to interpret the files. So for instance, instead of having:

#my_wrapper {
    border: 1px solid #000;
    padding: 0px 10px;
    color: #FF0000;
}

You would instead have:

#my_wrapper {border: 1px solid #000; padding: 0px 10px; color #FF0000;}

Many stylings have shorthand versions you can make use of. For instance instead of:

#my_padding {padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px;}

This can be simplified to:

#my_padding {padding: 5px 10px 5px 10px;}

Actually, with the shorthand, you can take it one step further:

#my_padding {padding: 5px 10px;}

For the padding style, it basically works like this:

padding: 5px; /* Apply 5px to all 4 sides */
padding: 5px 10px; /* Apply 5px to top and bottom, 10px to right and left */
padding: 5px 10px 15px; /* Apply 5px to top, 10px to right and left, 15px to bottom */
padding: 5px 10px 15px 20px; /* 5px to top, 10px to right, 15px to bottom, 20px to left */

JavaScript
Minify JavaScript and include it at the BOTTOM of the page. JavaScript can notoriously slow down the loading of a page. Basically, if the browser complies with the standards, it can only request two items to parallel download from a site. By including it at the bottom of the page, the browser won’t start trying to fetch it until towards the end, allowing your page to be largely (if not completely) rendered. Minifying the JavaScript is largely the same idea as it is with CSS. There are also some tools to help minify your JavaScript online.

Images
Typically you’ll be presented with the option of saving images either as GIF or JPG. If you’re using a tool like Photoshop (which you probably should be), you can usually preview the image as both JPG or GIF. I’d highly recommend viewing it as both and look in the lower left of the Save for Web screen. It will tell you the size of the image you are previewing. You want to achieve a good balance between the quality of the image and the size of the file. It’s not too hard to do.

One thing worth mentioning is that if you have multiple background images, you might want to try putting them all in one file (assuming you don’t need it to endlessly repeat along the x or y axis). By doing this (and then hiding the portions of the image you don’t need in a particular area on the page) you lower the number of HTTP requests that the visitors browser needs to issue to get all your background images. This can decrease the page load time.

GIF Format:
GIF is a non-lossy storage format for images. Unfortunately it is limited to 256 colors, however can be a great format if the image you are wanting to serve to your visitors meets some basic criteria. Since it is non-lossy, the image will be viewed exactly as it was originally saved. It also supports transparency and animations. I’m not big on the animations part, but as a web developer, transparency in images is basically a necessity with some of the layouts we have to pull off at times. If you’re using Photoshop as mentioned above, you can experiment with adding or removing colors that will be available in the saved image, but I find Photoshop typically does a pretty good job on its own of determining the best palette to serve with the image.

JPG Format:
When you have more then 256 colors and need to really compress them down, you might have to go JPG. JPG supports millions of colors, making it good for photographs as an example. JPG’s should give you an option for Quality when saving them (usually in percentage points). Using Photoshop, you can play with different Quality settings and preview each. This has a lot to do with what I mentioned before where you’re wanting to achieve a balance between quality and size of the saved file.

Anyone have any other tips for efficiencies or see any corrections I need to make in my post? I would love to grow this post into a great resource for this kind of thing.