9 façons d’améliorer la vitesse de chargement de votre site Web

Fatigué d’un site Web lent? Découvrez comment corriger et améliorer les performances de votre site Web pour obtenir des vitesses de chargement de page plus rapides, des téléspectateurs plus satisfaits, & meilleurs taux de conversion.


Comment réparer un site Web à chargement lent

Vous avez peut-être déjà passé beaucoup de temps à travailler sur la convivialité et l’expérience utilisateur de votre site – ce qui est essentiel pour les affaires en ligne d’aujourd’hui – mais sans optimiser la vitesse de chargement des pages de votre site, vous échouez finalement les deux. La vitesse est une partie importante de la convivialité et de l’expérience utilisateur de votre site et sans elle, vous risquez de perdre des visiteurs.

Personne n’aime un site web lent. Les vitesses de chargement des pages lentes peuvent éloigner les utilisateurs plus rapidement que…. bien au moins plus rapide que le temps de chargement de la page!

NOTE RAPIDE: Des études ont montré cela prend UNE seconde pour que le flux de pensée d’un spectateur reste ininterrompu. Chaque seconde après, votre site Web risque de perdre l’intérêt de ce spectateur. Votre objectif est d’amener votre site Web à charger une seconde ou moins.

Le temps de chargement du site Web est important!

Au début du Web, de nombreux sites Web étaient du HTML statique, essentiellement un document en texte brut, donc en théorie, le chargement prendrait très peu de temps. Cependant, les vitesses de connexion étaient également faibles (si vous êtes trop jeune pour vous souvenir de naviguer sur le Web sur un modem 28,8, c’est comme être obligé de conduire 1 mile par heure sur l’autoroute). Il était très important de tenir compte de la taille de l’image et du nombre de graphiques sur une page Web, sans oublier que les sites Web dynamiques étaient chargés à l’aide de CGI; ce qui ralentit considérablement les choses. Maintenant, la bande passante a augmenté. Nous pouvons faire beaucoup plus sur le Web, et bien sûr, nous le faisons.

Cependant, il est important de se rappeler que les anciennes règles s’appliquent toujours.

Malgré le fait que nos vitesses Internet et les appareils que nous utilisons (comme les ordinateurs portables, les tablettes, & smartphones) deviennent de plus en plus rapides chaque année, notre patience semble se raccourcir. Ses jamais assez. Nous voulons ce que nous voulons et nous le voulons maintenant. C’est pourquoi il est très important pour les entreprises en ligne d’optimiser le temps de chargement de leur site Web.

Dans cet article, nous discuterons des meilleures pratiques et des technologies actuelles utilisées pour optimiser la vitesse de chargement des pages d’un site Web afin que vous puissiez les appliquer à votre propre site Web..

A LIRE AUSSI: La vitesse est également importante pour le référencement.

Outils de test

Avant de commencer quoi que ce soit, vous aurez besoin d’une méthode pour déterminer quoi ralentit votre site et une référence de la vitesse actuelle de votre site Web pour mesurer les améliorations. Les problèmes énumérés ci-dessous peuvent être ou non votre problème principal, mais vous n’aurez aucun moyen de le savoir, sauf si vous pouvez surveiller le processus..

Vous devez savoir qu’il y a beaucoup de concessions mutuelles. Certaines des solutions ci-dessous peuvent sembler contradictoires. C’est parce que parfois la solution à un problème peut augmenter un problème de vitesse dans un autre aspect de votre site. Par exemple, la création de sprites d’image pourrait entraîner la nécessité de charger une grande image au début, ce qui, tout en réduisant la nécessité de charger de nombreuses autres images, pourrait ralentir le temps de chargement initial (j’entrerai dans ces méthodes plus tard).

Pour cette raison, vous devez mesurer les résultats d’un changement par rapport à un autre afin de pouvoir déterminer ce qui donne les meilleurs résultats..

