A Good Tool to Help You reduce JS and CSS File Size (Chrome)

Hello again, today I am going to introduce you a very useful tool in Chrome to help you decide what to remove in your JS and CSS file, the tool is very easy to use and very handy, so let’s begin!

You could use this tool starting from Chrome version 59 (well, kind of a long time ago). Open Chrome and open developer tool and the command panel inside it, then search for show coverage and press enter, then you will find a new panel being opened which included a new tab named Coverage.

Let’s pick facebook as an example, I used this link as the example: https://www.facebook.com/42km.hk. Yes! This is our facebook page.

The view of Coverage inside Chrome dev tool.

Then click the Coverage button which I highlighted in purple, and you will see what is in the above print screen.

Notice that there are 5 columns, we could focus last 3 columns now, including Total Bytes, Unused Bytes and the red and green chart.

Coverage help you to sort the files based on the files size of the unused bytes, so that you could know immediately which file may need to work on to, and which files you could work on later.

This screen show you which lines of code are being used in this page and which are not.

Now, try to click the top file to have a look. You will see something similar to the left hand side screen capture.

Have a look on the left hand size of those lines of code, you will find 2 colours, red and green.

Red referring to those lines of code which are not being used in the page that you use coverage to check. On the other hand, green referring to those lines of code that are being used in the page.

Now, you may think “OK, so I just need to remove those lines of code being marked with red?”

Please stop right here, there are two reasons I could think of that you should not do that blindly.

1. Coverage could only let you know which lines of code are not being used in the pages that you use it to analyse. So those code not being used in that page does not mean they are not being used in any other pages.
2. Sometimes those files are not being created or called by you but a plugin creator, so you have to spend long time to look into the code if you wanna change them, so you will not create some bugs for yourself.

In my opinion, you should always remember that if you use a plugin or framework, please try to remove the parts of code that you are sure that you do not needed in your current project now, if you need them again in the future, just add those codes back in when the time arrive. Also, give better name and comment to let the future you and the people who are going to take up your job. If you could do these 2 thing, you could save yourself and other people long period of time.

Alright, see you next time~