LightHouse recommends removing some unused styles and scripts - how to do it?

Question

css

I checked the site with Lighthouse and it gave me a lot of different data, including the recommendation: “remove unused styles and scripts”. For a long time I have been thinking about how to do this, but I don’t find an unambiguous option that could be taken and applied, and in general there are such recommendations that you should think about very much, but that’s not the question now.

All styles in one file, and scripts in two and the whole thing is loaded on all pages. Suppose that 20 blocks are described in styles and scripts, and a different number of blocks in a different order can be used on a given page.

Let's take four pages with a different number of blocks for consideration:
- 5 blocks;
- 10 blocks;
- 15 blocks;
- all 20 blocks.

If for a page with five blocks, I remove data from styles and scripts for 15 unused blocks on the page, then LightHouse score will be higher. This way I can process every page. But, as for me, this option is very difficult to maintain for several reasons:
- it will be necessary to process each page.
- many pages will have their own style and script files, and because of this, the browser, when opening each page, will pull these files from the server, and not from the cache - this is a waste of resources and slower page loading.
- when changing the code, it will be necessary to re-generate each style / script file, and in general this option seems very difficult to implement and support, since there are some nuances.

Comrades, tell me what can be done with this! How are you doing or what are your thoughts on this issue?

Answer 1

If something like bootstrap is used during layout, then many styles can really never be used on the site at all. However, experience says that following the lead of Lighthouse and PageSpeed ​​does not mean that the site loads faster. If the site is already well-established and styling work will be carried out on it in the near future (a year), it is possible to combine the classes in which they are used for all properties of the same type. For example, instead of writing display: none for individual classes, collect all these classes in one line and give it display: none. Then the processing of style files will be faster. And splitting one style file into several can greatly slow down loading and PageSpeed ​​will again be dissatisfied.

Answer 2

You can use the service https://purifycss.online/ or use SCSS and break styles into parts. Then include them as needed. Also create a common style that is used on all pages of the site.
UPD. While SCSS can be useful for splitting CSS, it can be done with regular CSS as well (split monolithic CSS into logical blocks and included on landing pages).