3

How do you enhance your websites load speed without killing the design and accessibility? File compression, CDN, Gzip? What are the best tools for doing so?

For example, Google has optimized their site without compromising the design. Also, many website can kill the purity of their images with compression.

Is there a way, more or lest best practice, to increase speed without compromising the design and accessibility?

Note: sorry for being so vague but I don't know how else to phrase this question.

7

Gzip is probably the most drastic thing you can do.
Making sure all you're css and js files are minimized helps. check that you are not loading js libraries or css that you do not need. Most users will cache these so after the first page it's not all that imprortant.

Other than that make sure caching is working properly, like not re-parsing a page for every request that doesn't need to be re-parsed. if nessasary anyways

  • 1
    What are the tools you use to do this? – Kevin Jul 19 '10 at 14:37
  • One thing to keep in mind with using Gzip, it can increase latency a bit, so if you're real issue is that you've got many individual files that are being loaded, it can make things a little worse in the latency dept. – mezmo Jul 20 '10 at 14:20
7

Pretty much all of Yahoo's Best Practices can be implemented without even touching the site design in any way. Minimize HTTP requests by combining all CSS into one file and all JS into one file. Use Gzip. Set good Expires headers.

These rules could affect the design:

  • Reduce the Number of DOM Elements - worth looking at, you should be able to reduce the HTML size while still keeping the design the same.
  • Minimize the Number of iframes - probably best to avoid these wherever possible anyway.
  • Optimize Images - you should optimize images where possible, but don't overdo it at the expense of your design.
1

More than just minifying the CSS/JS, combine them into one file for each format as much as you can. The fewer downloads, the better. If this is impossible, move them off to other domain names, either hosted on the same server or on a CDN.

Gzip, as said, is amazingly powerful.

Move your JS to the bottom of the document and make sure all the CSS is in the head. Avoid inline JS and CSS.

Cache the hell out of everything and set Expires headers and ETags.

0

I use caching in ASP.NET, and that can save a load of time by avoiding duplicate database calls, function calls and even pages.

0

Page Speed. This is the plugin from Google for FireBug. If you run it on your site it will tell you where you need to improve. It mostly follows the advice given by Yahoo's Best Practices, but it will tell you where you need to improve.

I've seen the greatest speed improvement in reducing the size of my images. To accomplish this you can use the "Save For Web & Devices" in Photoshop OR another good Mac program that can reduce your images is ImageOptim.

0

Along the lines of the Yahoo Best Practices (YBP) you may want to take a look at the YSlow Firefox Add-on. It will give you a quick rundown of how a site is doing in regards to the YBP.

0

I have written a detailed article on speed optimisation which you might find helpful.

http://www.elevatelocal.co.uk/blog/17-rules-of-speed-optimisation-0501511

0

Use a CDN for static files such as javascript, css and images. Both RackspaceCloud and Amazon have fairly cheap ones.

0
  • Reduce the number of HTTP requests to a minimum - e.g. make sure that you are using image sprites where you are able, do you have multiple javascript or css files loading for every page? Combine them into one
  • Are there redirects out there that you can eliminate?
  • Load stylesheets at the top of your document, javascript on the bottom
  • If your site is large, provide servers geographically close to your biggest userbase.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.