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éliorerons 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 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.

Si vous avez besoin d’aide pour utiliser ces mises en page flexibles, vous pouvez faire appel à un freelance expert en CSS sur Codeur.com.

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)  :

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  :

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.

Si besoin, faites appel à un développeur freelance en déposant votre projet sur Codeur.com.