Enabling compression on your web server can reduce the latency and load time of your web pages enormously. Compression reduces the size of the web pages thus reducing the download time of the webpage. It also helps to reduce the bandwidth used by the server and increase the web server capacity.
You can easily enable compression on your web server, by modifying the server configuration files. If you are on WordPress or any other similar platforms, there are several plugins that will allow you to enable this quite easily as well. This post is not about how to enable compression, but some of the related actions that will allow you to get the most out of compression.
There are several things to keep in mind when enabling compression on your web server.
1. Compress Text Files: You mostly want to compress only the files that are served as text. These include the HTML, JS, CSS and other language files. Most images and multi-media files such JPG, avi, mp4 and PNG are already in a compressed format. You do not need to re-compress them, and sometimes compressing then again only makes it larger.
If it is the image files that is increasing your total page size, then you can find other ways to optimize and find the best size for your image files to reduce the overall page size. You can use an image editing software to reduce the image size as well.
2. Verify Compression: Verify that compression is enabled and is working on your website. You can verify your website by using one of the several tools that are available online, such as Page Speed Services, Pingdom or Check Gzip compression. etc
3. Proxy Servers: You need to be careful if you are using proxy servers or is behind a proxy server when testing. Some proxy servers will uncompress content at the proxy before delivering to the client. This is not a problem, but you just need to be aware of it… if and when you do find that content is not compressed when served to your browser.
4. Older Browsers: Sometimes, the older browsers might have some issues with handling compressed files. This is few and far in between, so don’t worry about it. All and most modern web browsers support this by default. Also, if a browser does not support it and advertises it correctly, then the web server will end up sending the uncompressed version anyway.
5. File Size: Compressing content on the fly does take some CPU load and processing resources. So, it mostly makes sense only when your HTML (and the referenced files) is above a threshold size to make the compression and uncompression processes worthwhile. Make sure that the resources you compress are at least 250 bytes or larger to get the best results. This is not a hard and fast rule, but smaller files will not compress by much and the resources spend on compressing them is not worth it.
The are several things that can be done to ensure that Gzip works optimally. Most compression techniques work best when the content that is being compressed follow certain patterns, such as alphabetization for example. Being able to detect more text and character patterns also help with better compression ratios. In order to best achieve this you can follow certain easy techniques when coding your files:
The general idea is to use as few characters as possible in the entire file content and also to improve the probability of creating more repeatable character patterns. It is never a good idea to perform such optimization on the textual or visual content in the page. The following optimization is meant for the code…mostly dealing with HTML, JS and CSS.
1. Case sensitivity: HTML and most web programming languages are case insensitive. This means body, Body and BODY all mean the same thing. Always try to use lower case characters as much as possible, especially within the tags, and also inside the HTML, JS and CSS files.
2. Quote consistency: Use quotes in tags only when necessary. When needed always try to use the same quotes, either double quotes or single quotes within the entire file. Sometimes, you will need to use both types of quotes, especially where you need quotes inside quotes, but generally you should be able to stick with just one type of quote.
4. Avoid White Spaces: Unless you plan to use some kind of plugin to minify your files before the compression process, avoid using unnecessary white spaces. While white spaces make the code readable and maintainable, it also adds to the overall size of the page. On a high traffic web site, every bit will count towards your bandwidth.
5. Alphabetize the attributes: Always specify the tag attributes in the same order. Mandatory attributes in the tags can all be specified first in alphabetical order, and then specify the rest of the attributes in the same order across all tags in the file. Alphabetizing the attributes will ensure that you are creating as much character patterns as possible.
For example, the href attribute in links (<a tag) is always mandatory and should always come first. Same goes for the src attribute in img tags. The other attributes such as alt, id, name etc can follow in alphabetical order. The same goes for other HTML tags.
Following all or most of the above suggestions will improve the overall compression ratio of the webpage. Furthurmore you can inline small JS and CSS files inside the HTML file, which will then be reduced using compression. This will not only reduce the overall size, but also save on multiple connections required for the files.