Voici quelques outils utiles:

  • Google Page Speed ​​Insights – Cet outil gratuit de Google vérifiera n’importe quelle URL et effectuera un test sur votre site pour ses performances. Il fournit des résultats différents pour le fonctionnement de votre site sur les ordinateurs de bureau et les plates-formes mobiles. Il couvrira de nombreux domaines abordés dans cet article et donnera des suggestions sur ce qui pourrait spécifiquement ralentir votre site. Cependant, cet outil semble être très agressif et parfois irréaliste, alors gardez cela à l’esprit.
  • Test de vitesse du site Web Pingdom – Pingdom propose également d’excellentes solutions de test de vitesse, qui peuvent tester votre site à partir de plusieurs emplacements à travers le monde (c’est l’une des raisons pour lesquelles c’est une bonne idée d’utiliser un CDN; plus de détails ci-dessous). Il fournit de nombreuses solutions pratiques pour améliorer votre vitesse.
  • Yslow – Il s’agit d’un plugin gratuit pour votre navigateur qui vous fournira une note basée sur le nombre de requêtes HTTP, la taille des images, si un CDN est utilisé, etc..
  • Calculateur de budget de performance – Il s’agit d’un petit outil utile pour déterminer le type de contenu que vous pouvez vous permettre (en fonction de la bande passante) pour assurer le fonctionnement optimal de votre site..

CAVEAT: Une autre chose importante à prendre en compte est de savoir quelle approche améliore le mieux l’expérience de l’utilisateur. Vous devez savoir si les temps de chargement supplémentaires par rapport aux temps de chargement progressifs sont les plus efficaces. La meilleure façon de le faire est avec des tests d’utilisabilité et spécifiquement des tests A / B.

Comment accélérer le chargement de votre site Web

Bon, maintenant que vous avez des outils de test, plongeons dans les choses réelles que nous pouvons faire pour accélérer nos sites Web!

UTILISEZ-VOUS WORDPRESS? Il existe de nombreux plugins & optimisations WordPress spécifiques disponibles pour effectuer la plupart des tâches répertoriées ici! Consultez notre article exclusivement destiné à accélérer WordPress.

1. Vos fichiers sont trop gros ou vous en avez trop

Rappelez-vous plus tôt comment nous avons parlé de l’importance de la taille des fichiers au début du Web? C’est toujours important. Bien que cela puisse sembler évident, il faut encore le dire. Les fichiers volumineux prennent plus de temps à charger.

Utilisez des fichiers plus petits et moins nombreux (cela pourrait également améliorer l’expérience utilisateur. Bien que les gens aiment les images, trop peuvent créer une surcharge d’informations)

La plupart du temps, vous n’avez pas besoin d’images très grandes. Bien qu’il soit facile de redimensionner une image à l’aide de CSS, si vous faites cela pour réduire la taille d’un fichier, vous gaspillez de la bande passante. Redimensionnez vos images avant vous les téléchargez. C’est incroyable combien vous pouvez les faire plus petits.

2. Activez la compression GZIP

Même après avoir réduit la taille de votre fichier, c’est une bonne idée de les compresser, ainsi que le reste de votre site avant de l’envoyer à l’utilisateur. Vous connaissez probablement déjà ce concept. Parfois, vous avez besoin d’un moyen d’envoyer un grand nombre de fichiers sur un réseau, vous avez donc dû les «compresser» jusqu’à une taille qui sera autorisée par votre fournisseur. Eh bien, la compression HTTP est à peu près la même chose.

La plupart des serveurs Web permettent de compresser des fichiers avec un utilitaire appelé gzip. Gzip prendra tous les fichiers sur votre site, les compressera dans une taille beaucoup plus petite avant de les envoyer au navigateur de l’utilisateur. Cela fonctionnera avec tous les fichiers de votre site. Voici également quelques autres outils de compression d’images en ligne pratiques disponibles pour compresser les fichiers sur votre site.

3. Mise en cache

Vous pouvez également indiquer aux navigateurs à quel moment il doit utiliser une version mise en cache de votre site par rapport à une nouvelle version. En utilisant Expiration des en-têtes vous pouvez dire à l’utilisateur d’utiliser le contenu mis en cache s’il est statique, mais également tirer parti lorsqu’il a besoin de charger un nouveau contenu, comme avec du contenu dynamique.

