1,914 lectures

Les 10 meilleurs conseils de performance CSS

par Nikita Starichenko5m2022/11/14

Trop long; Pour lire

Salut tout le monde! Il existe de nombreux trucs et astuces sur le style CSS. Mais pas dans cet article. Aujourd'hui, je veux parler de la façon d'utiliser CSS plus efficacement et de faire

Companies Mentioned

featured image - Les 10 meilleurs conseils de performance CSS

Salut tout le monde! Il existe de nombreux trucs et astuces sur le style CSS. Mais pas dans cet article. Aujourd'hui, je veux parler de la façon d'utiliser CSS plus efficacement et de rendre votre plateforme plus rapide !

1. Sélecteurs simples

CSS dispose d'un large éventail d'options de codage flexibles que vous pouvez utiliser pour cibler les éléments HTML pour le style. Au fil des ans, les experts ont conseillé aux développeurs d'écrire des sélecteurs simples pour réduire la charge sur le navigateur et garder le code propre et simple. Même les sélecteurs CSS les plus complexes prennent des millisecondes à analyser, mais la réduction de la complexité réduira la taille des fichiers et facilitera l'analyse du navigateur.

Ne pas:

 main > div.blog-section + article > * { /* Code here */ }

FAIS:

 .hero-image { /* Code here */ }

2. CSS en ligne critique

Vous pouvez intégrer des règles CSS critiques. Cela améliore les performances en :

