Il s'agit d'un style CSS chargé de manière critique (indispensable au premier rendu) par la page dont les règles de mise en forme ne sont pas ou peu exploitées par celle-ci (utilisation inférieure à 25%). Par exemple la page charge une bibliothèque CSS embarquant une multitude de règles et la page n'utilise que celles nécessaires à la mise en forme des titres.
Le fait de charger une ressource inutilisée alourdit inutilement le poids global de la page et retarde son chargement. Par ailleurs, la navigateur doit également parcourir le style CSS afin de déterminer quelles règles appliquer, ce qui retarde le premier rendu. Il est donc judicieux de retirer ces styles superflus ou de différer leur chargement (pour ne pas bloquer le premier rendu) afin d'améliorer la rapidité de la page et l'expérience utilisateur.
Avant d'intervenir sur les fichiers CSS, il est nécessaire de comprendre que l'analyse de page se focalise sur l'optimisation de celle-ci sans tenir compte de la globalité du site. Ainsi un style CSS bloquant inutilisé sur une certaine page, peut l'être sur une autre. Le regroupement des différentes règles CSS utiles au site dans un même fichier et déclaré dans un gabarit HTML de page, est une bonne chose, même si ces règles ne sont quasiment pas utilisées par une page en particulier. Il est donc important de vérifier cet aspect avant d'intervenir et d'ignorer ce critère si ce style est utile globalement et dont le chargement ne peut pas être différé.
De manière générale, pour solutionner ce problème, il est nécessaire de :
<head>
...
<link rel="stylesheet" href="styles/inutile.css" />
...
</head>
<head>
...
<link rel="stylesheet" href="styles/inutile.css" defer/>
...
</head>
<head>
<style>
.titre {
font-size: 20px;
color: blue;
}
</style>
...
<link rel="stylesheet" href="styles/inutile.css" defer/>
...
</head>