What can be done to improve the performance of a very large CSS (384KB)

Question

My site has a style sheet, already minified, with a total size of 384KB.

If possible, what can I do to improve performance?

I thought of compressing with GZIP, which would leave the sheet with 59KB, and even divide this sheet into 2 sheets of 29.5 KB each. This helps?

Answer 1

A number of styles like this should fit into one or more of the following categories...

Attribute redundancy

There may be many repeated attributes in several classes. For example, imagine that you are formatting the titles like this:

h1 { font-weight: bold; font-size: 24px; ... }
h2 { font-weight: bold; font-size: 20px; ... }
h3 { font-weight: bold; font-size: 16px; ... }
...

In this case, you could group the common attributes like this:

h1, h2, h3 { font-weight: bold; ... } 
h1 { font-size: 24px; ... }
h2 { font-size: 20px; ... }
h3 { font-size: 16px; ... }

Very specific styles

Another common problem is to always use very specific classes. I’ve seen some systems with a class for each element using the id as selector.

Imagine something like this:

#link1 { A; B; C; D }
#link2 { A; B; C; D }
#link3 { A; B; C; D; E }

(Being A, B, C, D and E any styles)

If you have multiple CSS classes with similar styles, separate what is equal and put into a new class, then use style composition in the attribute class page elements separating class names by whitespace.

Example:

.link { A; B; C; D }
.link-maior { E }

<a href="#" class="link link-maior">Meu Link</a>

In the example above, the class .link could contain the general attributes of links, while the class .link-maior would have a specific format for larger links.

Lack of pattern

A large CSS can also originate in lack of standardization, where each component of each screen is slightly different from the others.

In this case the ideal is to refactor the screens, standardizing them in a set of unified styles.

Generation tool

Another possibility is that some tool is generating styles with too much junk, and several of the above scenarios may occur simultaneously.

I know a tool of this type where all the components of the screen are positioned absolutely. As the positions and styles are unique to each page element, the system generates a CSS file with a class for each element with its position and formatting.

The ideal would be to throw away this tool and make the screens the right way. If not possible, at least divide the styles of each screen into separate files.

Really large and complex system

Finally, it may be that the system is really big enough to justify such a great style.

In this case, the best strategy would be to split the file so that it is not loaded as a whole.

Place the main classes used on all screens in a main file, then divide the rest of the styles into different files following some criteria related to system use, such as groups of screens that are usually used at the same time, user types (admin, normal, ...) or with an individual CSS for each screen.

The overall size of the styles will not decrease, but the loading of the Csss will be diluted between several requests, improving a little the user experience when accessing the system.

Don’t forget to compress

The Questioner (AP) stated that the file is already compressed or "minified", which consists of removing all unnecessary characters such as whitespace and line breaks.

But to make the answer complete, we must not forget that applying the "minification" is an elementary step towards optimizing the response time of any non-trivial application.