20 conseils pour optimiser les performances CSS –

Dans cet article, nous examinons 20 façons d’optimiser votre CSS de manière à ce qu’elle soit plus rapide, plus facile à utiliser et plus efficace.

Selon le dernier rapport Archive HTTP le Web reste un désordre avec le site Web mythique médian nécessitant 1.700Kb de données réparties sur 80 requêtes HTTP et prenant 17 secondes pour charger complètement sur un appareil mobile.

Le Guide complet pour réduire le poids de la page fournit une gamme de suggestions. Dans cet article, nous nous concentrerons sur CSS. Certes, le CSS est rarement le pire coupable et un site typique utilise 40 Ko répartis sur cinq feuilles de style. Cela dit, il y a encore des optimisations que vous pouvez faire, et des façons de changer la façon dont nous utilisons les CSS pour améliorer les performances du site. Les devTools du navigateur sont les meilleurs endroits pour démarrer: lancer depuis le menu ou cliquer sur F12 Ctrl + Shift + I ou Cmd + Alt + I pour Safari sur macOS.

Tous les navigateurs offrent des fonctionnalités similaires et les outils s'ouvriront lentement sur des pages peu performantes! Cependant, les onglets les plus utiles sont les suivants …

L'onglet Réseau affiche un graphique en cascade des actifs au moment de leur téléchargement. Pour de meilleurs résultats, désactivez le cache et envisagez de limiter la vitesse du réseau. Recherchez les fichiers lents à télécharger ou à en bloquer d’autres. Le navigateur bloque normalement le rendu du navigateur lorsque les fichiers CSS et JavaScript sont téléchargés et analysés.

L'onglet Performance analyse les processus du navigateur. Lancez l'enregistrement, exécutez une activité telle qu'un rechargement de page, puis arrêtez l'enregistrement pour afficher les résultats. Rechercher:

1. Actions excessives layout / reflow dans lesquelles le navigateur a été forcé de recalculer la position et la taille des éléments de la page.
2. Expensive paint actions où les pixels sont modifiés.
3. Compositing actions où les parties peintes de la page sont assemblées pour être affichées à l'écran.

Les navigateurs basés sur Chrome fournissent un onglet Audits qui exécute l'outil Lighthouse de Google . Il est souvent utilisé par les développeurs de Progressive Web App, mais propose également des suggestions de performances CSS.

Options en ligne

Vous pouvez également utiliser des outils d'analyse en ligne qui ne sont pas influencés par la vitesse et les capacités de votre appareil et de votre réseau. La plupart peuvent tester à partir d'endroits alternatifs à travers le monde:

2. Gagner gros en premier

Il est peu probable que le CSS soit la cause directe des problèmes de performances. Cependant, il peut charger des actifs lourds qui peuvent être optimisés en quelques minutes. Exemples:

• Activation de la compression HTTP / 2 et GZIP sur votre serveur
• Utilisez un réseau de distribution de contenu (CDN) pour augmenter le nombre de connexions HTTP simultanées et répliquer des fichiers vers d'autres sites dans le monde
• Supprimez les fichiers inutilisés.

Les images sont généralement la principale cause du volume de pages, mais de nombreux sites ne parviennent pas à optimiser efficacement:

1. Redimensionnement des images bitmap. Un smartphone d'entrée de gamme prend des images multi-mégapixels qui ne peuvent pas être affichées intégralement sur le plus grand écran HD. Peu de sites nécessitent des images de plus de 1 600 pixels de largeur.
2. Assurez-vous d'utiliser un format de fichier approprié. En règle générale, JPG est le mieux pour les photographies, SVG pour les images vectorielles et PNG pour tout le reste. Vous pouvez expérimenter pour trouver le type optimal.
3. Utilisez des outils d'image pour réduire la taille des fichiers en répartissant les métadonnées et en augmentant les facteurs de compression.

