reduce page size

Question

Anyone know how I can reduce my page size while it's loading? Like anyway I can reduce my CSS file's size and Javascript file's size?

Answer 1

Do you mean bytes transferred? If so, you would use GZIP compression of the HTML. In Apache, use mod_deflate. There are also servlet filters out there.

Answer 2

YUI's Compressor is one option.

YSlow is decent for getting an idea as to why it's slow.

It does tend to make recommendations for large sites rather than small sites, so apply common sense.

Answer 3

• Gzip compression
• Minification
• Combining multiple requests into one

GZIP compression is effective on text-based responses such as stylesheets and HTML, but not images.

Minification is effective on CSS and Javascript (more so on Javascript). There are various solutions available depending on your language and framework. This obfuscates the code that is sent by removing whitespace and shortening identifier names where possible.

Combining multiple requests into one cuts down a lot on latency, even if it doesn't save much bandwidth. It results in a faster perceived load time for users. You can combine multiple CSS files into one, which is easy. With images, you can use a technique known as sprites.

Answer 4

w3compiler is a tool that will do exactly what you want.

Answer 5

There is a great book on this called High Performance Web Sites. It's an O'Reilly book that takes you through the various steps of client side performance upgrades. It covers the topics you suggest such as CSS and JS file sizes amongst other things.