It’s human nature: People want to know what they are going to get in return before they do something. This is especially important for web developers and front-end designers concerned about web performance. Knowing the savings benefit from an optimization (along with the effort it takes to implement) is critical information required to properly prioritize your web performance optimization tasks. Its often required information to persuade project managers to devote resources to optimizing a website. Developers and designers need hard data about how much savings they will get when they implement a certain optimization. They don’t want rough estimates, or statements like “typical savings is 15% to 20%.” No, developers and designers want “This file is currently size X. If you make Y optimization, it will be reduced to size Z.”
To address this very issue for we have added a new feature to our free web performance scanning service: Savings Tables. With certain performance issues, the Zoompf report will have a Savings Table. It tells you what URLs were affected by the issue, what optimization tool you should you, and exactly how much savings there will be when you optimize the resource.
Savings Tables cleanly illustrate the benefits of common optimizations like minification and compression. Savings Tables for lesser known optimizations, such as PNG8 candidate images, Oversized Gradients, and reducing JPEG quality, can educate web developers and designers about the significant effects these techniques and how to optimize their websites even further.
Let’s use this Zoompf Performance Report for O’Reilly as an example. The Savings Table shows that HTTP compression can save O’reilly 73%. We see a similar breakdown for CSS minification and JavaScript minification.
Unexpected Savings
Then we come to something interesting: Oversized Gradients. This is where a very thin image is repeated using CSS along the X or Y axis to create a gradient background for some page element. Often web developers believe that converting a 10 pixel by 80 pixel gradient image into a 1 pixel by 80 pixel gradient won’t reduce image size by any reasonable amount. However, the Savings Table shows that O’Reilly could reduce the size of its CSS gradients by 22%! Multiple that out of over a day of traffic and we are taking serious savings. The Savings Tables demonstrate the value of other optimizations as well. Converting the candidate images identified by Zoompf to PNG8 will save 61%. Reducing JPEG quality to 70 would save 30%. And so on.
To justify the cost of implementing performance optimization, web developers and designers need hard numbers. The Savings Table feature of Zoompf’s free web performance scanning service can help you the information you need to fully understand the benefits of optimization. We also hope this new feature helps you discover a new technique to speed up your website that you didn’t even know existed. Remember, our free web performance scanning service is available for anyone to use as much as they want, as often as they want, on any site that they want. Scan your site today and see how you can save.
How about also showing total savings in KB?