Notez que x Kb ] pas équivalent à x Ko de code CSS. Les images binaires se téléchargent en parallèle et nécessitent peu de traitement pour être placées sur une page. Le rendu des blocs CSS doit être analysé dans un modèle d'objet avant que le navigateur puisse continuer.

3. Remplacer des images par des effets CSS

Il est rarement nécessaire d'utiliser des images d'arrière-plan pour les bordures, les ombres, les bords arrondis, les dégradés et certaines formes géométriques. Définir une "image" à l'aide du code CSS utilise beaucoup moins de bande passante et est plus facile à modifier ou à animer plus tard.

4. Supprimer les polices inutiles

Des services tels que Google Fonts facilitent l'ajout de polices personnalisées à n'importe quelle page. Malheureusement, une ou deux lignes de code peuvent récupérer des centaines de kilo-octets de données de police. Recommandations:

1. N'utilisez que les polices dont vous avez besoin.
2. Ne chargez que les poids et styles requis, par exemple, romain, poids 400, pas d'italique.
3. Dans la mesure du possible, limitez les jeux de caractères. Les polices Google vous permettent de sélectionner certains caractères en ajoutant une valeur & text = à l'URL de la police, par exemple fonts.googleapis.com/css?family=Open+Sans&text=SitePon pour l'affichage "SitePoint" dans Open Sans.
4. Considérons les polices de variables qui définissent plusieurs poids et styles par interpolation, de sorte que les fichiers sont plus petits. Le support est actuellement limité à Chrome, Edge et à certaines éditions de Safari mais devrait augmenter rapidement. Voir Comment utiliser les polices variables .
5. Considérez les polices OS. Votre police Web de 500Kb est peut-être sous la marque, mais est-ce que quelqu'un remarquera si vous êtes passé à la version Helvetica ou Arial couramment disponible? De nombreux sites utilisent des polices Web personnalisées, de sorte que les polices standard du système d'exploitation sont beaucoup moins courantes qu'elles ne l'étaient!

5. Eviter @import

La règle @import permet d'inclure n'importe quel fichier CSS dans un autre. Par exemple:

 / * main.css * /
@import url ("base.css");
@import url ("layout.css");
@import url ("carousel.css");

Cela semble être un moyen raisonnable de charger des composants et des polices plus petits. Ce n'est pas . Les règles @import peuvent être imbriquées afin que le navigateur charge et analyse chaque fichier en série.

Plusieurs balises dans le code HTML chargeront des fichiers CSS en parallèle, ce qui est considérablement plus efficace, surtout lorsque utilisant HTTP / 2:

Cela dit, il peut y avoir des options plus préférables …

6. Concatenate and Minify

La plupart des outils de compilation vous permettent de combiner tous les partiels en un seul fichier CSS volumineux, sans espace, commentaires et caractères inutiles.

La concaténation est moins nécessaire avec HTTP / 2 et demandes multiplexes. Dans certains cas, des fichiers séparés peuvent être utiles si vous avez des ressources CSS plus petites et qui changent régulièrement. Cependant, la plupart des sites bénéficieront probablement de l'envoi d'un seul fichier immédiatement mis en cache par le navigateur.

La réduction de la taille risque de ne pas être très bénéfique lorsque GZIP est activé. Cela dit, il n'y a pas de véritable inconvénient.

Enfin, vous pouvez envisager un processus de génération qui classe les propriétés de manière cohérente dans les déclarations. GZIP peut maximiser la compression lorsque des chaînes couramment utilisées sont utilisées dans un fichier.

7. Utiliser des techniques de mise en page modernes

Pendant de nombreuses années, il a fallu utiliser le CSS float pour disposer les pages. La technique est un hack. Cela nécessite beaucoup de réglage du code et des marges / marges pour garantir le bon fonctionnement des mises en page. Même dans ce cas, les flottants se briseront à des tailles d'écran plus petites, sauf si des requêtes de support sont ajoutées.

Les alternatives modernes:

