Comment optimiser la vitesse et les performances de votre site web

Optimiser la vitesse et les performances d’un site web permet d’améliorer l’expérience de l’utilisateur, de fidéliser les clients et d’augmenter le retour sur investissement ! Dans cet article, vous trouverez 20 conseils précieux sur la façon d’optimiser votre site web pour qu’il se charge plus rapidement et améliore votre activité.

Outils gratuits de test de la vitesse des sites web

La première étape de l’optimisation de la vitesse et des performances d’un site web consiste à tester, détecter et analyser les problèmes de vitesse. Pour y parvenir, nous vous suggérons d’utiliser tout ou partie des outils de test de vitesse recommandés :

• GTmetrix – évalue la vitesse de votre page et vous donne des recommandations avec des explications détaillées sur la manière d’améliorer vos scores PageSpeed et YSlow.
• Pingdom Website Speed Test – En plus de vous donner une note de performance et une estimation du temps de chargement de la page, cet outil peut trier les fichiers pour toutes les requêtes HTTP en fonction de leur taille et détecter rapidement les goulets d’étranglement.
• WebPageTest – Cet outil vous permet de tester les performances de votre site web à partir de plus de 20 emplacements dans Chrome, Firefox et Internet Explorer. Il vous donne une estimation de la vitesse de chargement, le TTFB (Time to First Byte) et de nombreuses autres informations utiles.
• Google’s PageSpeed Insights – Cet outil ne vous donne pas une estimation du temps de chargement mais génère des suggestions basées sur une analyse de la page web, pour rendre cette page plus rapide.

20 conseils sur la manière d’optimiser la vitesse et les performances d’un site web

1. Choisissez un hébergement de qualité

La condition préalable à l’obtention d’un site web rapide est un hébergeur de qualité et un fournisseur de DNS fiable. Choisissez une société d’hébergement dont les serveurs sont situés géographiquement, là où se trouve votre public cible. Évitez les solutions d’hébergement bon marché et, si votre budget le permet, préférez un serveur géré ou dédié à un hébergement partagé.

2. Utilisez des frameworks de qualité ou des thèmes légers

L’optimisation de la vitesse et des performances d’un site web devrait être le point le plus important dans la conception d’un site web moderne. Malheureusement, la plupart des propriétaires de sites web ne réalisent pas que chaque seconde de chargement supplémentaire a un impact négatif sur leur activité. Les thèmes polyvalents et riches en fonctionnalités génèrent davantage de ventes, c’est pourquoi de nombreux développeurs WordPress ont tendance à reléguer les performances au second plan.

Si vous avez créé votre site web en utilisant le mauvais framework ou le mauvais thème, il sera très difficile de l’optimiser une fois qu’il sera opérationnel. Si vous voulez avoir un site web rapide, assurez-vous de choisir un cadre/thème de qualité et léger, ou vous pourriez le regretter plus tard.

3. Réduisez la taille du fichier de vos images

Les fichiers images non optimisés sont le premier facteur de ralentissement d’un site web. Si vous ne devez changer qu’une seule chose pour améliorer la vitesse de votre site web, vous devriez opter pour l’optimisation des images ! Les images représentent 64% du poids de la page d’un site web moyen.

La meilleure tactique d’optimisation des images consiste à réduire la taille du fichier avant de le télécharger en suivant ces règles :

• Choisissez le format approprié – utilisez les JPG pour les photos, les PNG pour les logos, les illustrations et, lorsque vous avez besoin de transparence, utilisez les GIF uniquement pour les animations
• réduire l’échelle de l’image aux dimensions exactes
• compresser l’image

Vous pouvez compresser les images sans perte avec des outils en ligne comme Tinyjpg ou Compressor.io.

La compression sans perte réduit la taille du fichier en supprimant les métadonnées inutiles de l’image. Avec la méthode de compression sans perte, il n’y a pas de perte de qualité.

Si vous avez déjà téléchargé des centaines d’images sur votre site web et que vous n’avez pas le temps de réduire la taille des fichiers manuellement, vous pouvez utiliser des plugins d’optimisation en masse tels que EWWW Image Optimizer ou Optimus – WordPress Image Optimizer.

4. Réduisez le nombre de requêtes HTTP

Chaque requête HTTP supplémentaire ralentit votre site web. Pour réduire le nombre de requêtes HTTP, vous pouvez faire une ou plusieurs des choses suivantes :

• combiner vos fichiers CSS et JSS en un nombre aussi réduit que possible
• réduire le nombre de plugins et de widgets
• optimiser l’utilisation des plugins – remplacer les plugins qui ajoutent de nombreuses requêtes HTTP
• réduire le nombre de balises dans votre code – utiliser Google Tag Manager pour ajouter des balises de suivi, d’analyse et de remarketing à votre site web
• éviter d’utiliser des frameworks tiers
• héberger les polices de caractères localement
• utiliser des sprites CSS

5. Activez la compression Gzip

Gzip est une forme de compression au niveau du serveur, qui peut vous faire économiser beaucoup de bande passante. Vous pouvez activer la compression Gzip à l’aide d’un plugin ou manuellement dans votre fichier .htaccess.

6. Minimisez les fichiers CSS, HTML et JavaScript

Réduisez tous les caractères inutiles de vos fichiers CSS, HTML et JavaScript. Google propose l’outil UglifyJS2 pour la minification des fichiers JavaScript, et cssnano tool pour la minification des fichiers CSS.

7. Optimisez les feuilles de style CSS

