One of the performance wins for the websites is the deferred loading of JS or CSS which are not required at the first load.
While starting a project it's easy to maintain this, over the period of time when there are consistent developments and multiple devs contributing to the project, it may not be that smooth.
The unused code in general results in slower websites.
- Unused CSS or JS are generally render blocking resources, which are executed even though they do not make any impact on the loading of the page.
- Unnecessary data usage impacts more if user is on cellular data.
- It results in reduced maintainability.
Chrome devtools have a coverage panel, where we can observe all the loaded resources(CSS/JS). It displays all the downloaded resources and displays used and unused bytes.
This panel is not by default visible in devtools, following is how it can be used:
- Go to the command panel (command/Ctrl + shift + P)
- Once the command panel is up, type
- This will open the coverage panel. Click the reload button in coverage panel.
- Each resource is detailed with resource URL, type, size, and used/unused bytes/percentage and a small bar graph of the same.