Navigation

Toutes les catégories

Filtrer par auteur

Voir les derniers articles

CSS : 6 astuces pour booster la vitesse de votre site

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

Publié par Charlotte Chollat

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

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

Le saviez-vous ?
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 ">

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.

Lire la suite de l'article

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Webmarketing

8 conseils pour créer votre ligne éditoriale de vacances

Pendant les vacances et plus particulièrement les fêtes de fin d’année, il est important d’adopter une nouvelle ligne éditoriale. Que votre...

Publié le par Gaelle Kurtz
Webmarketing

Fiche de paie : checklist des mentions obligatoires et des éléments variables

Tout savoir sur les mentions obligatoires et les éléments variables qui figurent sur les bulletins de salaire.

Publié le par Arthur Aballea