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.

 

Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.

Intégration HTML

Personnalisation de page web

Création d'animations CSS

Ajout de formulaires

Trouver un développeur web

1. Simplifier les sélecteurs CSS

Si vous avez déjà écrit du code CSS vous saurez certainement ce que sont les sélecteurs CSS. Ces éléments qui permettent d’identifier les éléments HTML de votre site pour leur appliquer des propriétés CSS précis ne doivent pas être utilisés n’importe comment.

Bien que vous aimiez utiliser de multiples sélecteurs CSS imbriqués pour récupérer un élément précis de votre page, il reste préférable de simplifier au maximum votre sélecteur pour réduire la charge de travail de votre site.

Lorsque vous écrivez plusieurs sélecteurs à la suite, le navigateur va commencer à les lire de droite à gauche et va analyser tout le code du site pour récupérer chaque élément inclus dans le sélecteur.

Par exemple, avec le code CSS suivant :

.menu > ul > li > a {

}

Le navigateur va parcourir l’ensemble du code HTML pour récupérer tous les éléments de lien « a » dans le code, puis il va analyser tous les éléments de lien « a » pour ne garder que ceux contenus entre une balise « li » et ainsi de suite jusqu’à avoir remonté jusqu’au dernier élément « .menu » et ne garder que les éléments qui correspondent au sélecteur donné.

Cela implique de nombreuses actions pour récupérer chaque lien d’un menu, dans le cas de notre exemple.

Au lieu de ce code CSS, on pourrait ajouter une classe « lien-menu » sur chaque élément de lien « a » de notre menu et écrire le code CSS suivant pour pouvoir leur appliquer certaines propriétés CSS par la suite :

.lien-menu {

}

Simplifiez vos sélecteurs CSS pour réduire le nombre d’actions que le navigateur aura à effectuer pour récupérer les éléments du site.

 

2. Éviter les animations trop lourdes et nombreuses

Les animations en CSS sont très utiles pour améliorer l’expérience qu’auront vos visiteurs sur votre site. Cependant, chaque animation demandera un certain temps de calcul au navigateur pour pouvoir appliquer l’animation sur le site lorsque celle-ci est déclenchée.

Par logique, un grand nombre d’animations sur votre site impliquera un plus grand nombre de calculs et ainsi pourrait réduire les performances du site.

Utilisez les animations CSS sans soucis, mais utilisez-les avec parcimonie, lorsque vous estimez cela nécessaire à l’expérience utilisateur ou à la représentation de votre marque à travers votre site web.

Le second point à comprendre avec les animations est que certaines demandent plus de performances de calculs que d’autres.

Par exemple, lorsqu’une animation implique un changement de la structure de votre page celle-ci sera plus gourmande en performance qu’un simple changement de couleur d’un élément.

Dans un premier temps, il sera donc nécessaire de réduire au minimum le nombre d’animations demandant un changement de position ou de taille d’un élément.

Ensuite, si vous souhaitez tout de même appliquer de telles animations, il y aura certaines animations CSS à préférer plutôt que d’autres :

  • Pour modifier les dimensions d’un élément, utilisez « transform : scale() » à la place de modifier les valeurs « height » et « width ».
  • Pour bouger un élément, n’utilisez pas les propriétés « top », « righ », « bottom » ou « left », mais utilisez plutôt « transform : translate() »
  • Pour flouter un arrière-plan, préférez utiliser une image floue et modifiez ensuite son opacité.
Les techniques d’animations telles que « scale », « translate », « opacity » ou « rotation » ont de meilleures performances que les propriétés CSS équivalentes et seront donc à favoriser.

 

3. Supprimer le code inutilisé

La première bonne pratique à mettre en place est de supprimer tout le code CSS inutilisé sur votre site. Nettoyer les fichiers du code qui n’est plus utilisé permet de réduire un peu le poids des fichiers et ainsi améliorer légèrement la performance de votre site.

De plus, un fichier nettoyé est aussi un fichier plus lisible. Sans tout le code inutilisé, vous arriverez mieux à lire et comprendre le code CSS qui y est écrit.

 

4. 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.

La minification d’un fichier CSS est le processus de retirer tous les espaces blancs et le code qui n’est pas nécessaire du fichier pour réduire la taille de celui-ci.

Le résultat est un fichier qui tient en quelques lignes, avec une taille réduite, qui sera difficilement lisible par un humain, mais qu’un navigateur pourra lire sans soucis.

Il existe de nombreux outils pour minifier votre code, tel que CSS Minifier.

 

5. Réduire la taille des images

Le second point important dans l’optimisation CSS ne tient par directement aux fichiers CSS en eux-mêmes, mais aux fichiers utilisés sur un site web à savoir les images.

Les images sont souvent des fichiers avec un poids assez conséquent par rapport aux autres fichiers du site. Elles sont souvent responsables des lenteurs de chargement d’un site web lorsque celles-ci ne sont pas optimisées.

Pour optimiser une image, il existe diverses méthodes comme :

  • Réduire sa qualité d’image jusqu’à un certain niveau pour ne pas trop dégrader l’image, mais avoir un bon ratio qualité/poids
  • Utiliser un format d’image plus léger comme JPG au lieu de PNG
  • Compresser l’image dans un format web tel que « webp »

 

6. 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, comme par exemple afficher une image ronde

Trouvez le meilleur développeur web sur Codeur.com

Vos premiers devis en 15 minutes

Gratuit et sans obligation

Déjà plus de 75 000 clients

Trouver un freelance

7. É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.

 

8. 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.

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.

 

9. 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.

 

10. Utiliser la balise link à la place de @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 @import au 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.

Lorsque vous ajoutez plusieurs fichiers CSS, tenez compte de l’ordre dans lequel vous les chargez.

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 ">

 

Conclusion

Créer l’apparence de son site avec du CSS ne se résume pas qu’à mettre en place des propriétés CSS sur des éléments HTML. Il faut aussi mettre en place de bonnes pratiques en CSS pour que le code CSS de votre site n’impacte pas les performances du site.

Comme souvent la taille des fichiers impacte les performances logicielles. Un gros fichier demandera au navigateur plus de temps pour le parcourir et exécuter le code lorsque celui-ci doit être appliqué. Le CSS ne fait pas exception et tous les fichiers en lien avec du code CSS devront être optimisés.

Optimiser un site est toujours une tâche assez complexe et technique que ce soit du HTML, du CSS ou du JavaScript.

Si vous avez déjà un site en place et que vous souhaitez améliorer sa vitesse de chargement, n’hésitez pas à poster une annonce gratuite sur Codeur.com pour trouver rapidement un freelance qui saura améliorer la vitesse votre site web rapidement.