The importance of setting up proper JS and CSS minification

What is the importance of setting up proper JS and CSS minification?

What is a 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:

  • Comments
  • 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 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! LikeShareComment!

We put a lot of effort in providing these free technical tutorials and we want it to reach the right audience! 🙂

Careveloper Team

careveloper

We are educational service which provides resources to help you manage your digital service. Here you will find resources about WordPress development, how to build up your own web site weather it is a simple blog or advanced e-commerce web site.

Leave a Reply

Your email address will not be published. Required fields are marked *