Compression of web content

Problem identification

First, we need to figure out which resources weight the most in order to get a sense of the kilobyte distribution. In the Firefox plug-in Web developer toolbar we can "view document size" to create a file size summary of documents, images, objects, scripts and style sheets. Their total size is calculated and shown, which allows us to determine if we have added the most value with the least amount of kilobytes possible—there is often room for improvement.

Images

Flash

Flash already produces compressed SWF files, so I won't discuss it here.

HTML

The compression of HTML markup allows other resources to start loading sooner, which reduces the response time and improves the initial user perception. A user that checks multiple pages of a website can notice an improvement this way. Google decide to omit the lengthy DOCTYPE to avoid adding unnecessary bytes with every user request. When they are thousands, this results in considerable bandwidth savings. There are many tools to compress HTML.

CSS

CSS is used on almost every website. Its syntax consists of selectors, properties and values. A design should use as few selectors as possible, because they slow down the page rendering. To eliminate some properties, a careful attention to the cascade is required. One possible approach is to define the selectors in the same sequence as their corresponding elements appear in the markup. This can prevent the addition of unnecessary code. The tool in the last paragraph also offers CSS compression. There are many other similar tools online, so test them and see which one suits you best.

JavaScript

As websites and apps become more similar, the median size of their scripts continues to rise. JavaScript has the problem of standard and non-standard method implementations, which leads to code duplication. Browser makers made different assumptions in the way they treat white space between nodes, how they attach events to elements and then propagate them through the DOM tree or how they allow for direct client-server communication.

PHP

I haven't used any PHP compressors yet. Maybe you have some ideas here.

Conclusion

We need to consider all these factors when we want to achieve good compression of our web content. It's wrong to avoid speaking about file size just because many people have fast internet connection. Many are still not so fortunate.

bit.ly/12szMEI