What is the importance of setting up proper JS and CSS minification?
What is a JS and CSS minification? Minification actually means removing all the unnecessary parts from your code in order to reduce bandwidth and load your site faster. Also, minification is usually related to combining larger number of similar documents into one which results in reducing a number of requests.
Minifying your code removes:
- New line characters
- White space characters
- Block delimiters
There are large number of plugins for JS and CSS minification, and large number of blog posts that explain various techniques to do this.
On the other hand, there are no actual stats on real web sites to show positive effects of proper minification.
We decided to do a small experiment, on our web site, and this post is simply presenting the actual results.
Note: It’s important to understand that there is no substitute for proper maintenance of your web site.
Web site before JS and CSS minification and proper browser caching setup
PageSpeed Score is 72%, YSlow Score is 72% , and fully loaded time is 11.6s (which is not good at all, for a page under 1 MB).
Number of requests is 67 which can be considered as a large number.
Stats before a minification: https://gtmetrix.com/reports/careveloper.com/HVsUlbLr
Web site after minification and proper browser caching setup
PageSpeed Score is 78% and YSlow Score is 89% (we can see that scores haven’t improved as much), but number of requests is now 26 which is great!
This resulted in Fully Loaded Time of 3.2 seconds (instead of 11.6s at the beginning). 🙂
Stats after a minification: https://gtmetrix.com/reports/careveloper.com/l0uzVrwO
Let us compare these results in details
Compared results: https://gtmetrix.com/compare/HVsUlbLr/l0uzVrwO
So, PageSpeed Grade slightly increased for a +6% and YSlow Grade also increased for a +17%.
Fully Loaded time decreased (optimized) for -8.4s!!!
This is affected by browser caching, but still minification played an extremely important role in this optimization.
Total page size actually slightly increased (probably due to a way in which minification / combined documents) are created.
Total # of requests reduced for 41! This is results solely by minification.
Feel free to leave your comments, experiences and questions related to WPML and database optimization in general. Finally, spread the word! Like, Share, Comment!
If you like this kind of posts check out my post “Code Review – Good, Bad and The Ugly”