Member-only story
How to remove unused CSS from a web page
In addition to the unused code contributed by omnipresent frameworks, dead code accumulates as the web page is developed. Keeping useless bytes is not only a waste of electricity. It delays the page rendering because the unused code needs some time to be loaded and parsed.
Removing the unused JavaScript code can be too complicated to justify such an improvement, or impossible when frameworks and libraries are used.
In contrast, it is easy to remove the unused CSS. Even though removing the useless CSS will not speed up much a web page, for a developer it might be easier to continue adding new styles when there are fewer styles in the stylesheet.
How to quickly detect unused JavaScript and CSS code is described by Google team https://developers.google.com/web/tools/chrome-devtools/coverage. But it is not explained there what to do next. Below I explain how the coverage analysis results could be used.
Let’s optimize a web page relying on the Bootstrap library. I took an example from https://getbootstrap.com/docs/5.0/forms/overview/. I do not repeat its code here, instead my full code can be downloaded from https://github.com/marianc000/coverage.
