which is the BEST way to optimise a web site for faster download without affecting my ranking how do I optimize my CSS file and images ?

2 answers

danwellman 5600

There are several key areas to consider when optimising a site for performance:

HTTP requests - this is the big one, you want as few HTTP requests as you can possibly have so if you have 5 stylesheets, for example, for different parts of the site you can merge all of these into one stylesheet and that reduces HTTP requests by 4. Same with JS files, the fewer JS files you link to, the faster the site will be

CSS files - As I said above, use as few stylesheets as possible. Also use something like the YUI compressor to compress stylesheets for faster download. Try and use the cascade as much as possible instead of giving every single element a class name and it's own set of styles.

JS files - as few as possible and compress them (again with something like YUI Compressor). JS will generally compress better than CSS because JS files will be minified (whitespace, line-breaks, single line comments etc are removed) and munged (variables and function names are reduced to single letters where possible to really get files size down, so 'myReallyLongVariableName' will be converted to 'a')

Images - Use an image compressor if the images are GIF or PNG to reduce file size. Use image sprites for all background images as this is great for reducing HTTP requests - if you can get 20 background images into a single file that will be a massive HTTP reduction which easily overweighs the increase in size of the single sprite file.

HTML - There's not a great deal you can do to minimise HTML files other than on the server by using GZIP to compress the files before they are served (most servers can be configured to do this on the fly), but generally use as few elements as possible to achive the desired effect, so instead of having 5 nested divs for a container to give it various background images or effects, can you reduce this to 2 containr images? If your pages are semantic then you'll probably already code like this anyway.

In general use the YSlow plugin for Firebug which tells you exactly which parts of your page need optimising.

Answered about 7 years ago by danwellman
  • +1 for thorough answer Andy Ford about 7 years ago

There are many things to consider, but the following will get you well on your way...

1) bundle and compress your CSS and JS

2) use sprite-based images wherever possible (and always optimize your images with the appropriate compression algorithm)

3) Use plain old semantic HTML (POSH) and ensure it validates to avoid rendering issues

4) implement server-side caching of dynamic content when possible (e.g. don't make your server work hard to generate a dynamic page for every request if the page only changes a couple times per day)

5) If your audience is widely distributed geographically, utilize a CDN (content delivery network) to get your assets closer to the end user

Answered about 7 years ago by Dwayne Anderson