Handy stuff.

Couple more tips:-

For platform users, deactivate unwanted plugins/modules.

For VPS users, check out the Nginx web server, which is better than Apache or Lighttpd.

Many tx for this.

Looking to speed up your website? Try these tips….

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…

YSlow from Yahoo is a great tool for optimizing sites. http://developer.yahoo.com/yslow/ It requires Firefox and Firebug.

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 think you might be right on that one, I started the process of putting ip addresses in the html code but didn’t complete all of it.

rgds

Simon

Also where I have php content with the path of say a theme as ./themename/directory/randompic.jpg

can I replace this with my dedicated ip address so it becomes ?

xx.xx.xx.xx/themename/directory/randompic.jpg

thanks

Justin

I was looking for an explanation for the website performance w.r.t images located on same webserver (in local folder) vs. images located on external image server.

Each image causes HTTP request whether it is in local server or external server.

Now question is do we see any benefit of hosting all image on same server?

Any inputs?

Here are a few more:

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.

I’ll definately checkout the guide from Yahoo.

Typical scenario. Each menu tab is a separate graphic x7 with a hover effect image as well: 14 HTTP requests x .2 seconds = 2.8 seconds (this on even super fast connections)
PLUS download time of each image 14 x 3k’ish = 42k

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

I have TONS of performance tricks, but there is a great guide at Yahoo:
http://developer.yahoo.com/performance/

Also, install the YSlow plugin for Firebug
http://developer.yahoo.com/yslow/

I love this topic because it is often overlooked. Many people blame backend code for performance problems when it is often the front-end that is most noticeable by users. It is all perception.

When Disneyland says 30 minutes from this point in the line, they know it only takes 20. You get to the ride in 20 minutes and you think everything is sooo fast and you beat the system. Perception.