How to make a website run faster?

Question

Hi

I'm into my first 3 months of web development and I have been dabbling with some server side scripting in the form of ColdFusion, along with some Javascript, JQuery and CSS.

I have read about CSS optimization and would like to know what are the other pertinent factors contributing to the better performance of a website. What all factors can a developer profile and optimize?

How much part does picking (or rather I should say recommending) a particular browser play in this performance hunt?

cheers

Answer 1

Install YSlow and Pagespeed plugins for Firefox. Then start looking at all of the ways your site is unoptimized. This will be much like trying to take a sip of water from a fire hydrant.

Using minified ( and possibly aggregated ) Javascript and CSS along with a good, healthy far-future-expires is a really good way to start.

• Don't forget to gzip.
• And use Etags.
• And put your CSS at the top of the document.
• And put the javascript at the end.
• And use separate domains for static resources.
• And avoid URL redirects.
• And remove duplicate javascript and CSS.

And... see what I mean about the fire hydrant!

Answer 2

With ColdFusion you will want to make sure your queries are being cached. Use query analyzer (if using mssql server) to make sure a slow loading page isn't the result of a bad query. On the database end you'll also want to ensure proper indexing.

A big factor in performance is how many HTTP requests are sent for images, files, etc. YSlow will show you this info. Its only available for firefox.

I'd recommend this book.

Answer 3

Check out these videos from Steve Souders (author of YSlow):

http://www.youtube.com/watch?v=aJGC0JSlpPE

http://www.youtube.com/watch?v=BTHvs3V8DBA

He's also got a couple of books out.

Answer 4

Just to sum the stuff up from above:

The speed of a website depends on a few things:

• Server
• Connection
• Client

And on each of this part you can do improvements.

Server: if you rely on a database, check if you queries are cached, and more importantly check if your data is cached. For example if on every page you get a menu from the database, then you can cache that result. In addition you can check your code and see if there is room for optimization. Also the hardware itself plays a role. If you are on a shared hosting plan, maybe the server is full of other not-optimized apps that take a toll on the server.

Connection: Here the YSlow and Pagespeed come in handy, as well as Fiddler. You can do some caching of static content (CSS and JS). Set their expire date far in the future. Using GZIP to make their contents smaller, and combining the static files helps to a certain extent. In addition maybe the server has a low bandwidth.

Client: if you do wacky javascript or have slow css selectors, this might hurt performance on the client. But this depends on the speed of the client's computer.

Answer 5

You shouldn't recommend any particular browser, but design your webpage to current standards with some fixes for older models, if necessary. From my perspective everything can have a speed impact, but CSS is the least important one and in real world examples the user will not notice this. In most cases a clear separation of html and style declarations will do the job. What really has an impact? First of all you can simply throw money at the problem by getting a better hosting contract (maybe a dedicated server). Another thing to improve the speed a website takes to load is to reduce the quality of your images and the usage of CSS-Sprites. Very often on dynamic webpages the database is a bottleneck and therefore caching and a good database abstraction layer can improve things (PHP: PDO instead of simply using mysql()). GZip your output to the user. There are so much more things, but a lot of them are very language dependent..

I recommend the use of FireBug and loadimpact.com for testing.

Answer 6

Less files are more - CSS sprites may be something to consider. In my experience, you have to balance your CSS file between speed and maintainability - one rule more or less won't make the difference between night and day...

Answer 7

I'd recommend reading Best Practices for Speeding Up Your Web Site and all of the content on Yahoo!'s Exceptional Performance page.

If you like books, you may be interested in High Performance Websites (note that a lot of the content in this is in the Best Practices for Speeding Up Your Web Site article) and Even Faster Websites.

Here are a few of my favourite rules from Best Practices for Speeding Up Your Web Site:

• Minimize HTTP Requests
• Add an Expires or a Cache-Control Header
• Gzip Components
• Make JavaScript and CSS External
• Minify JavaScript and CSS

Also, smush.it is good for compressing images (which have a big impact on how fast a webpage loads).

As far as browsers go, Safari 4 claims it is "the world's fastest browser", and I can say that the Mac version is certainly nice and fast (not to mention elegant!). However, the above suggestions will make much more of a difference than which browser you're using.

Steve

Answer 8

If you have lots of javascript you might wanna use Javascript compression. Dojo provides one such tool SHRINKSAFE to compress your javascript. Find the link below: http://www.dojotoolkit.org/docs/shrinksafe

There is another tool open sourced by google called page speed, which can help you optimize the website performance. It was used internally before it was open sourced to everyone recently. http://google-code-updates.blogspot.com/2009/06/introducing-page-speed.html http://code.google.com/speed/page-speed/

Hope it helps.

Answer 9

Google is currently collecting all sorts of performance tips on their new 'Let's make the web faster'-page here: http://code.google.com/intl/de-CH/speed/articles/

FYI: Not all information on these pages are valid, particularily the PHP tips are way off.

Answer 10

There is a really great plugin for for Firefox called Dust-Me Selectors. It scans your css files and lets you find selectors that aren't used/have become redundant in your markup.

https://addons.mozilla.org/en-US/firefox/addon/5392

You should also be delivering your static content off a CDN. Parallel downloads of static files will speed up your page renders. A better explanation here: http://www.sitecheck.be/tips/speed-up-your-site-using-a-cdn/

Answer 11

For IE, see http://www.fiddler2.com/fiddler/Perf/ The new neXpert plugin for Fiddler (http://www.fiddler2.com/fiddler2/addons/nexpert.asp) offers features similar to those found in YSlow and PageSpeed.

Answer 12

The biggest problem I have is creating fast-running, beautifully designed pages with rich content. This is one thing that is extremely hard to do with today's technology.

Answer 13

A couple of very basic rules of performance testing:

• Performance means nothing if the program/web page/whatever is wrong.
• Do not try to improve performance without having a reliable form of measurement.
• You must profile your site/program/whatever to find out what is making things slow.
  • Corrolary: Do not just change things at random to see if things get better.