Corriger "Remove unused CSS" dans Lighthouse.

Qu'est-ce que le CSS inutilisé ?

Le CSS inutilisé consiste en des déclarations CSS qui ne sont utilisées nulle part sur une page web.
Il est tout à fait normal qu'une partie du CSS ne soit pas utilisée. Par exemple, parce que certaines déclarations CSS sont écrites pour un autre appareil tel qu'un ordinateur de bureau ou un mobile. Parfois  parce qu'un élément décrit dans la feuille de style (comme un bouton) n'est pas utilisé sur cette page spécifique.
Le CSS inutilisé se produit souvent lorsque vous utilisez un framework tel que Bootstrap où il y a beaucoup plus d'éléments décrits par défaut dans le CSS que vous n'en utiliserez jamais. Ou lorsque vous avez repensé votre page mais oublié de supprimer les anciens éléments CSS.

Pourquoi le CSS inutilisé est-il mauvais pour la vitesse de la page ?

Le CSS ralentit le chargement de la page. Lorsqu'une page est chargée, le navigateur récupère d'abord le HTML de cette page. Ce HTML est converti en nœuds DOM. Ensuite, le navigateur récupère toutes les feuilles de style. Les styles trouvés dans ces fichiers CSS sont également convertis dans un autre format, à savoir le CSSOM. Le DOM et le CSSOM sont combinés dans un arbre de rendu. Ce n'est que lorsque cet arbre de rendu a été construit qu'un navigateur commence à peindre le premier contenu.
À cause de ce mécanisme, les fichiers CSS bloqueront toujours le rendu de votre page web. Lorsqu'un fichier CSS est plus grand qu'il ne devrait l'être, il faut plus de temps pour télécharger ce fichier et cela provoque le premier délai.  Lorsqu'un fichier CSS contient du CSS inutilisé, il faut plus de temps pour construire l'arbre de rendu. 

Comment trouver le CSS inutilisé manuellement ?

Dans Google Chrome, vous pouvez voir le CSS inutilisé dans l'aperçu Code Coverage. Code Coverage fait partie des Chrome DevTools. DevTools est une série d'outils intégrés disponibles sur chaque navigateur Chrome. 

Ouvrez d'abord les DevTools avec le raccourci Ctrl-Shift-J.  Puis tapez Ctrl-Shift-P  pour ouvrir la palette de commandes. Maintenant tapez 'coverage'. Sélectionnez coverage et rechargez la page. Vous verrez maintenant un aperçu des fichiers CSS et JavaScript qui sont chargés et utilisés par la page. De plus, vous pouvez voir la taille des fichiers et quelle part du code est réellement utilisée.
Cliquez sur un fichier CSS pour voir quelles règles CSS sont (vert) et quelles règles CSS ne sont pas (rouge) utilisées sur la page actuelle. 

Comment résoudre l'avertissement 'remove unused CSS'

Il existe plusieurs façons de résoudre le message 'remove unused CSS' dans Lighthouse. Si, pour une raison quelconque, la correction de l'avertissement n'est pas possible, vous pouvez optimiser la livraison du CSS pour vous assurer que le CSS inutilisé a moins d'impact sur le temps de chargement de votre page. Je discuterai brièvement des options dont vous disposez pour corriger le CSS inutilisé ci-dessous.

1. Supprimer le CSS inutilisé à la main

La manière la plus logique et la meilleure, mais aussi la plus laborieuse, est bien sûr de supprimer manuellement le CSS inutilisé. Les étapes sont simples :

1. Sauvegardez vos fichiers CSS originaux. Vous pourriez supprimer trop de CSS.
2. Ouvrez l'onglet Code Coverage dans Google Chrome et regardez par fichier CSS quelles déclarations vous n'avez pas besoin.
3. Ouvrez le fichier CSS sur le serveur (ou localement) et vérifiez chaque déclaration CSS inutilisée. Déterminez si elle peut être supprimée. Mais soyez prudent : une déclaration CSS inutilisée ne signifie pas que vous n'aurez jamais besoin de cette déclaration. Vous devez en juger par vous-même !
4. Vérifiez par déclaration CSS si elle n'est pas dupliquée dans le CSS. Le CSS dupliqué sera également signalé comme inutilisé. 
5. Vérifiez chaque règle CSS pour les méthodes abrégées.  Est-il possible de raccourcir le CSS ? Alors raccourcissez-le !