Identifier les styles essentiels utilisés par les éléments au-dessus du pli (ceux visibles lors du chargement de la page)
Intégrer ce CSS critique dans une <style> dans votre <head>
Chargement du CSS restant de manière asynchrone pour éviter le blocage du rendu. Cela peut être accompli en chargeant la feuille de style dans un style « d'impression » auquel le navigateur donne une priorité inférieure. JavaScript le bascule ensuite vers un style de média "tous" une fois la page chargée.

 <style> /* critical styles */ body { font-family: sans-serif; color: #111; } </style> <!-- load remaining styles --> <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'"> <noscript> <link rel="stylesheet" href="/css/main.css"> </noscript>

3. Évitez `@import`

La règle @import permet d'inclure n'importe quel fichier CSS dans un autre. Cela semble être un moyen raisonnable de charger des composants et des polices plus petits. Mais ce n'est pas.

Les règles @import peuvent être imbriquées afin que le navigateur doive charger et analyser chaque fichier en série.

Plusieurs balises <link> dans le HTML chargeront les fichiers CSS en parallèle, ce qui est considérablement plus efficace, en particulier lors de l'utilisation de HTTP/2.

Ne pas:

 /* main.css */ @import url("style1.css"); @import url("style2.css"); @import url("style3.css");

FAIS:

 <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="carousel.css">

4. Précharger les fichiers CSS

La <link> fournit un attribut de préchargement facultatif qui peut démarrer un téléchargement immédiatement plutôt que d'attendre la véritable référence dans le code HTML.

 <!-- preload styles --> <link rel="preload" href="/css/main.css" as="style" /> <!-- some code --> <!-- load preloaded styles --> <link rel="stylesheet" href="/css/main.css" />

5. Rendu progressif

Plutôt que d'utiliser un seul fichier CSS à l'échelle du site, le rendu progressif est une technique qui définit des feuilles de style individuelles pour des composants distincts. Chacun est chargé immédiatement avant qu'un composant ne soit référencé dans le HTML.

Chaque <link> bloque toujours le rendu, mais pour un temps plus court, car le fichier est plus petit. La page est utilisable plus tôt, car chaque composant s'affiche en séquence ; le haut de la page peut être visualisé pendant le chargement du contenu restant.

 <head> <!-- core styles used across components --> <link rel='stylesheet' href='base.css' /> </head> <body> <!-- header component --> <link rel='stylesheet' href='header.css' /> <header>...</header> <!-- primary content --> <link rel='stylesheet' href='content.css' /> <main> <!-- form styling --> <link rel='stylesheet' href='form.css' /> <form>...</form> </main> <!-- header component --> <link rel='stylesheet' href='footer.css' /> <footer>...</footer> </body>

6. Utiliser le rendu Media Query

Un seul concaténé et minifié profitera à la plupart des sites, mais les sites qui nécessitent une quantité importante de styles d'écran plus grands pourraient diviser les fichiers CSS et les charger à l'aide d'une requête multimédia.

 <!-- core styles loaded on all devices --> <link rel="stylesheet" href="core.css"> <!-- served to screens at least 40em wide --> <link rel="stylesheet" media="(min-width: 40em)" href="40em.css"> <!-- served to screens at least 80em wide --> <link rel="stylesheet" media="(min-width: 80em)" href="80em.css">

7. Adoptez des images SVG

Les graphiques vectoriels évolutifs (SVG) sont généralement utilisés pour les logos, les graphiques, les icônes et les diagrammes plus simples. Plutôt que de définir la couleur de chaque pixel comme les bitmaps JPG et PNG, un SVG définit des formes telles que des lignes, des rectangles et des cercles en XML.

Les SVG plus simples sont plus petits que les bitmaps équivalents et peuvent évoluer à l'infini sans perte de définition. Un SVG peut être intégré directement dans le code CSS en tant qu'image d'arrière-plan. Cela peut être idéal pour les icônes plus petites et réutilisables et évite les requêtes HTTP supplémentaires.

Exemple SVG :

 <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /> <svg>

Exemple d'utilisation SVG :

 .mysvgbackground { background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"><circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>') center center no-repeat; }

8. Styliser les SVG avec CSS

Les SVG peuvent être intégrés directement dans un document HTML. Cela ajoute les nœuds SVG directement dans le DOM. Par conséquent, tous les attributs de style SVG peuvent être appliqués à l'aide de CSS.

SVG dans DOM :

 <body> <svg class="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" /> <svg> </body>

Styles SVG :

 circle { stroke-width: 1em; } .mysvg { stroke-width: 5px; stroke: #f00; fill: #ff0; }

Le volume de code SVG intégré est réduit et les styles CSS peuvent être réutilisés ou animés si nécessaire.

Notez que l'utilisation d'un SVG dans une <img> ou comme image d'arrière-plan CSS signifie qu'ils sont séparés du DOM et que le style CSS n'aura aucun effet.

9. Évitez l'encodage Base64

Vous pouvez encoder des images en chaînes base64, que vous pouvez utiliser comme URI de données dans les balises HTML <img> et les arrière-plans CSS.

Cela réduit le nombre de requêtes HTTP, mais nuit aux performances CSS :

Les chaînes base64 peuvent être 30 % plus grandes que leur équivalent binaire.
les navigateurs doivent décoder la chaîne avant qu'une image puisse être utilisée, et
modifier un pixel de l'image invalide l'ensemble du fichier CSS.

N'envisagez l'encodage base64 que si vous utilisez de très petites images qui changent rarement et où la chaîne résultante n'est pas beaucoup plus longue qu'une URL.

Ne pas:

 .background { background-image: url('data:image/jpg;base64,ABC123...'); }

FAIS:

 .svgbackground { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><circle cx="300" cy="300" r="150" stroke-width="3" stroke="#f00" fill="#ff0" /></svg>'); }

10. Petits conseils

Remplacer les images par des effets CSS - définir une "image" à l'aide de code CSS utilise considérablement moins de bande passante et est plus facile à modifier ou à animer ultérieurement.
Utilisez des techniques de mise en page modernes - Flexbox et Grid .
Utilisez les animations CSS - les transitions et les animations seront toujours plus rapides que JavaScript.
Évitez les propriétés coûteuses - certains CSS nécessitent plus de traitement que d'autres.
1. border-radius
2. box-shadow
3. text-shadow
4. opacity
5. transform
6. filter
7. position: fixed
8. backdrop-filter
9. background-blend-mode