4. Vous avez trop d’appels de serveur (requêtes HTTP)

C’est l’une des choses les plus importantes à considérer lors de l’accélération de votre site. Chaque fois que vous demandez un nouveau fichier ou redirigez le site pour une raison quelconque, cela ralentit le processus. Avec chacun, le navigateur de l’utilisateur doit se rendre sur votre serveur, qui trouvera alors la ressource, et la transmettra à l’utilisateur. Bien que cela soit acceptable à petites doses, chaque appel de serveur (surtout s’il se passe sur la même page) ralentira considérablement votre site.

Chaque fichier que vous demandez ou avez sur votre site envoie un appel au serveur. Si vous avez 20 images sur votre site, c’est 20 fois que le serveur doit être appelé. Il y a plusieurs choses que vous pouvez faire pour réduire ces.

  • Utiliser des sprites d’image CSS – ce sont des images uniques qui incluent une image composite de toutes les images de votre site. Vous pouvez utiliser CSS pour fournir uniquement la partie du fichier qui doit être affichée à un emplacement spécifique. Cela signifie qu’au lieu de 20 appels pour 20 images, il n’appellera qu’une seule grande image. Cependant, méfiez-vous – bien que cela réduise le nombre d’appels à la base de données, ce qui accélérera certainement votre site, la taille de l’image peut toujours être un problème.
  • Réparez vos liens rompus – chaque fois que vous essayez d’envoyer quelqu’un sur une page qui n’existe plus sur votre site, votre serveur délivre une page 404. Cela signifie essentiellement qu’il recherche la page, obtient un message introuvable et doit ensuite récupérer une erreur personnalisée. Chacun de ces appels serveur peut vous ralentir.
  • Réduisez les redirections – essayez de réduire le nombre de fois que vous choisissez d’avoir votre serveur pour envoyer quelqu’un vers une autre page. Bien que cela puisse sembler utile (par exemple, pour le référencement) d’avoir des pages configurées à cet effet, si vous faites trop d’appels de serveur, cela peut ralentir votre site et avoir un impact négatif sur l’expérience utilisateur.

Exemple d'une image-objetUn exemple d’un Sprite d’image. Source de l’image

6. Le codage de votre site Web doit être optimisé

  • Réduisez votre CSS et votre javascript – L’espace vide signifie quelque chose pour le navigateur Web. Il peut sembler vide pour vous ou pour moi, mais chaque espace vide est un caractère qui doit être lu et rendu. Dans de nombreux cas, ce n’est pas nécessaire, vous utilisez donc des outils de minimisation pour compresser ces fichiers afin qu’ils fonctionnent toujours mais plus rapidement pour lire les composants. Google dispose de bons outils pour vous aider minimisez votre JavaScript et votre CSS
  • Utilisez HTML au lieu de PHP s’il ne s’agit pas d’un contenu dynamique – Bien qu’une grande partie de votre code soit dynamique, il peut parfois être judicieux d’aller à l’ancienne et d’utiliser simplement du code HTML simple. PHP doit être exécuté via un processeur. Le HTML est interprété directement par le navigateur. S’il s’agit uniquement de contenu statique que vous fournissez, stockez-le de manière statique.
  • Mettez votre CSS en haut et JavaScript en bas – C’est une vieille règle, mais elle s’applique toujours. Vous avez besoin que le CSS soit rendu rapidement, mais JavaScript ne doit être exécuté qu’après le chargement de la page elle-même. Vous pouvez également ne pas trop dépendre de l’appel de JavaScript à partir d’un fichier externe. S’il n’y en a pas beaucoup, incluez-le directement sur la page, car c’est une requête HTTP de moins qui doit être faite.

