Setting up proper JS and CSS minification

Setting up the proper JS and CSS minification can be crucial for your web site’s speed and ultimately better search engine optimization. This article will provide you with quick hints to improve your web site using JS and CSS minification.

Table of Contents

• What is the importance of setting up proper JS and CSS minification
  • Web site before JS and CSS minification and proper browser caching setup
  • Web site after minification and proper browser caching setup
  • Let us compare these results in details

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:

• 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 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”