2. Diviser le CSS en plusieurs fichiers

Il existe un moyen simple  de réduire rapidement le nombre de règles CSS ! Chargez uniquement les styles dont vous avez besoin pour votre appareil. Votre page est souvent visitée sur mobile. Vous n'avez pasréellement besoin de télécharger les styles pour ordinateur de bureau et impression pour cet appareil mobile. Ne pas télécharger ces styles économise du temps et raccourcit ainsi la chaîne de requêtes critiques dans Lighthouse.

Pour accomplir cela, utilisez l'attribut media. L'attribut media garantit qu'une feuille de style n'est utilisée que si l'attribut media correspond au média que vous utilisez actuellement.

<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet" 
 media="screen and (min-device-width: 1024px)">

3. Utiliser un outil de nettoyage CSS automatique

Il existe un certain nombre d'outils intelligents qui peuvent nettoyer automatiquement vos fichiers CSS pour vous et supprimer toutes les références CSS inutilisées.
Bien que les outils fonctionnent étonnamment bien, ils ne sont pas infaillibles. Parfois, ces outils suppriment trop de déclarations CSS. Alors utilisez-les avec précaution et vérifiez toujours votre CSS vous-même.
Les meilleurs outils de nettoyage CSS sont PurifyCSS et PurgeCSS . Ces outils fonctionnent sur NodeJS. NodeJS est un environnement d'exécution JavaScript, sur lequel vous pouvez exécuter des scripts JavaScript, basé sur le moteur JavaScript V8 de Google lui-même.  Vous pouvez aussi essayer PurifyCSS en ligne.

4.  Critical CSS

Critical CSS est une collection de règles CSS qui sont nécessaires dans la fenêtre d'affichage (la partie visible) de votre site web. En d'autres termes :  Critical CSS est le CSS requis pour rendre la partie visible de votre page.

Il existe un certain nombre d'outils qui peuvent filtrer et extraire le CSS de votre page. Le Critical CSS est ensuite placé en ligne, dans l' en-tête de votre page, tandis que les fichiers CSS originaux sont chargés de manière asynchrone (pour que le navigateur les utilise plus tard).

Cela ne résout pas complètement le problème du CSS inutilisé. Finalement, le CSS inutilisé sera chargé et analysé mais votre navigateur ne sera pas 'dérangé' par lui pendant la première phase de rendu.

L'outil le plus couramment utilisé pour trouver et extraire le Critical CSS est le script NodeJS Critical . Il existe également des outils en ligne tels que Critical Path CSS Generator et un autre Critical Path CSS Generator

5. Minifier les fichiers CSS

Le CSS inutilisé ralentit une page, comme vous l'avez lu ci-dessus, de 2 façons. La première est parce que les fichiers CSS sont plus volumineux et prennent donc plus de temps à télécharger. 

Nous pouvons contrer ce problème en réduisant la taille du fichier CSS en minifiant les fichiers CSS. Cela se fait via un minificateur CSS.  Un minificateur CSS réduit les fichiers CSS en supprimant les espaces, les commentaires et le formatage. De plus, un minificateur CSS peut réécrire les variables et le code CSS afin qu'il prenne moins d'octets à transférer.

Un outil de minification CSS bien connu est css-minify . Minifiez tous vos fichiers CSS via la ligne de commande avec la commande css-minify -f filename. Il existe également divers minificateurs CSS en ligne tels que cssminifier.com

6. Recompiler votre framework CSS

Utilisez-vous un framework CSS tel que Bootstrap CSS ? C'est un framework CSS avec lequel vous pouvez styliser l'ensemble de votre site. Ce framework est si complet qu'il y a de fortes chances que vous n'en utilisiez jamais de grandes parties.

