KISS: Optimizing the End-User Web Experience
I’m not a big candy guy, but there’s one chocolate treat I can’t pass up: the popular HERSHEY’S KISSES. On the off chance that you are reading this post from the comforts of a small cave, I should explain that KISSES are bite-sized, foil-wrapped milk chocolate candies. I’ve proven on several occasions that I can polish off a bowl of festive colored KISSES without remorse.
I was conducting a bit of performance testing and optimization the other day, when my mind turned to KISSES. I decided to take a break and read up on the world-famous candy over at my favorite website, Wikipedia.
It turns out that KISSES were introduced in the United States in 1907. The signature “plume” that emanates from the tip of a KISS is inserted as a part of an automated wrapping process at one of the Hershey’s factories. Good thing, too, considering that the company produces 80 million HERSHEY’S KISSES brand chocolates every day.
Now that’s a lot of chocolate.
With that many KISSES being produced every day, I’m certain that the good folks over at Hershey have worked hard to squeeze every delicious ounce of efficiency out of the manufacturing process. A cost overrun of even $0.001 per KISS would eventually add up to the GDP of a small city-state. (No offense, Monaco.)
This is what got me thinking about the KISS in the first place. Almost every website that I analyze has failed to take a Hershey’s manufacturing-style approach in its construction. I regularly find bloated and unnecessary web code, spurious server connections, and poorly performing 3rd party contributors.
Sure, taken at face value, a small website inefficiency looks about as sizable as a delectable drop of chocolate. But as Lucille Ball knows all too well, chocolates rolling off the assembly line can really add up quickly! Each inefficiency is added to the next until the entire end-user experience is put at risk. Multiply this across a high volume of web visits and it’s bye bye completed online orders, so long advertising dollars, hello escalating call center costs, buon giorno escalating infrastructure costs … oh, you get the point.
Check this out:
When I went back to my research, I figured I should visit the web home of HERSHEY’S KISSES. I was greeted by a very cool interactive Flash application depicting – what else – an animated assembly line. I decided to analyze one simple component of the website, its Cascading Style Sheet (CSS).
As of this writing, the site’s CSS stylesheet is an external reference located at:
http://www.hersheys.com/kisses/lib/css/styles1.css
I popped that URL into a free online optimization tool called Code Beautifier that analyzes stylesheets for any excessive notation or characters.
Within seconds, the tool pointed out that there may be an opportunity to slim down the chocolately stylesheet:
Input: 20.495KB, Output: 13.61KB, Compression Ratio: 33.6%(-6885 Bytes)
Using an even more aggressive compression algorithm, further gains appear to be possible:
Input: 20.495KB, Output: 12.531KB, Compression Ratio: 38.9%(-7964 Bytes)
Now ~8KB doesn’t sound like a lot, but across thousands or even millions of hits, every little bit can add up. Plus, most websites would benefit from multiple optimization techniques that collectively could speed things up.
There’s an undeniable link between web performance and user experience/behavior. If we want to wring every bit of potential out of each user visit, we need to wring every bit of performance out of our web applications. If you’re a web developer, use a few of the myriad of available tools to diagnose and optimize web performance. If you’re a marketer or businessperson, ensure that your techie counterparts are doing everything they can to keep things moving. Sadly, many website owners and the businesspeople who count on these critical web apps don’t even realize there’s a better way.
If you’re just not sure where to begin, let me know. I realize this topic can be confusing and a bit overwhelming at first. If you’re really desperate, lay out a fresh bowl of HERSHEY’S KISSES and I’ll be right over.