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, I’ve gathered some simple (and advanced) ways to speed up your site.

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.

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.

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.

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.

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

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.

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.

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.

Use External Javascript: Simliar to above, put all of your JavaScript functions in an external file for caching benefits.

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.

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.

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.

Specify the DocType: Pages that have the DocType specified tend to load faster than those that don’t.

Server & Database Tips

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.

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.

Upgrade your Web Server: Just like that old PC you bought 5 years ago, web servers can go down hill and become outdated.

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.

Upgrade Server Memory: A boost in memory resources on your server can reduce processing time and greatly increase performance.

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.

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

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.

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.

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.

I hope you found these tips helpful. Be sure to drop a comment if you have any more ideas. Like these 25 tips? Here’s 192 more.

27 Responses to “25 Ways to Speed Up your Website” by Justin Palmer

Nice points Justin. I don’t agree with them all however. I have done extensive front-end performance tuning and the top cause for most slow downs is number of HTTP requests. That is why I do not suggest slicing images. Each HTTP request typically adds .2 seconds to page download time (increase that for HTTPS).

Switch that to a CSS sprite based menu using one image and visual placement = .2 seconds
PLUS download time of 1 image x 36k (there is data saved in each image that can be written just once – consolidation).

WAY FASTER!

The HTTP request issue is multiplied in different browsers. IE has a connection pool of 2, Firefox has 4. That means you can stream 2 requests from a single domain at one time. It is a browser default to protect the server.

HINT: get around this throttle by making the requests to different domains. ex. img1.domain.com and img2.domain.com and img3.domain.com

This will stream 6 items simultaneously. COOL.

Javascript will also be executed before rendering visuals if requested within the HEAD. Moving JS files to the bottom of the page (before the /HTML tag) REALLY speeds things up. This can be done in MOST but not all situations.

Other tips like using keep-alive can have major impact.

I use a tool called HTTPWatch [ http://httpwatch.com ] to really do deep forensics on what is happening (costs $300 or so for a single user).

1. Progressive jpgs appear to load faster to the user since it comes in phases.

2. Slicing an image into smaller images can be faster in some cases if for example your image is half black and the other half white (exaggeration), but the point is that the compression can be much much better in some cases; or instead, Photoshop has some tools to pick different export settings within a single image to get slightly better compression.

3. Caching and application optimization. Caching comes in lots of flavors, especially if you are daeling with a dynamic application. This may range from network level (squid), to server memory (memcache), to database caching (most sql programs have it), php and html caching, to much more. It depends often on your application design, so not something for hte average user, but this can mean the difference of 2, 3 or 4 times speed difference. Optimizing your application code can have similar effects same, and is best after you have done all teh easy things listed in teh article above.

About IP vs. domain – using IP will allow browser to avoid unnecessary DNS lookup in case images are hosted on separate domain.
It’s quite helpful to server to move hosting of static files into separate webserver like nginx or apache without php/cgi modules, even on same hardware, because lightened software cause less load on server.

I would also recommend to use more visual speedmeters to test you site, http://Site-Perf.com/ for example. It supports a lot of features like Keep-Alive and HTTP-Compression and is highly customizable

I agree with Jason here about the number of http requests for sliced images. Justin, you made a good point about that already with #16 “Reduce Http requests from other sites”. This was a HUGE issue we dealt with recently on a client’s site. In addition to loading files from their own domain, they were loading the HackerSafe logo from McAfee, analytics from Google and Raven SEO, etc etc.

I agree with Jason Billingsley as do server developers such as Microsoft. Most performance benefits can come from reducing the HTTP requests.

I just thought the Sprite idea may need a little more explanation:
The best way is to combine several images into a single file (called a Sprite) and then these can be placed on the page as background images and positioned with CSS.

Typical uses would included buttons in their various states (as an example create the button background with it’s hover state as a single image so when you hover you simply change the position of the background image, rather than downloading a new image on the fly), custom fonts can be put in one file and inserted using image replacement, and there are of course others…

Great, very good tips, i have one more.. If you wish loading whatever image as background, before loading other page you can put on it on some place principal page with a size of 1px width and heigth where doesn´t see it.

All this can be done automatically. And there has been developed open source tool to do all this stuff – Web Optimizer ( http://code.google.com/p/web-optimizator/ ). It includes gzip, merging, minify, CSS Sprites, data:URI, multiple hosts,unobtrusive logic, etc, etc.

agree with Jason here about the number of http requests for sliced images. Justin, you made a good point about that already with #16 “Reduce Http requests from other sites”. This was a HUGE issue we dealt with recently on a client’s site. In addition to loading files from their own domain, they were loading the HackerSafe logo from McAfee, analytics from Google and Raven SEO, etc etc.