Heureusement, les créateurs de Bootstrap et d'autres frameworks CSS en ont tenu compte. Ce framework est écrit en SASS. C'est un langage très similaire au CSS. Il se compose de plusieurs petits fichiers SASS qui peuvent utiliser des variables et des fonctions simples. Cela rend facile d'ajuster et personnaliser  le framework vous-même avec un peu de connaissances. Vous pouvez simplement omettre les parties que vous n'utilisez pas et le compiler facilement en 1 fichier CSS final.

Assurez-vous également de ne pas charger un framework CSS non modifié depuis le CDN standard. Téléchargez le framework et compilez-le avec SASS exactement comme vous le souhaitez, avec uniquement les classes CSS que vous utilisez.

7. Envisager une stratégie CSS différente

Voulez-vous vraiment être rapide ? Alors cela pourrait être une idée de repenser votre stratégie CSS. Comment cela se fait dépend de votre site. Il y a plusieurs chemins qui mènent à Rome.

Prenons notre site par exemple. Nous ne chargeons que le CSS dont nous avons réellement  besoin par page. Les classes CSS sont automatiquement importées par notre CMS uniquement lorsqu'elles sont nécessaires. Nous plaçons le CSS en ligne (dans l'en-tête de la page). Cela nous évite une requête réseau supplémentaire. Cette solution est ultra-rapide et facile à maintenir.

Un lecteur attentif pourrait penser : "Qu'en est-il de la mise en cache CSS, le CSS est plus rapide lorsque les fichiers CSS finaux sont mis en cache. Oui, c'est vrai. C'est pourquoi nous préchargeons tous les liens dans la fenêtre d'affichage visible afin qu'une page soit toujours récupérée du cache, y compris le CSS.

Corriger 'remove unused CSS' dans Wordpress

Êtes-vous prêt à supprimer le CSS inutilisé ? Voici comment commencer dans WordPress. Dans WordPress, le CSS peut être ajouté de 3 manières :

• Directement dans le modèle . Dans votre dossier de modèle, il y a un fichier appelé header.php. Dans ce fichier, il y a souvent des fichiers CSS spécifiques au modèle. Vous pourriez modifier ces fichiers CSS comme je l'ai décrit ci-dessus. N'oubliez pas de sauvegarder vos fichiers CSS originaux et gardez à l'esprit qu'une mise à jour de thème peut écraser vos fichiers CSS.
• CSS ajouté par un plugin . Les plugins dans WordPress peuvent ajouter un nombre illimité de fichiers CSS dans votre HTML. Ces plugins utilisent les fonctions wp_register_style et wp_enqueue_style. La plupart des plugins ne prennent pas la peine de vérifier s'ils sont actifs sur la page actuelle. Ils injectent simplement du CSS dans chaque page, même s'il n'y a pas besoin de ce CSS spécifique au plugin sur cette page. Je rencontre cela tous les jours. Si tel est le cas, vous pouvez utiliser les fonctions wp_dequeue_style et wp_deregister_style pour supprimer ces styles des pages. C'est un travail précis. Si vous ne savez pas comment corriger cela, tournez-vous vers votre développeur ou demandez-moi de l'aide. Vous pouvez également utiliser le plugin Asses CleanUp avec lequel vous pouvez définir par type de page quels plugins, styles et scripts peuvent être chargés.
• CSS ajouté par JavaScript . Il est également possible d''injecter' des feuilles de style dans la page en utilisant JavaScript. Tout comme les feuilles de style, vous pouvez désactiver ces scripts par page avec la fonction wp_dequeue_script . Lorsque le JavaScript ne se charge pas, la feuille de style ne sera pas injectée non plus.
  Si vous avez besoin du script et de la feuille de style mais pas directement après le chargement, il est possible de reporter le chargement du JavaScript via l'attribut script defer. Faites cela en ajoutant ce code dans functions.php

function defer_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( strpos( $url, 'somescript.js' ) ) {
        str_replace( ' src', ' defer src', $url );
    }
}
add_filter( 'script_loader_tag', 'defer_js', 10 );