L’optimisation CSS ne se limite pas à la minification des fichiers CSS. Voici quelques bonnes pratiques pour optimiser le code CSS :

• utiliser moins de déclarations et d’opérateurs
• charger le code CSS à l’intérieur du <head&gt ; tag
• utiliser des fichiers CSS externes
• éviter @import
• éviter les CSS en ligne, utiliser de petits CSS en ligne
• utiliser le moins de fichiers CSS possible

1 visiteur sur 4 abandonne le site web si la vitesse de chargement prend plus de 4 secondes !

8. Optimisez le chemin de rendu critique du DOM

Empêchez le code CSS et Javascript de bloquer le DOM grâce à ces pratiques :

• utiliser le moins de code possible ; compresser, minifier et concaténer les fichiers en moins de fichiers, de préférence en un seul fichier
• mettre les références CSS dans la balise head et déplacer les scripts avant de fermer la balise
• éviter le blocage du rendu de JavaScript en utilisant les directives async ou defer

9. Utilisez un réseau de diffusion de contenu

Utilisez un CDN tel que MaxCDN ou KeyCDN pour distribuer votre contenu à l’échelle mondiale et fournir un contenu statique mis en cache à des emplacements géographiques proches de vos utilisateurs. Grâce au CDN, votre site web sera plus rapide et l’expérience de l’utilisateur améliorée.

10. Évitez les redirections 301

Les redirections doublent le temps nécessaire au chargement initial du document HTML, c’est pourquoi il est préférable de les éviter autant que possible.

11. Tirez parti de la mise en cache du navigateur

Vous pouvez exploiter la mise en cache du navigateur à l’aide d’un plugin de mise en cache ou spécifier des paramètres de mise en cache pour différents fichiers dans votre fichier .htaccess. Google recommande de définir des en-têtes « expires » avec un âge maximal minimum de 7 jours.

12. Utilisez la mise en cache côté serveur

Si votre site web est très fréquenté, envisagez d’utiliser la mise en cache côté serveur. Vous pouvez mettre en cache les données les plus utilisées de la base de données

13. Activez HTTP/2

HTTP/2 ne modifie pas les principes fondamentaux de HTTP ; il y a toujours des demandes et des réponses, mais l’utilisation des ressources du réseau est plus efficace. Pour activer HTTP/2, vous devez migrer de HTTP à HTTPS et disposer d’un serveur qui prend en charge HTTP/2.

14. Hébergez les polices de caractères localement

Au cours des dernières années, les polices web sont devenues de plus en plus populaires. La majorité des sites web utilisent des polices personnalisées, ce qui est très bien du point de vue de la conception. Malheureusement, les polices web bloquent le rendu et ajoutent des requêtes HTTP supplémentaires aux ressources externes.

En 2016, plus de 63% de tous les sites web utilisent des polices web personnalisées. Si vous êtes un adepte des polices personnalisées, il est recommandé d’héberger les polices localement et, si vous utilisez un CDN, de les déplacer vers votre CDN.

15. Utilisez le lazy loading

Avec le chargement paresseux, le contenu ne se charge que lorsqu’il devient visible sur l’écran de l’utilisateur. Par exemple, si l’utilisateur ne fait défiler que la première moitié de votre page web, la seconde moitié ne se chargera pas, ce qui permettra d’économiser une partie de la mémoire du serveur et de la bande passante.

16. Corrigez les erreurs 404

Vérifiez régulièrement la présence de liens brisés dans votre compte Google Search Console ou effectuez de temps à autre une analyse rapide à l’aide de l’outil en ligne Broken Link Checker. Corrigez toutes les erreurs 404 pour économiser la mémoire du serveur.

17. Optimisez votre base de données

Votre base de données peut accumuler beaucoup d’informations inutiles et ralentir votre site web. Pour éviter cela, supprimez :

• les commentaires dans la file d’attente et les commentaires non approuvés
• les révisions d’articles
• les messages et les pages supprimés

18. Évitez les contenus multimédias non fonctionnels

Reconsidérez la quantité de contenu graphique que vous utilisez sur votre site web. Évitez les arrière-plans graphiques et les images de grande taille, qui ne sont pas des facteurs déterminants pour les conversions.

19. Désactivez les pingbacks et les trackbacks

Les trackbacks et pingbacks sont principalement des spams qui se retrouvent dans la section de modération des commentaires. Un trop grand nombre de commentaires non approuvés peut ralentir votre site web, il est donc préférable de les désactiver. Si vous n’utilisez pas de commentaires sur votre site web, il est préférable de supprimer définitivement les champs de commentaires.

20. Utilisez les sprites CSS

Les sprites CSS sont une technique d’optimisation qui consiste à combiner plusieurs fichiers images en un seul, ce qui réduit le nombre de requêtes HTTP. Moins de requêtes = plus de vitesse et de performance.

Les sprites CSS sont très utiles pour les boutons de réseaux sociaux, les drapeaux ou d’autres icônes qui sont généralement affichés ensemble.

Maintenez votre site web régulièrement

L’optimisation de la vitesse et des performances d’un site web est un processus continu. Une fois que vous avez réussi à optimiser la vitesse et les performances, vous devez continuer à surveiller, tester et, surtout, maintenir régulièrement votre site web. Si vous ne le faites pas, tout ce que vous ajoutez ou modifiez sur votre site web, comme les changements de code, les nouveaux widgets, les plugins, le contenu publié, les révisions, les commentaires, etc. peut influencer la vitesse de chargement et les performances futures.