Increase Your Performance with Minification and Combination

Thinking about ways to increase your websites performance should always be in the back of your mind while designing and managing a website. A couple of easy ways to help out are: 1) Minifying your JavaScript and CSS, 2) Compressing your code, and 3) Combining as many files into one.

Minification is an important component to website performance. While using best practices to create JavaScript, CSS, and even HTML, there often tends to be a lot that is not required for a browser to read. Extra spacing, tabs, and new lines to make code easier to read. Comments that help organize thoughts and make modifications. Even specific bracket setups, all of these are not required for browsers to understand your JavaScript and CSS code, so why not strip out all of that data? Taking out all this data greatly improves your websites ability to download and stream code to a browser to be read. At the same time, your browser can skip over unneeded information and get right to action. This is something a tool such as YUI Compressor does for you. On upload or update, take the original and serve the minified versions to your users.

Compressing your minified JS and CSS takes another great step. Compressing is a very common technique these days and it could be said that it’s been almost completely mastered by the community. Basically, compression takes patterns of code and rewrites them in a simpler form based on number of occurrence. Example: in a file, reading patterns such as “OOOOOOOO” (simple example), why not create a code such as “O*8” and for any * sign, use a \*. This takes your 8 characters down to 3. A basic principal for compressing code. And as you can see above with jQuery, taking development code of 223KB down to 31KB makes it an easy decision. Imagine if you are hosting a jQuery server where everybody is pulling from your source. If you can decrease your files by 7 times, you’ll only need 1 server for the 7 you may have needed before.

Combining your scripts also increases your websites performance. The more files that you have, with several JS, CSS, and Image files, the longer it’s going to take to get all of your data. For each file, you require a new HTTP request. And for each HTTP request, you begin a new TCP/IP transaction which requires going through testing bandwidth over and over. If you combine your files into one JS, CSS, or Image file, you can cut down the number of streams and download quicker with a well established TCP/IP connection. JS and CSS files are easy to combine because they are just text. But you can also combine images using CSS sprites.

These are very common performance tips for running and maintaining your web servers and websites. Take a look at Yahoo’s best practice guide:

About Phillihp Harmon

I'm Phillihp. My name can be spelled the same way forwards and backwards, so can my posts... if you wish. I'm out here exploring, learning, and sharing what I find. This is more for fun and personal growth, I aim to be as consistent as possible, so check back daily!
This entry was posted in Hardware, HTML5/CSS3, Internet, JavaScript, Yahoo. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *