Information Technology Reference
In-Depth Information
importance of coding smarter; anddoing things such as using CSS3 to create fabulous
gradient effects, and custom web fonts (courtesy of Google's amazing web font
directory) instead of images or other “heavy” resources such as Flash movies. These
things end up helping your code load fast on a user's device.
Sure, we are on the cusp of having nationwide fourth generation mobile Internet
available to anyone who wants it, but in reality it does not matter how fast your carrier's
broadband service is since mobile networks suffer greatly from poor latency (the amount
of time it takes for your phone to communicate with the site or service you are trying to
load before data are transferred.) To help our code get to our user faster, and in turn
help relieve stress on our poor web servers, we will do something often referred to as
minifying our code. Minifying, or compressing, our code consists of running our CSS
and JavaScript files through an application or service that will take that code and
remove all of the line breaks and unneeded white spaces to make the end product a fair
bit smaller than it was before.
What Is Compression?
Let us once again take a look at the ever-popular jQuery framework that many web
developers use. As you can see in the Figure 13-1following, we have two versions of
the main jQuery library. One version of the script is uncompressed and comes in
weighing a massive 231KB, and another version has been compressed and went
through a round of obscurification, bringing the total weight down to a still high, but
more manageable 90KB. Opening up our JavaScript documents in a code editor
wecan see the difference betweenthe two files immediately. The development version
of jQuery, as seen in Figure 13-2, is formatted really nicely and has a bunch of really
helpful comments sprinkled throughout, while the smaller production-ready version of
jQuery almost looks like a weird alien language and is nearly impossible to understand.
Take a look at Figure 13-3 to get a better idea of to what I am referring. This is what
obscurifying code does. Not only are we taking away all of the line breaks and pretty
formatting, but here the code itself was shrunken and manipulated to obscure the code
and make it harder to understand.
