Unused CSS et outils pour supprimer feuilles de style inutilisées

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par gibus26, 27 Avril 2022.

  1. gibus26
    gibus26 Nouveau WRInaute
    Inscrit:
    27 Avril 2022
    Messages:
    1
    J'aime reçus:
    0
    Bonjour à tous !
    J'aurais aimé avoir vos avis sur les outils qui permettent de compresser ou de supprimer les CSS inutilisés d'un site pour améliorer son référencement.
    Avez-vous déjà utilisé Unused CSS, Purify CSS, ou d'autres solutions comme les plug-ins pour Wordpress et quel outil préférez vous ? Sinon avez vous trouvé une alternative ?
    Merci d'avance !
     
  2. nicodak
    nicodak WRInaute discret
    Inscrit:
    21 Octobre 2020
    Messages:
    185
    J'aime reçus:
    49
    Bonjour, compresser le CSS améliore le référencement ?
     
  3. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 730
    J'aime reçus:
    174
    Améliorer la vitesse de chargement améliore toujours le référencement. Quand tu vois ce que certains thèmes peuvent arriver à charger....
     
  4. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    2 012
    J'aime reçus:
    348
    Il faut être sûr de ne pas avoir des classes dans du code, par exemple :

    ?>
    <div class="<?= if ($a) echo 'a'; ?>">
    <?php

    sinon ces outils ne verront pas que la classe 'a' est utilisée et la supprimeront.
     
  5. mickou51
    mickou51 WRInaute discret
    Inscrit:
    8 Janvier 2016
    Messages:
    204
    J'aime reçus:
    22
    Le truc qu'il faudrait faire pour détecter des CSS inutilisés ce serait de faire quelque chose dans ce genre là :

    Exemple de CSS:
    .style1 { ... }
    .style2 { ... }
    .style3 { ... }

    Exemple de la page index.html:
    <span class="style1"></span>

    Exemple de la page2.html:
    <span class="style3"></span>

    Il faudrait parcourir toutes les pages du site, et si style1 est trouvé alors il indique quelque part que c'est ok et il le met de côté !
    Si style3 est trouvé, il indique que c'est "ok" et il le met de côté.
    Et ensuite si style2 n'est pas trouvé, il reste toujours inactif dans le fichier css.
    Et du coup il faut prendre tous les CSS qui sont de côtés et créer un nouveau fichier css ou remplacer l'ancien par le nouveau avec tous ceux qui sont ok

    Mais je ne connais aucun script opensource qui fait ça, c'est assez relou de s'en faire un soi-même.


    Une autre solution encore plus pro ce serait de faire un robot à la NodeJS et ce robot on lui donne un fichier css et il récupére tous les noms avant "{" et ils sont stockés quelque part.
    Ensuite ce bot il crawl toutes les pages d'un site et il récupérè la totalité des noms stockés pour les comparer avec ceux qui sont dans chaque et chaque fois qu'un nom de class est introuvable il l'indique quelque part et c'est ensuite à nous de faire le ménage sur le site en recherchant la class inutilisée pour l'enlever
     
  6. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    2 012
    J'aime reçus:
    348
    Ben il me semble que c'est ce que fait PurifyCSS (et d'autres), on lui indique les fichiers CSS, puis les fichiers PHP/HTML/JS/..., et il regarde les classes qui sont utilisées et génère un nouveau fichier CSS plus petit.

    Etant donné que WordPress stocke du HTML dans la base de données, ça risque d'oublier des classes, mais il y a des plugins comme https://www.webperftools.com/purifycss-wordpress-plugin-remove-unused-css/
     
  7. emualliug
    emualliug WRInaute occasionnel
    Inscrit:
    1 Février 2020
    Messages:
    456
    J'aime reçus:
    105
    Les outils de dev de Chromium / Chrome permettent d'enregistrer la couverture du CSS, ce qui donne un aperçu intéressant de ce qui est utilisé ou non.

    Par contre, et pour rejoindre ce que disais @rick38, il faut tout de même se méfier du style qui n'est employé que dans une fenêtre modale qui n'est utilisée que sur une page obscure aux tréfonds du site, parce qu'on peut un peu trop vite exclure un style qui a pourtant son utilité.

    Dans le prolongement de l'outil de Chromium / Chrome, on peut faire un export JSON de ce qui est utilisé et le transformer en un CSS avec https://nachovz.github.io/devtools-coverage-css-generator/

    Je l'utilise parfois lorsque le CSS est trop lourd pour en extraire ce qui est juste appelé sur la landing page et intégrer ce CSS "essentiel" dans le <head> : ainsi les styles nécessaires à l'affichage de la landing page se chargent immédiatement, et le temps que l'utilisateur fasse les premières actions les fichiers CSS avec l'ensemble des règles pour tout le site aura pu être téléchargé et mis en cache.

    La vitesse de chargement d'un site et l'immédiateté de son affichage font partie des critères retenus par Google au titre des "core web vitals". Comme toujours, assez peu d'information de la firme sur l'influence réelle de ces critères sur le classement ; il est annoncé qu'il s'agit de critères secondaires.

    Il y a probablement deux écueils : négliger la performance d'un site et s'y consacrer exclusivement. Un site performant ne sera jamais bien référencé si son contenu est mauvais.

    S'agissant des CSS, ce sont des fichiers qui bénéficient très largement de la compression lorsqu'elle est activée sur le serveur ; par exemple un fichier CSS (non minifié) de 1,5 Mo pourra n'en faire plus que 127 ko une fois compressé. Certains considèrent que la minifaction n'apporte finalement qu'un gain presque négligeable ; le fichier CSS en exemple fait 1,4 Mo minifié et 121 ko minifié et zippé (gain de 6 % sur la minifaction contre 91 % sur la compression).

    Surtout, on arrive dans une échelle où le temps de chargement est presque autant dû à l'accès au fichier qu'au transfert du fichier à proprement parler. Avec les multiplication des plugins on a tôt fait de se retrouver avec une multiplicité de fichiers CSS de petite taille, les regrouper dans un seul fichier peut être une solution pertinente.
     
    mickou51 et Marie-Aude aiment ça.
  8. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 730
    J'aime reçus:
    174
    Oui c'est surtout cela le problème. Beaucoup de plugins enregistrent leurs css et leurs js sans conditions pour tester s'il est nécessaire, c'est gonflant :)
     
  9. mickou51
    mickou51 WRInaute discret
    Inscrit:
    8 Janvier 2016
    Messages:
    204
    J'aime reçus:
    22
    Je viens de regarder, je ne connaissais pas ce système de coverage sur Chrome, c'est trop bien !

    Il faudrait le même sur Firefox car c'est celui-ci que j'utilise toujours.

    Je viens de mettre un tout petit site à jour avec un seul fichier css simple contenant très peu de ligne, j'ai viré tous les css inactifs (eniron 15), faudra voir ce que ça donne sur Google pour voir s'il peut mieux classer le site :eek:
     
  10. emualliug
    emualliug WRInaute occasionnel
    Inscrit:
    1 Février 2020
    Messages:
    456
    J'aime reçus:
    105
    Je suis bien d'accord. Quand je m'étais penché sur le sujet je n'avais pas trouvé d'équivalent. Ça date un peu, mais je n'ai pas l'impression que ça ait bougé depuis.
     
  11. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    671
    J'aime reçus:
    110
    Mieux que le Zip, il y a Brotli qui permet des gains d'environ 17% supplémentaires pour les CSS : https://caniuse.com/brotli
    Il est aussi possible de précompresser les fichiers. On peut ainsi utiliser le taux de compression le plus élevé (et le plus lent, et c'est VRAIMENT trop lent pour être fait à la volée) en n'ayant que les avantages : https://css-tricks.com/brotli-static-compression/

    En général, non : les temps d'accès sont minimes. Les ressources communes comme les CSS étant souvent utilisées, elles restent dans le cache du serveur (par contre, si on utilise Apache, il faut désactiver les .htaccess sinon Apache vérifie la présence de tels fichiers dans le dossier courant et les parents à chaque requête, ce qui est effectivement pénalisant).
    La question, c'est surtout de savoir si on a intérêt à regrouper les fichiers avec HTTP2. C'est un coup à télécharger plein de règles inutiles si c'est fait de façon pas très subtile (ce que j'ai souvent vu). Mais aussi, si une ligne d'une CSS change, le plus gros fichier qui regroupe les petits fichiers doit être intégralement téléchargé à nouveau. Si on a beaucoup de visites récurrentes et des mises à jour fréquentes, ça devient une mauvaise pratique.
     
    Marie-Aude apprécie ceci.
  12. emualliug
    emualliug WRInaute occasionnel
    Inscrit:
    1 Février 2020
    Messages:
    456
    J'aime reçus:
    105
    Je m'exprime mal ; je ne veux pas tant parler du temps d'accès au fichier par le serveur (qui reste en effet globalement négligeable), mais du temps pris par toutes les opérations en amont du téléchargement (Résolution DNS, connexion avec le serveur, établissement liaison TLS, et temps d'attente avant de démarrer la réception du fichier).
     
  13. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    671
    J'aime reçus:
    110
    Si tes CSS sont sur un seul nom de domaine, tout ceci n'est fait qu'une fois — et si elles sont sur le même domaine que la page, il n'y en a aucune faire spécifiquement pour les CSS.

    Du temps d'HTTP/1.1, chaque fichier utilisait une connexion, et il ne pouvait y en avoir qu'un certain nombre simultané, donc oui, c'était problématique et il fallait essayer de limiter le nombre de ressources bloquantes, mais ça n'est plus comme ça que ça fonctionne : avec HTTP/2, tout passe par une seule connexion. Que tu aies 1 gros ou 10 petits fichiers, la différence n'est plus significative.
    Démo visuelle avec 100 fichiers : http://www.http2demo.io
    Waterfalls des chargements d'une même page en HTTP/1.1 et HTTP/2 : http://techslides.com/page-performance-in-http1-vs-http2 (il n'y a plus moyen d'afficher les tests complets, mais on voit quand même les multiples connexions en HTTP/1.1).
     
Chargement...
Similar Threads - Unused CSS outils Forum Date
pb de CSS Développement d'un site Web ou d'une appli mobile 10 Mai 2022
CSS / Attribuer 2 couleurs différentes aux H2 Développement d'un site Web ou d'une appli mobile 12 Mars 2022
Perplexité : pourquoi utiliser une classe CSS en dehors de <body> Développement d'un site Web ou d'une appli mobile 26 Décembre 2021
<noscript><link ...> du css après un <link rel="preload"... Débuter en référencement 1 Mai 2021
Utiliser une grille CSS peut-il nuire au référencement ? Débuter en référencement 17 Janvier 2021
[CSS] Application (non souhaitée) d'un effet au parent via :not(:hover) Développement d'un site Web ou d'une appli mobile 17 Novembre 2020
WordPress Suppression élément avec Css Demandes d'avis et de conseils sur vos sites 16 Août 2020
Conflit image responsive et animation css Développement d'un site Web ou d'une appli mobile 20 Février 2020
Ajouter une Opacité CSS sur une image en Background Développement d'un site Web ou d'une appli mobile 4 Février 2020
CSS Google Shopping AdWords 23 Janvier 2020
style.css unique préférable avec link ou javascript ? Développement d'un site Web ou d'une appli mobile 25 Décembre 2019
Comment gérer le ALT d'une image en CSS background-image YouTube, Google Images et Google Maps 17 Décembre 2019
Contenu mixte vers http / css - réelle gravité ? Débuter en référencement 24 Septembre 2019
Extension Chrome utile pour afficher le code source HTML, JS, CSS Développement d'un site Web ou d'une appli mobile 5 Juillet 2019
css pour cookieconsent et apparence graphique. Développement d'un site Web ou d'une appli mobile 28 Avril 2019
Appliquer style CSS CMS GHOST Développement d'un site Web ou d'une appli mobile 21 Mars 2019
Wordpress et site html/css Débuter en référencement 15 Décembre 2018
Temps de réponse et minimisation CSS et JS Débuter en référencement 30 Novembre 2018
Texte qui apparait au scroll ou au chargement en CSS Débuter en référencement 24 Octobre 2018
trop de style CSS dans un code HTML Demandes d'avis et de conseils sur vos sites 12 Octobre 2018