Back to School – HTML Style
It is that time of year, when back to school is on every parent’s mind. They run to hundreds of sales to make sure that their kids are properly outfitted with pencils, paper, folders, backpacks, and clothes for school. Then on the first day of school, they make sure that lunch is ready and the school bag is all correctly packed for sending junior out to the bus. This is all to help their child be ready and confident for a new year.
creative commons image via flickr
Are you doing the same careful preparation for your mobile app/website files? Are the files being sent from your server being cared for with the same attention as when you send your kids off to school? Let’s take a quick look at how you can “pack your app’s backpack” for the trip to your customers device.
So, you have some HTML and you want to send it to your customers as efficiently as possible. How can you go about doing that? Let’s start with this XML file (It is ~ 40KB). I captured this data with ARO, and I have blurred out identifying details:
This file was sent using Gzip compression. That is a great way to reduce file size (and squeeze it into the backpack). The Gzipped file size is 8.6KB.
However, I think we can still do better. Even looking at the blurred out version of this file, you can see lots of formatting and whitespace. Using Minification (the removal of comments and whitespace) makes the XML harder to read as a human, but it is just as easy for the computer. So, this is an easy way to pull space. Using a free Minifier on the web (your tool chain probably has Minification built-in, so please just turn it on!) the page drops from 40KB to 11KB.
The minified file is much denser – with zero whitespace:
If I place this minified file on a server that supports Gzip, now the file is 639 bytes on the wire:
In this case, the developer has a great start using Gzip (40 KB to 8.6 KB 79% reduction). By adding Minification, we get to a 98.5% smaller file. This allows for more files to be sent per packet and an overall faster experience for your customers!
There is one more thing to think about when sending this data to your customers. In HTTP 1.1, the headers you use are not compressed, so there is a bit of overhead where these tools cannot offer help. Headers are essential, but try not to overflow them with data. For example, here are the headers for that original 8.6KB download:
We are doing ok until that 3rd cookie, that is 47KB of uncompressed text (I could not fit it all on the screen!). Not only is this data not Minified or compressed, but it is sent every time due to a lack of cache headers. The headers are larger than the uncomressed file, 550% larger than the gzipped file, and 6800% larger than the Minified file! This is the equivalent of placing a few extra bricks in the bottom of your child’s back to school backback.
In conclusion, treat your content the way you would treat your child’s backpack on the first day of school. Make sure that everything is neatly packed, and you are sure to make a great impression!