Want to make your website more sustainable? Minify its scripts.
When it comes to building sustainable websites, optimizing performance is key. Simply put, the faster a web page downloads to your laptop or mobile device, the less energy it uses. There are dozens of techniques for speeding up website performance. In this post, we’re going to talk about two of those techniques: minifying code and obfuscation, which works through a process called munging.
Sustainable Web Design: Minifying Code
Here is a recent comparison of the average bytes per page by content type for all websites in the Alexa Top 1,000,000 Sites from HTTP Archive. These snapshots were taken on April 1, 2012 and April 1, 2013.
As you can see, the amount of these two content types on web pages is on the rise with scripts increasing by an average of 50kb per page just over the past year.
In their resource “Best Practices for Speeding up Your Website“, Yahoo! advises developers that minification, the practice of removing unnecessary characters and white-space from source code without changing functionality, can offer significant performance enhancements because it reduces the size of a script file.
These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to make the code more readable by human programmers but not required for the script to run.
Here are some CSS compressors:
To use these tools, you copy and paste your scripts into the appropriate field, then press a button, and optimized scripts are returned to you to re-incorporate to your website. Though file sizes are smaller, none of the source code is actually changed.
Obfuscation: Munging Code
Similar to minification, another practice for increasing script performance is obfuscation, which, unlike minification, actually alters the code through a process called munging. Munged code is typically harder to reverse engineer because function and variable names are converted into smaller strings, making the code more compact (and harder to read by humans). Dojo Compressor’s ShrinkSafe is a tool that can be used to obfuscate scripts.
Both minification and obfuscation pertain to external scripts and inline script blocks. So which technique is better? It depends on your needs. According to one of Steve Souders’ post on the Yahoo! Developer Network blog, “In a survey of ten top U.S. web sites, minification achieved a 21% size reduction versus 25% for obfuscation.”
Now that you’ve minimized or obfuscated your scripts, you’re well on your way to making your website a little greener. Check out other posts in our sustainable web design series. For information on how minification can also be part of a time-saving front end development framework, see Tai’s blog post “E-Z Bake Websites: Save Development Time by Creating a Front End Framework that Works for You.”
See how green your website is with Ecograder.