25 Ways to Speed Up your Website

By Justin Palmer - December 4th, 2007

Speed kills. In the case of website usability, the lack of speed kills. Many have erroneously assumed the advent of high speed internet connections would make website performance optimization irrelevant. On the contrary, it seems as internet connection speeds increase, users simply become more impatient and demand faster browsing. Below, some simple (and advanced) ways to speed up your site.

Before making any changes, I would recommend benchmarking your download time with WebSite Optimization's webpage optimization tool.

Image Optimizing Tips:

1. Compress .jpg and .gif images: If you use photoshop, always use the "Save for Web" feature. If you don't have access to PS, there's a ton of free image compressing freeware out there.
2. Compress or eliminate unnecessary Flash elements: In my opinion, flash is over-rated, slow, and buggy. It has it's benefits, but make sure you don't rely on it for navigation or other necessary site elements.
3. Don't Resize Images within HTML: Don't use the width or height attribute in the IMG tag to resize larger options. For example, if you resize an image that was originally 300 x 300 to 100 x 100, the user still has to download the full size one. Instead, use thumbnails.
4. Specify Image Dimensions: Don't leave the width or height attributes blank. By doing so, you'll slow down the browser rendering of the page, since it doesn't know how much space to give for each image.
5. Slice Your Images: Slicing doesn't actually reduce image size (in fact, it increases the overall size). However, it does increase the apparent load time by making each slice appear one at a time rather than one big image popping up after it downloads.
6. Avoid Too Many Slices: Don't use too much of a good thing. As mentioned above, each slice actually increases the total size. I would recommend using no more than 4 slices, unless you are dealing with a huge image.

Coding Tips

7. Use CSS instead of Images: Cascading style sheets can do more than you think. Many sites make effective use of CSS formatting and eliminate the need for excessive images. Even effective brand logos can be created with CSS. CSS Zen Garden has some examples of creative use of CSS.
8. Convert from Table to CSS based layout: Tables are ok for displaying data in columns and rows, but is grossly inefficient for designing web page layouts. By using DIV tags with CSS, you can cleanup your code extensively, which will reduce page load time and also offer SEO benefits.
9. Use External Style Sheets: Rather than formatting through embedded inline styles in pages or html elements, reference an external css files that the entire site can reference. The browser will cache this page on the first visit, so it won't need to download it repeatedly.
10. Use External Javascript: Simliar to above, put all of your JavaScript functions in an external file for caching benefits.
11. Remove Unnecessary White Space in HTML: Surprisingly, white space hogs
    a lot of disk space. Remove unnecessary space and other code clutter with this handy tool called HTML Tidy.
12. Use Shorthand CSS: Instead of putting each CSS attribute on its own line, use shorthand CSS to prevent extra line breaks in your external CSS file.
13. Use CSS Images instead of IMG tag: An easy way to speed up the rendering of an image is to simply call as a background of a div tag.
14. Use Relative Links: Removing the " http://www.yoursite.com " from the beginning of every link will shed some weight. Just be careful not to allow people to jump back and forth between secure and insecure pages, which will generate one of those annoying "insecure items" errors in the
    browser.
15. Specify the DocType: Pages that have the DocType specified tend to load faster than those that don't.

Server & Database Tips

16. Reduce Http requests from other sites: Try to eliminate connecting to other servers to retrive images, audio, or video. Each http:// connection only slows things down.
17. Don't Use Https://: Don't use secure pages if you don't have to. Connecting through secure http is about 3 times slower than regular http. Obviously, your checkout process needs to be secure, but your product pages most likely do not. In addition, make sure your navigation doesn't use relative links which forces users to flip flop between secure and non-secure pages.
18. Upgrade your Web Server: Just like that old PC you bought 5 years ago, web servers can go down hill and become outdated.
19. Use Gzip Compression to Reduce HTML Size: Gzip is great for compressing html code, however it does nothing for images, flash, or other embedded files. Many open source programs such as Wordpress and Joomla already support it.
20. Upgrade Server Memory: A boost in memory resources on your server can reduce processing time and greatly increase performance.
21. Upgrade your Database Server Hard Drive: The faster your server's hard drive is able to access data, the faster it can serve up files. A fast hard drive is especially important for your database server.
22. Separate Content and Database Servers: If you have a high traffic, database driven website, you can benefit by placing your content on one server and your database on another. In addition to the speed benefits, it is more secure.

Other Tips

23. Loading Progress Indicators: By letting users know that you are processing their request, you can assuage their impatient fears. This won't necessarily speed things up, but it will update them on the progress.
24. Use AJAX instead of Page Refreshes: Interacting with a web page is far different than interacting with your computer OS. Imagine if Windows XP had to refresh the whole screen ever time you perform an action like websites do? In the next few years, we will probably see more adoption of AJAX technology, which will make page refreshing uncessary.
25. Reduce Size & Number of Cookies: Each time a browser makes a request, cookies must be transmitted. Keep an eye on the total number and size of the cookies your site uses.