Unused CSS resources

What is an unused CSS resource ?

It is a CSS style critically loaded (essential for the first rendering) by the page whose formatting rules are not or little used by the page (use less than 25%). For example, the page loads a CSS library with a multitude of rules and the page only uses those necessary for the formatting of the titles.

Why is it useful to avoid them ?

Loading an unused resource unnecessarily increases the overall weight of the page and delays its loading time. In addition, the browser must also browse the CSS style to determine which rules to apply, which delays the first rendering. It is therefore a good idea to remove these unnecessary styles or delay loading them (to avoid blocking the first rendering) in order to improve page speed and user experience.

How to manage an unused CSS resource

Before intervening on CSS files, it is necessary to understand that page analysis focuses on page optimization without taking into account the overall site. Thus a CSS style blocking unused on a certain page can be used on another one. The grouping of the different CSS rules useful to the site in the same file and declared in an HTML page template, is a good thing, even if these rules are hardly used by a particular page. It is therefore important to check this aspect before intervening and to ignore this criterion if this style is useful globally and whose loading cannot be delayed.

In general, to solve this problem, it is necessary to :

remove the <link> tag from the HTML code of the page if the style is not used at all

<head>
...
    <link rel="stylesheet" href="styles/unused.css" />
...
</head>

postpone loading using the "defer" attribute if the style is not critical for the first rendering, i.e. it is not useful for content above the fold

<head>
...
    <link rel="stylesheet" href="styles/unused.css" defer/>
...
</head>

extract critical CSS rules at first rendering and defer global style loading

<head>
    <style>
        .titre {
            font-size: 20px;
            color: blue;
        }
    </style>
...
    <link rel="stylesheet" href="styles/unused.css" defer/>
...
</head>