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

11

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

If possible, what can I do to improve performance?

I thought about compressing with GZIP, which would leave the sheet at 59KB, and even split that sheet into 2 sheets of 29.5KB each. Does this help?

    
asked by anonymous 17.12.2014 / 03:08

1 answer

10

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

Attribute Redundancy

There may be many attributes repeated in several classes. For example, suppose you are formatting the headings 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 use very specific classes. I have already seen some systems with a class for each element using id as selector.

Imagine something like the following:

#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 the same and put it in a new class, then use style composition in the class attribute of the page elements by separating the class names with white spaces.

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 the links, while the .link-maior class would have a specific formatting for larger links.

Lack of pattern

A large CSS can also originate in a 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 unified set of styles.

Generation tool

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

I know of such a tool where all components of the screen are positioned absolutely. Because placements 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 it is not possible, at least split 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 split the rest of the styles into different files following some criteria related to system usage, such as groups of screens that are usually used at the same time, user types ( administrator, normal, ...) or with an individual CSS for each screen.

The total size of the styles will not decrease, but loading CSSs will be diluted across multiple requests, improving the user experience when accessing the system.

Do not forget to compress

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

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

    
17.12.2014 / 20:38