La vitesse de votre site web est un critère essentiel dans l’expérience utilisateur et la qualité de votre référencement naturel. Lors d’un précédent article, nous vous avions d’ailleurs donné quelques conseils pour optimiser le temps de chargement de votre site.
Nous allons aujourd’hui nous arrêter sur le code CSS. Ces différentes lignes, si importantes pour la mise en page et les diverses animations de votre site, peuvent ralentir ce dernier.
Voyons quelques astuces très simples à mettre en place, qui amélioreront la vitesse de votre site web.
1. Utiliser Flexbox et CSS Grid
Si vous utilisez toujours les margins, paddings et floats pour aligner vos éléments, alors il est temps d’adopter des techniques de mise en page plus modernes.
Grâce à Flexbox et CSS Grid, vous pouvez créer des dispositions plus complexes, avec beaucoup de moins de code :
- Flexbox permet des mises en page unidimensionnelles en disposant les éléments en ligne ou en colonne. Il est idéal pour les menus ou les galeries d’images par exemple.
- CSS Grid permet des mises en page dans une grille à deux dimensions, c’est-à-dire en gérant simultanément la disposition des colonnes et des lignes.
Flexbox et CSS Grid sont supportés par de nombreux navigateurs, s’adaptent aux différentes tailles des écrans et vous font économiser plusieurs lignes de code.
2. Remplacer les images par des effets CSS et des SVGs
Le chargement d’une image peut prendre beaucoup de temps, surtout si cette dernière n’est pas optimisée pour le web. De plus, certaines d’entre elles s’avèrent inutiles.
C’est le cas par exemple des images de dégradés. Il est en réalité très simple de réaliser des gradients en CSS : vous pouvez choisir les couleurs ainsi que l’angle du dégradé. Alors oui cela vous rajoute quelques lignes de code, mais le chargement est bien plus rapide.
Les images en JPG et PNG peuvent quant à elles être remplacées par des SVGs (Scalable Vector Graphics) :
- Sous ce format, les images se chargent plus vite
- Vous n’avez pas besoin de charger une même image sous différentes tailles, puisqu’en SVG elle s’adapte automatiquement à l’écran de l’utilisateur
- Vous pouvez ajouter des effets avec du CSS
3. Éviter d’utiliser la règle !important
Cette règle CSS permet de donner la priorité à votre déclaration et remplace vos autres déclarations. Par exemple, si vous avez :
h1{
margin-bottom : 20px !important ;
}
Toutes les margin-bottom des h1 déclarées dans vos fichiers CSS prendront la même valeur : 20px.
Cette syntaxe est à éviter car elle oblige le navigateur à vérifier tout votre code. Si vos fichiers CSS sont conséquents, il est évident que cette pratique ralentira le temps de chargement de votre site web.
De manière générale, n’utilisez jamais la règle !important, sauf si vous souhaitez remplacer le code CSS provenant d’une autre bibliothèque.
4. Retirer les typographies inutiles
Grâce à Google Fonts, il est aujourd’hui facile d’ajouter des typographies personnalisées à un site internet. Mais attention à ne pas ajouter des polices inutiles !
Commencez par ne charger que les styles dont vous avez besoin : vous pouvez par exemple retirer l’italique.
Utilisez également les polices variables, elles vous permettent de ne charger qu’un seul fichier pour accéder ensuite à plusieurs styles.
5. Éviter d’utiliser la règle @import
Il existe deux grandes techniques lorsque vous voulez charger un fichier CSS dans une page HTML :
- L’utilisation de la balise
<link>dans la section<head>du fichier HTML - L’utilisation de la règle
@importau début de votre fichier CSS
Cette dernière option est idéale pour charger des typographies ou des éléments de petite taille. En revanche, cela demande bien plus de temps au navigateur pour aller chercher les feuilles de styles supplémentaires.
Privilégiez donc la balise <link> dans votre fichier HTML pour charger vos fichiers CSS.
Ajoutez d’abord le fichier CSS le plus générique, puis allez vers le plus spécifique. En effet, les styles des derniers fichiers remplacent ceux des fichiers précédents.
<link rel= "stylesheet " href= " main.css ">
<link rel= "stylesheet " href= " page.css ">
<link rel= "stylesheet " href= " components.css ">
6. Minifier et compresser les fichiers CSS
Notre dernier conseil et sans doute le plus efficace : la minification et la compression de vos fichiers CSS. Cette pratique peut vous faire gagner un temps de chargement considérable.
Il existe de nombreux outils pour minifier votre code, tel que CSS Minifier.
Adoptez ces bonnes pratiques pour vos fichiers CSS pour optimiser la vitesse de votre site web.