• CSS Flexbox pour les mises en page unidimensionnelles les largeurs de chaque bloc. Flexbox est idéal pour les menus, les galeries d'images, les cartes, etc.
• Grille CSS pour les mises en page bidimensionnelles avec lignes et colonnes explicites. La grille est idéale pour les mises en page.

Les deux options sont plus simples à développer, utilisent moins de code, s'adaptent à n'importe quelle taille d'écran et rendent le rendu plus rapidement que le flotteur car le navigateur peut déterminer la disposition optimale. Réduire le code CSS

Le code le plus fiable et le plus rapide est le code que vous n'avez jamais besoin d'écrire! Plus votre feuille de style est petite, plus elle sera téléchargée et analysée rapidement.

Tous les développeurs commencent avec de bonnes intentions, mais le CSS peut gonfler au fil du temps à mesure que le nombre de fonctionnalités augmente. Il est plus facile de conserver l'ancien code inutile plutôt que de le supprimer et de risquer de casser quelque chose. Quelques recommandations à prendre en compte:

• Méfiez-vous des grandes structures CSS. Il est peu probable que vous utilisiez un pourcentage élevé de styles, alors ajoutez uniquement les modules dont vous avez besoin.
• Organisez le CSS en fichiers plus petits (partiels) avec des responsabilités claires. Il est plus facile de supprimer un widget de carrousel si le CSS est clairement défini dans widgets / _carousel.css .
• Considérons les méthodologies de nommage telles que BEM pour faciliter le développement de composants discrets. 19659009] Évitez les déclarations Sass / préprocesseur profondément imbriquées.
• Évitez d'utiliser ! Important pour remplacer la cascade.
• Évitez les styles en ligne en HTML.

Des outils tels que UnCSS peuvent aider Supprimez le code redondant en analysant votre code HTML, mais méfiez-vous des états CSS provoqués par l’interaction JavaScript.

9. Accrocher à la cascade!

L'essor de CSS-in-JS a permis aux développeurs d'éviter l'espace de noms global CSS. En règle générale, les noms de classe générés de manière aléatoire sont créés au moment de la construction, de sorte qu'il devient impossible pour les composants d'entrer en conflit.

Si votre vie a été améliorée par CSS-in-JS, continuez à l'utiliser. Cependant, il vaut mieux comprendre les avantages de la cascade CSS plutôt que de travailler contre elle dans tous les projets. Par exemple, vous pouvez définir des polices, des couleurs, des tailles, des tableaux et des champs de formulaire par défaut qui sont appliqués universellement à chaque élément d'un seul endroit. Il est rarement nécessaire de déclarer chaque style dans chaque composant.

10. Simplifier les sélecteurs

Même les sélecteurs CSS les plus complexes prennent des millisecondes pour analyser mais réduire la complexité réduira la taille des fichiers et facilitera l'analyse du navigateur. Avez-vous vraiment besoin de ce type de sélecteur?!

 body> main.main> section.first h2: nth-de-type (impair) + p :: first-line> a [href$=".pdf"]

Encore une fois, méfiez-vous de l'imbrication profonde dans des préprocesseurs tels que Sass, où des sélecteurs complexes peuvent être créés par inadvertance.

11. Se méfier des propriétés coûteuses

Certaines propriétés sont plus lentes à rendre que d'autres. Pour ajouter de la bêtise, essayez de placer des ombres de boîte sur tous vos éléments!

 *, :: before, :: after {
  boîte-ombre: 5px 5px 5px rgba (0,0,0,0,5);
}

Les performances du navigateur varieront mais, en général, tout ce qui provoque un nouveau calcul avant la peinture sera plus coûteux en termes de performances:

• border-radius
• box-shadow
• opacité
• transformation
• filtre
• position: fixe

12. Adoptez des animations CSS

Les animations CSS natives et animations seront toujours plus rapides que les effets JavaScript qui modifient les mêmes propriétés. Les animations CSS ne fonctionneront pas dans les anciens navigateurs tels qu'IE9 et les versions antérieures, mais ces utilisateurs ne sauront jamais ce qu'ils manquent.

