[Brainstorming]: Optimization - Get rid of unused css.

[wiseaidev]

Let's all agree that having unused code in production is terrible, no one likes it, and it is a waste of resources; It will affect the loading time of a web page since the browser is required to fetch more data than needed. Therefore, there should be a way to pull only the necessary data upon request. However, implementing such a mechanism is a bit challenging, hence posting this in a discussion.

Right off the bat, I can think of having an api that handles requests and returns only the css elements needed for consumption. For instance, say we have the following endpoint: https://bootstrap.com/css/?elements=, a user can pull specific css elements like btn, btn-primary, mg-3, p-5, and the request becomes:

https://bootstrap.com/css/?elements=btn,btn-primary,mg-3,p-5

Another solution I can think of is tearing down the huge bootstrap.min.css file into multiple small files, say one file called common.css, which contains definitions for common css elements like :root, @media queries, and things of that nature. This way, a user can pull specific css files stored on edge, cdn... For example, if a user wants to use btn, then they have to specify the name of the file in the head tag like the following:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/common.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/btn.css"
/>

Another solution for this is to manually download and store the bootstrap.min.css file and adjust its content accordingly. However, doing such a task is hell since it requires scanning around 10k lines of css. I know that there are tools to automate such tasks. However, such tools will remove media queries and such; take the following as an example:

Chrome coverage tool reported it as unused css. Therefore, it is not helpful to use such tools cause of false positives.

That is all i can think of at the moment. What do you think about such a problem?

[gerardnico]

As always that's a trade off between network request and size of script.

https://datacadamia.com/web/browser/page_load#http_resource_request_optimization

If you send properly your static resources with cache header, this hits only the first request.

[wiseaidev]

Yeah, but i mean, it doesn't completely solve the issue. There is still unused css moving around, regardless of whether or not it is being cached. I believe there should be a better way to deliver only requested css elements without the need to cache unwanted data. To do so, I think the second solution that i have already posted above somehow addressed the issue, but it would introduce a lot of <link> tag within the head element. Moreover, I am also thinking of building a cli that can accomplish this task. For instance, say you want to use the btn element; with such tool, namely bootstrap-cli, you can fetch the desired css elements like:

bootstrap-cli pull btn

Running the above command will fetch all the styling related to the btn and store it within a style.css file. This way, you are only using the required css elements, which results in much more efficient css file.

Regardless of which solution to use to solve this problem, i believe that having a large css file stored somewhere is a bit problematic, which results in lots of unwanted css declarations.

What do you think?

[WinterSilence]

Generates CSS for every page is bad idea - you not thinked how browser's cache it.
Look to UnCSS and Critical.