{"id":48776,"date":"2021-10-01T13:25:13","date_gmt":"2021-10-01T11:25:13","guid":{"rendered":"https:\/\/kinsta.com\/?p=102244"},"modified":"2023-10-19T12:59:34","modified_gmt":"2023-10-19T11:59:34","slug":"optimiser-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/optimiser-css\/","title":{"rendered":"Comment optimiser les CSS pour une performance maximale du site"},"content":{"rendered":"

M\u00eame en 2021, les performances web restent un probl\u00e8me. Selon HTTP Archive, une page moyenne n\u00e9cessite un t\u00e9l\u00e9chargement de 2 Mo<\/a>, effectue plus de 60 requ\u00eates HTTP et peut prendre 18 secondes<\/a> pour se charger compl\u00e8tement sur un appareil mobile. Les feuilles de style repr\u00e9sentent 60 ko r\u00e9partis sur sept requ\u00eates, elles sont donc rarement une priorit\u00e9 absolue lorsqu’on tente de r\u00e9soudre les probl\u00e8mes de performance.<\/p>\n

Cependant, les feuilles de style ont un effet, m\u00eame s’il semble minime. Une fois que vous avez r\u00e9gl\u00e9 votre probl\u00e8me de JavaScript<\/a>, apprendre \u00e0 optimiser correctement les CSS devrait \u00eatre la prochaine priorit\u00e9.<\/p>\n

Allons-y !<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Comment le CSS affecte les performances de page<\/h2>\n

CSS a l’air innocent mais peut n\u00e9cessiter un traitement lourd.<\/p>\n

CSS bloquant le rendu<\/h3>\n

Lorsque votre navigateur rencontre une balise <link><\/code>, il interrompt les autres t\u00e9l\u00e9chargements et traitements du navigateur pendant qu’il r\u00e9cup\u00e8re et analyse le fichier CSS.<\/p>\n

JavaScript peut aussi bloquer le rendu du navigateur<\/a>, mais le traitement asynchrone est possible avec :<\/p>\n

    \n
  1. L’attribut async<\/code> pour t\u00e9l\u00e9charger des scripts en parall\u00e8le, qui sont ex\u00e9cut\u00e9s d\u00e8s qu’ils sont pr\u00eats.<\/li>\n
  2. L’attribut defer<\/code> pour t\u00e9l\u00e9charger en parall\u00e8le, puis ex\u00e9cuter dans l’ordre lorsque le DOM est pr\u00eat.<\/li>\n
  3. L’attribut type=\"module\"<\/code> pour charger un module ES (qui se comporte comme defer<\/code>).<\/li>\n<\/ol>\n

    Les ressources telles que les images n\u00e9cessitent souvent plus de bande passante, mais des formats efficaces sont disponibles<\/a>, et ils peuvent \u00eatre charg\u00e9s de mani\u00e8re diff\u00e9r\u00e9e<\/a> ( attributloading=\"lazy\"<\/code> ) sans bloquer le rendu du navigateur.<\/p>\n

    Rien de tout cela n’est possible avec CSS. Le fichier est mis en cache, donc les chargements de pages suivants devraient<\/em> \u00eatre plus rapides, mais le blocage du rendu demeure.<\/p>\n\n

    Les gros fichiers CSS prennent du temps \u00e0 \u00eatre trait\u00e9s<\/h3>\n

    Plus votre feuille de style est grande, plus il lui faut du temps pour \u00eatre t\u00e9l\u00e9charg\u00e9e et trait\u00e9e dans un mod\u00e8le d’objet CSS (CSSOM), que le navigateur et les API JavaScript peuvent utiliser pour afficher la page. Bien que les feuilles de style CSS soient plus petites que la plupart des autres fichiers de sites web, elles ne sont pas \u00e0 l’abri de la r\u00e8gle empirique \u00ab plus c’est petit, mieux c’est \u00bb.<\/p>\n

    Les fichiers CSS grossissent<\/h3>\n

    Il peut \u00eatre difficile d’identifier les styles qui ne sont plus utilis\u00e9s, et supprimer les mauvais peut faire des ravages sur un site. Les d\u00e9veloppeurs optent g\u00e9n\u00e9ralement pour l’approche la plus s\u00fbre \u00ab tout conserver \u00bb. Les styles de page<\/a>, les composants<\/a> et les widgets qui ne sont plus utilis\u00e9s continuent d’exister dans le CSS. Le r\u00e9sultat ? La taille du fichier, la complexit\u00e9 et l’effort de maintenance augmentent de fa\u00e7on exponentielle, ce qui rend les d\u00e9veloppeurs de moins en moins enclins \u00e0 supprimer le code redondant.<\/p>\n

    Les feuilles de style peuvent r\u00e9f\u00e9rencer d’autres ressources<\/h3>\n

    Le CSS peut r\u00e9f\u00e9rencer d’autres feuilles de style \u00e0 l’aide des r\u00e8gles @import. Ces importations bloquent le traitement de la feuille de style actuelle et chargent d’autres fichiers CSS en s\u00e9rie<\/strong>.<\/p>\n

    D’autres ressources, comme les polices et les images, peuvent \u00e9galement \u00eatre r\u00e9f\u00e9renc\u00e9es. Le navigateur tentera d’optimiser les t\u00e9l\u00e9chargements, mais en cas de doute, il les r\u00e9cup\u00e9rera imm\u00e9diatement. Les fichiers encod\u00e9s en base64 subissent encore un traitement suppl\u00e9mentaire.<\/p>\n

    Rendu des effets CSS<\/h3>\n

    Les navigateurs ont trois phases de rendu<\/a>:<\/p>\n

      \n
    1. La phase de mise en page<\/strong> (ou refonte<\/strong>) calcule les dimensions de chaque \u00e9l\u00e9ment et la fa\u00e7on dont il affecte la taille ou le positionnement des \u00e9l\u00e9ments qui l’entourent.<\/li>\n
    2. La phase de peinture <\/strong>dessine les parties visuelles de chaque \u00e9l\u00e9ment sur des couches s\u00e9par\u00e9es : texte, couleurs, images, bordures, ombres, etc.<\/li>\n
    3. Le composite <\/strong>dessine chaque couche sur la page dans l’ordre correct selon les contextes d’empilage, le positionnement, les z-index, etc.<\/li>\n<\/ol>\n

      Si vous ne fa\u00eetes pas attention, les changements de propri\u00e9t\u00e9s et les animations CSS peuvent entra\u00eener un nouveau rendu des trois phases. Certaines propri\u00e9t\u00e9s, comme les ombres et les d\u00e9grad\u00e9s, sont \u00e9galement plus co\u00fbteuses en termes de calcul que les couleurs de bloc et les marges.<\/p>\n

      Outils d’analyse des performances CSS<\/h2>\n

      Admettre que vous avez un probl\u00e8me de performances CSS est la premi\u00e8re \u00e9tape sur le chemin de la gu\u00e9rison ! Trouver et r\u00e9parer les causes est une autre affaire.<\/p>\n

      Les outils et services suivants (non class\u00e9s dans un ordre quelconque) peuvent vous aider \u00e0 identifier les goulots d’\u00e9tranglement stylistiques dans votre code.<\/p>\n

      1. Panneau r\u00e9seau DevTools<\/h3>\n

      Les sp\u00e9cialistes des performances web passent beaucoup de temps dans DevTools<\/a> et le panneau R\u00e9seau<\/strong> en particulier. DevTools est natif de la plupart des navigateurs modernes<\/a>, mais nous utiliserons Google Chrome dans nos exemples.<\/p>\n

      DevTools peut \u00eatre ouvert \u00e0 partir du menu du navigateur, g\u00e9n\u00e9ralement dans Plus d’outils<\/strong> > Outils de d\u00e9veloppement<\/strong>, ou via les raccourcis clavier Ctrl | Cmd + Shift + I<\/strong> ou F12<\/strong>.<\/p>\n

      Passez \u00e0 l’onglet R\u00e9seau<\/strong> et assurez-vous que la case D\u00e9sactiver le cache<\/strong> est coch\u00e9e pour \u00e9viter que les fichiers mis en cache n’affectent le rapport. Vous pouvez aussi modifier l’option d’\u00e9tranglement pour simuler des r\u00e9seaux mobiles plus lents.<\/p>\n

      Rafra\u00eechissez la page pour afficher le graphique de la cascade de t\u00e9l\u00e9chargement et de traitement :<\/p>\n

      \"Panneau<\/a>
      Panneau R\u00e9seau de DevTools.<\/figcaption><\/figure>\n

      Toute barre longue est source d’inqui\u00e9tude, mais vous devez vous m\u00e9fier tout particuli\u00e8rement des barres longues bloqu\u00e9es\/stagn\u00e9es (indiqu\u00e9es en blanc). Dans cet exemple, la ligne en surbrillance et toutes les lignes suivantes n’ont pas pu commencer \u00e0 se t\u00e9l\u00e9charger tant que les fichiers CSS et JavaScript bloquant le rendu n’ont pas \u00e9t\u00e9 trait\u00e9s en haut de la page HTML.<\/p>\n

      La case Filtre <\/strong>vous permet d’afficher ou de masquer des resssources sp\u00e9cifiques :<\/p>\n