Cela dit, évitez l'animation pour le plaisir. Des effets subtils peuvent améliorer l'expérience utilisateur sans nuire aux performances. Des animations excessives risquent de ralentir le navigateur et de provoquer un mal des transports chez certains utilisateurs.

13. Évitez d'animer des propriétés coûteuses

L'animation des dimensions ou de la position d'un élément peut entraîner une nouvelle mise en page de toute la page sur chaque image. Les performances peuvent être améliorées si l'animation n'affecte que la phase de composition . Les animations les plus efficaces utilisent:

• opacité et / ou
• transforme pour traduire (déplacer), mettre à l'échelle ou faire pivoter un élément (l'espace d'origine que l'élément utilisé n'est pas modifié)

Les navigateurs utilisent souvent le GPU à accélération matérielle pour rendre ces effets. Si aucun n'est idéal, pensez à retirer l'élément du flux de pages avec la position : absolute pour qu'il puisse être animé dans son propre calque.

14. Indiquer quels éléments vont animer

La propriété va-changer permet aux auteurs CSS d'indiquer qu'un élément sera animé pour que le navigateur puisse optimiser les performances à l'avance. Par exemple, pour déclarer qu'un élément aura une transformation appliquée:

 .myelement {
  va-changer: transformer;
}

Vous pouvez définir n'importe quel nombre de propriétés séparées par des virgules. Cependant:

• utiliser changera en dernier recours pour résoudre les problèmes de performance
• ne l'appliquera pas à trop d'éléments
• lui donnera suffisamment de temps pour travailler: c'est-à-dire don ' t commencer les animations immédiatement.

15. Adopter 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. Par exemple:

Les fichiers SVG plus simples sont plus petits que les bitmaps équivalents et peuvent évoluer à l'infini sans perte de définition.

Un fichier SVG peut être intégré directement en code CSS en tant qu'image d'arrière-plan. Cela peut être idéal pour les petites icônes réutilisables et évite les requêtes HTTP supplémentaires. Par exemple:

 .mysvgbackground {
  background: url ('data: image / svg + xml; utf8, ') center center no-repeat;
}

16. SVG de style avec CSS

Plus généralement, les fichiers SVG sont 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:

 circle {
  largeur de trait: 1em;
}

.mysvg {
  largeur de trait: 5px;
  accident vasculaire cérébral: # f00;
  remplir: # ff0;
}

Le volume du code SVG incorporé est réduit et les styles CSS peuvent être réutilisés ou animés selon les besoins.

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

17. Évitez les images bitmap de base64

Les fichiers JPG, PNG et GIF bitmap standard peuvent être codés dans une chaîne base64 dans un URI de données. Par exemple:

 .myimg {
  background-image: url ('data: image / png; base64, ABCDEFetc + etc + etc');
}

Malheureusement:

• l'encodage base64 est généralement 30% plus grand que son équivalent binaire
• le navigateur doit analyser la chaîne avant de pouvoir l'utiliser
• modifier une image invalide l'intégralité du fichier CSS (mis en cache). ] Bien que les requêtes HTTP soient moins nombreuses, elles offrent rarement un avantage notable, en particulier sur les connexions HTTP / 2. En général, évitez d’inclure des bitmaps à moins qu’il soit peu probable que l’image change souvent et que la chaîne résultante en base64 ne dépasse probablement pas quelques centaines de caractères.

  18. Considérer les CSS critiques

  Ceux utilisant les outils d'analyse de page de Google verront souvent des suggestions à "CSS critique en ligne" ou "réduisent les feuilles de style de blocage du rendu" . Le chargement d'un fichier CSS bloque le rendu, ce qui permet d'améliorer les performances en procédant comme suit:

  1. Extrayez les styles utilisés pour rendre les éléments au-dessus du pli. Des outils tels que criticalCSS peuvent vous aider.
  2. Ajoutez ces éléments à un élément
     
     L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !

     Essai Gratuit Aujourd'hui