: Effective methods of reducing bandwidth (and thus page load times)? What are the most effective methods when it comes to reducing the amount of bandwidth a website needs to render a page? Aggressive

@Fox8124981

Google has outlined and explained their recommendations to best Minimize Payload Size. They include the following techniques:


Enable compression
Remove unused CSS
Minify JavaScript
Minify CSS
Minify HTML
Defer loading of JavaScript
Optimize images
Serve scaled images
Serve resources from a consistent URL


These suggestions are a part of their open-source Firefox/Firebug add-on project called Page Speed. Similar to Yahoo!'s YSlow plugin. The actual Page Speed add-on will check for many more optimizations than that list explains in detail. Instructions for Using Page Speed are also presented.

Yahoo!'s Best Practices for Speeding Up Your Website identify a similar set of best-practices:


Minimize HTTP Requests
Use a Content Delivery Network
Add an Expires or a Cache-Control Header
Gzip Components
Put Stylesheets at the Top
Put Scripts at the Bottom
Avoid CSS Expressions
Make JavaScript and CSS External
Reduce DNS Lookups
…


(Yahoo!'s list is ~35 items long, no need to quote it in its entirety.)

Both YSlow (image link) and Page Speed (image link) will allow you to run tests on your pages, suggesting things that you can do and showing you what, of their recommendations, is already implemented.

Vote Up Vote Down

@Sent6035632

A few basic methods easily implementable by any website:


Compress your HTML, CSS and Javascript with deflate or gzip if the browser who made the request supports it.
Minify your javascript with Google Closure Compiler
Minify your css with YUI Compressor


A little more involved:


If a page or image is unlikely to change, tell the browser to cache it. Most web servers already do this for static files, so all you should have to do is add it to your dynamic scripts where possible.
Merge your CSS and JS files into a single one automatically. This is advantageous as it decreases the HTTP requests (which have overhead and which certain stupid browsers - and by that I mean Internet Explorer - limit by default 2 requests at a time per domain).
Move your static files (CSS, JS, images, etc) to a separate domain name. This causes cookie information not to be sent in the HTTP request.
Use sprites that are generated automatically. A sprite is a single image containing multiple icons or other small images; you then choose which image to show with the CSS background property. Example.

The advantage is that the client makes less HTTP requests (which have overhead).


I bolded "automatically" because if you are doing these things manually then it's definitely not worth it, and it makes code maintenance a nightmare. Usually doing it automatically means writing a custom script, which is why it's a "little more involved",

Vote Up Vote Down