Remarque: Si vous utilisez de grandes bibliothèques JavaScript populaires, telles que JQuery, les conseils sont un peu différents. Vous les voudrez dans un fichier séparé, mais en réalité c’est une meilleure idée d’utiliser le jQuery directement à partir d’un CDN. Cela présente quelques avantages. Parce que ces bibliothèques sont populaires, il est très probable que l’utilisateur possède déjà une version en cache de cette bibliothèque, donc le chargement ne prend pas de temps du tout. Si votre serveur le fournit, il s’agit d’un autre appel de serveur et la bibliothèque entière devra être chargée pour qu’elle fonctionne. Cela peut ajouter à la lenteur de votre site Web.

D’accord, maintenant vous avez regardé et réparé autant que possible en interne, mais cela semble toujours lent, surtout à longue distance. Regardons quelques outils serveur.

7. Votre site est lent à cause de la latence

La latence est un terme qui fait référence au temps nécessaire à votre serveur pour répondre à une requête HTTP. La raison pour laquelle cela est important pour la même raison que vous ne voulez pas faire trop de demandes. Si vous pouvez accélérer cette fois, cela augmentera considérablement la vitesse de votre site. La latence augmente en fonction de la distance physique entre l’utilisateur final et le serveur fournissant le contenu.

Exemple de latence de site Web

L’une des meilleures façons de gérer cela est d’utiliser les réseaux de distribution de contenu ou CDN. Ces copies en cache du contenu de votre site Web à divers endroits du globe, de sorte que la latence est réduite pour chacun de ces emplacements. Les fournisseurs de CDN les plus connus incluent Akamai, Cloudflare et Amazon AWS, mais il y en a beaucoup d’autres. La recherche à l’aide d’un CDN en vaut la peine, surtout si vous avez des clients éloignés de l’emplacement de votre serveur.

8. Votre base de données est trop lente

Aujourd’hui, la plupart des sites Web dépendent fortement du contenu qui est stocké dans une base de données. Cela est particulièrement vrai pour les sites de commerce électronique. Vous avez probablement de nombreux produits et devez les stocker et les fournir en un clic. Bien que les bases de données soient excellentes et soient vos amis, la base de données peut être organisée de manière inefficace ou il peut y avoir un certain nombre de mauvaises requêtes. N’oubliez pas que si un utilisateur doit attendre plusieurs secondes entre chaque requête, cela s’ajoute. Si les utilisateurs ne trouvent pas le produit exact qu’ils souhaitent tout de suite, ou si cela prend trop de temps, ils peuvent partir sans achat. Même s’ils trouvent quelque chose, les chances de continuer à naviguer diminueront également à chaque seconde supplémentaire.

Voici un bon guide étape par étape sur la façon de commencer avec une base de données MySQL.

Remarque: Si vous avez une grande base de données, vous devrez peut-être embaucher un professionnel de la base de données pour vous aider, car cela peut être quelque peu impliqué.

9. Votre fournisseur d’hébergement Web n’est pas assez rapide

Peu importe les manipulations et les ajustements que vous apportez à votre site Web, c’est aussi rapide que son maillon le plus faible – qui dans ce cas, est votre serveur Web. Le choix d’un hébergeur rapide est la base d’un site rapide. En fait, vous pouvez diviser toutes vos optimisations en deux parties principales – 1) les optimisations de votre site Web et 2) les optimisations de votre serveur Web. L’hébergement Web est crucial et c’est pourquoi nous avons écrit de nombreux guides à ce sujet. Votre serveur Web est en fait assez complexe et il faut beaucoup de configuration pour le matériel et les logiciels du serveur physique, mais heureusement, la plupart des plans d’hébergement Web sont gérés, ce qui signifie que la société d’hébergement Web le fera pour vous. Pour une liste de bonnes entreprises à utiliser, nous avons publié cet article sur les hébergeurs Web les plus rapides.

Conclusion

Bien que chacune des catégories susmentionnées puisse être explorée de manière beaucoup plus détaillée, si vous suivez ces directives, vous avez de très bonnes chances de réduire de moitié ou plus le temps de chargement de votre site Web, et vous améliorerez certainement la vitesse de votre site. S’il vous plaît laissez-moi savoir dans la section commentaires si vous avez des questions.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me