Comment accélérer votre site Web

Si vous êtes un débutant et un nouveau propriétaire de site Web, dans la plupart des cas, vous n’allez pas vous soucier de la vitesse du site Web.

Après avoir créé votre site Web ou démarré votre blog, il se peut que tout soit en place. Votre site est magnifique, cela doit donc signifier que les gens n’auront aucun problème à attendre quelques secondes de plus pour le laisser se charger correctement, n’est-ce pas?

Non, ce n’est pas le cas.

Selon les recherches de Google, plus il faut de temps pour qu’une page se charge, plus les gens abandonneraient un site Web.

En outre, Google a introduit des éléments vitaux de base du Web (qui comptent comme facteur de classement pour les sites Web) qui entrent encore plus en détail en ce qui concerne la vitesse de chargement des sites Web. Plus votre site Web est rapide, meilleures sont vos chances d’accéder à la première page des résultats de recherche Google.

14 étapes pour améliorer la vitesse du site Web

• Étape 1: Exécutez un test de vitesse
• Étape 2: Obtenez un hébergement Web rapide et fiable
• Étape 3: Implémentez un service de réseau de diffusion de contenu (CDN)
• Étape 4: Réduisez les fichiers CSS et JavaScript
• Étape 5: Activer la mise en cache du navigateur
• Étape 6: Optimisez et nettoyez la base de données WordPress
• Étape 7: Utilisez des thèmes optimisés / premium et simples
• Étape 8: Optimisez toutes les images de votre site Web
• Étape 9: Chargez paresseusement des images et des vidéos
• Étape 10: Empêchez le hotlinking d’images
• Étape 11: Hébergez vidéos sur des services tiers et décharger de gros médias
• Étape 12: Gardez les plugins au minimum / trouvez les plugins qui vous ralentissent
• Étape 13: Contrôlez les redirections sur votre site Web
• Étape 14: Optimiser le contenu (utiliser des extraits, diviser de longs articles et commentaires, etc)

Étape 1: Exécutez un test de vitesse

Avant de faire quoi que ce soit, il est important d’effectuer un test approprié. Bien que vous puissiez faire beaucoup même sans un, je suggère fortement d’exécuter au moins un test de vitesse afin d’avoir un benchmark qui vous aidera à comprendre à quel point votre site fonctionne et à quel point le résultat est bon après avoir terminé toutes les étapes d’amélioration.

Outils gratuits

Heureusement, des tests de vitesse gratuits sont disponibles pour tout le monde. Il vous suffit d’en choisir un, d’entrer votre URL et de laisser l’outil effectuer sa magie.

PageSpeed Insights de Google

Étant donné que la plupart des gens optimisent leur site pour Google, le premier outil que je mentionnerai est PageSpeed Insights de Google. C’est assez simple, et vous pouvez avoir le résultat en quelques secondes.

1. Ouvrez PageSpeed Insights de Google.
2. Entrez l’URL de votre site.
3. Cliquez sur le bouton « Analyser ».

Dans mon cas, il a fallu aussi peu que 10-15sec pour que le test se termine et me montre les résultats partagés dans la capture d’écran ci-dessous.

Après avoir vu le nombre vert en haut où vous visez obtenir un score de 100, il y aura plusieurs autres segments que vous souhaitez examiner. Ce sont:

• Première Peinture Contentful (FCP)
• Plus grande Peinture Contentful (LCP)
• Décalage de Mise en Page Cumulatif (CLS)

Les trois éléments font partie des éléments vitaux du Web qui sont maintenant inclus dans les principales mesures de Google qui montreront la vitesse ou la lenteur de votre site. Vous pouvez en savoir plus sur les caractéristiques vitales du Web dans notre guide sur la façon d’optimiser votre site mobile.

GTMetrix

L’un des tests de vitesse de site Web les plus populaires est GTMetrix. Il est entièrement gratuit et peut se faire en moins d’une minute:

1. Accédez à GTMetrix.
2. Saisissez l’URL complète de votre site.
3. Appuyez sur le bouton « Exécuter le test » et attendez environ 30 secondes.

Après cela, vous obtiendrez une note qui vous montrera à quelle vitesse votre site Web est. Le test vous montrera également des détails tels que les performances de votre site, sa structure, ainsi que les caractéristiques vitales du Web qui sont désormais un facteur de classement essentiel pour Google.

Si vous n’avez pas déjà travaillé activement à l’optimisation de votre site pour la vitesse, il y a de fortes chances que vous n’obteniez pas un score parfait. Mais ne vous inquiétez pas, vous pouvez y parvenir si vous commencez à suivre toutes les étapes.

Étape 2: Obtenez un hébergement Web rapide et fiable

Un site Web rapide commence par un bon hébergement. Peu importe à quel point vous essayez d’offrir la meilleure expérience utilisateur, si votre hébergement est nul, la vitesse de votre site Web en souffrira.

Les meilleures sociétés d’hébergement s’occupent de tout, et il n’est pas nécessaire que vous compreniez ce qui se passe derrière des portes closes. Du matériel de qualité et bien entretenu aux composants logiciels régulièrement mis à jour, un service d’hébergement peut faire beaucoup pour améliorer la vitesse de votre site.

Pour bien démarrer, faites héberger votre site avec Bluehost, l’une des rares sociétés d’hébergement officiellement recommandées par WordPress.org . Des années d’expérience et des millions de sites Web hébergés font de cette société d’hébergement l’une des meilleures dans leur domaine – ce qui se traduira facilement par un site Web robuste.

Étape 3: Implémentez un service de réseau de diffusion de contenu (CDN)

Notre monde est un grand endroit. Bien que les vitesses d’Internet se soient considérablement améliorées au fil des ans, la distance physique entre les ordinateurs et les serveurs joue toujours un rôle important dans la vitesse en ligne. Cela signifie que le chargement d’informations à partir d’un serveur de votre pays sera généralement plus rapide que le chargement de données à travers le monde, tout comme il est plus facile pour vous d’acheter une table basse chez IKEA dans votre ville natale au lieu d’avoir à conduire pour en obtenir une dans un autre pays.

C’est là que les réseaux de diffusion de contenu entrent en jeu. Ils vous permettent d’héberger votre site Web sur plusieurs serveurs à travers le monde. CDN peut reconnaître l’emplacement le plus proche de chaque personne chargeant votre site et charger le contenu à partir du serveur le plus proche. Ainsi, si un visiteur essaie de charger votre site depuis les États-Unis, il obtiendra le contenu de l’un des serveurs des États-Unis, tandis que quelqu’un venant d’Europe chargera votre site via un serveur situé près d’eux, par exemple à Londres.

Si vous hébergez le site sur Bluehost, vous pouvez trouver leur CDN TrueSpeed dans le panneau de configuration. Simplement en le configurant, votre site deviendra mondial et se chargera plus rapidement pour les gens du monde entier.

Vous pouvez également obtenir des services CDN tiers. Les CDN les plus populaires sont:

• Cloudflare
• KeyCDN
• StackPath
• Google Cloud CDN
• Rackspace
• CacheFly
• Amazon CloudFront

Étape 4: Réduisez la taille des fichiers CSS et JavaScript

Les sites Web modernes sont remplis de fichiers CSS et JavaScript qui fonctionnent ensemble pour que les pages Web restent agréables et fonctionnent en faveur des utilisateurs. Ligne après ligne de code rend ces fichiers inutilement volumineux, ce qui peut rapidement ralentir votre site.

Les concepteurs Web (les mêmes personnes qui construisent les modèles que vous finissez par acheter) aiment garder leur code soigné. Cela signifie qu’ils gardent le code agréable et facilement compréhensible. Cependant, le fait d’avoir ces espaces blancs, ces lignes supplémentaires et ces caractères ne fait qu’augmenter le poids du fichier, ce qui peut être facilement réduit en réduisant la taille.

Voici un exemple de code CSS simple:

Cela peut être réduit en cela:

Bien que cette simple différence n’ait pas d’impact significatif sur votre site, imaginez ce qui se passe lorsque vous avez des milliers et des milliers d’espaces blancs et de lignes inutiles.

Heureusement, pour réduire la taille de vos fichiers CSS et JavaScript, vous n’avez pas besoin de parcourir le code et d’apporter les modifications vous-même. Il existe des plugins qui le feront automatiquement pour vous et s’assureront que tout fonctionne correctement:

Étape 5: Activer la mise en cache du navigateur

En activant la mise en cache du navigateur, vous autorisez le stockage du contenu dans les navigateurs des utilisateurs. Cela signifie que si un visiteur décide de revenir sur votre site, il n’aura pas à télécharger à nouveau tous les fichiers du serveur car il les a déjà stockés dans son navigateur.

La mise en cache du navigateur peut considérablement améliorer la vitesse de votre site Web pour les utilisateurs récurrents.

Pour l’activer sur votre site, tout ce dont vous avez besoin est un plugin WordPress gratuit tel que:

• W3 Total Cache
• WP Fastest Cache
• WP Super Cache

Si vous utilisez W3 Total Cache, par exemple, tout ce que vous devez faire est d’installer le plugin:

Le plugin configurera automatiquement vos paramètres de mise en cache et ils commenceront immédiatement à travailler en votre faveur. Si vous décidez d’entrer dans plus de détails, vous pouvez ouvrir l’onglet Performances qui est maintenant visible sur le côté gauche du menu WordPress où tous les paramètres du plugin sont visibles. Ici, vous pouvez modifier d’autres options si nécessaire.

Étape 6: Optimisez et nettoyez la base de données WordPress

Votre site Web WordPress ne peut pas fonctionner sans base de données. Tout ce que vous faites et avez sur le site y est stocké. Comme vous pouvez l’imaginer, les thèmes et les plugins ne le gardent pas toujours propre, donc même si vous désinstallez un plugin spécifique, il laissera des données dans votre base de données. Au fil du temps, la base de données deviendra encombrée et inefficace, ce qui entraînera un site Web lent.

Bien qu’il soit possible de nettoyer la base de données manuellement, cela signifierait que vous devez comprendre comment cela fonctionne. Et même si vous le faites, il y a de fortes chances que vous puissiez encore tout gâcher.

Heureusement, il existe des plugins WordPress gratuits disponibles qui optimiseront et nettoieront la base de données pour vous. Cependant, avant de faire quoi que ce soit, assurez-vous de créer une sauvegarde complète de votre site Web ou d’avoir un moyen d’annuler les modifications. Même si WP-Optimize est un plugin bien connu et sécurisé, l’édition directe d’une base de données peut parfois mal tourner.

Donc, au cas où quelque chose se passe mal, je suggère de réinitialiser WP. Ce plugin créera un instantané de votre site et vous permettra de revenir rapidement sur les modifications apportées. Ainsi, en cas de problème, vous pouvez restaurer votre base de données en quelques minutes, au lieu de restaurer une sauvegarde complète qui peut prendre plus de temps.

Étape 7: Utilisez des thèmes optimisés / premium et simples

Les modèles et les thèmes ne sont pas seulement visuels. Pour les créer, les concepteurs de sites Web doivent coder des fonctionnalités, des options et insérer des images qui se combineront toutes en un seul thème de travail.

Comme vous pouvez l’imaginer, un modèle qui charge cinq fichiers et trois images, par exemple, se chargera beaucoup plus rapidement que celui qui contient dix fichiers et vingt images. Le nombre n’est pas le seul facteur important, mais la façon dont tout est optimisé entre également en compte.

Comme il y a tellement de thèmes et de modèles WordPress disponibles, il est difficile de déterminer les meilleurs. Voici quelques-uns des thèmes WordPress populaires qui sont conçus pour bien paraître et se charger rapidement:

• Bonjour Elementor
• Astra
• GeneratePress
• OceanWP
• Sydney

Étape 8: Optimisez toutes les images de votre site Web

Les images peuvent facilement devenir l’un des principaux problèmes de vitesse de votre site. Les images non optimisées resteront inutilement volumineuses et difficiles à télécharger. Si vous en utilisez trop, les utilisateurs auront du mal à charger toute la page de votre site Web et finiront probablement par partir avant de voir le contenu.

Heureusement, il n’est pas si difficile de garder les images optimisées. Il est important que vous examiniez votre thème / modèle pour savoir quelles tailles d’image vous avez besoin. Vous pouvez ensuite prendre soin de l’image avant de la télécharger en redimensionnant sa taille et en modifiant ses paramètres de qualité.

Si vous avez seulement besoin d’optimiser quelques images, vous pouvez utiliser un service tiers comme TinyPNG. Cet outil d’optimisation d’image vous permettra de télécharger vos images sources, et sera ensuite automatiquement optimisé. Faites simplement glisser & déposez les images et laissez le Panda exercer sa magie. Vous pourrez ensuite télécharger les versions optimisées de vos images que vous pourrez mettre en toute sécurité sur votre site Web.

Si vous avez déjà un site web actif et que vous n’avez pas le temps d’optimiser les images une à la fois, il existe un plugin freemium qui résoudra tous vos problèmes. ShortPixel Image Optimizer s’occupera de toutes vos images disponibles dans votre médiathèque. Il fonctionne également très bien avec NextGen, Foo Gallery, ainsi que d’autres plugins de galerie et de curseur.

La version gratuite vous permet de gérer jusqu’à une centaine d’images. Certaines des fonctionnalités incluent:

• Optimisation de la taille et de la qualité des images.
• Conversion de formats en un autre.
• Fonctionne avec WebP et AVIF.

Tout ce que vous avez à faire est d’installer le plugin et de personnaliser les paramètres comme vous le souhaitez. Choisissez la compression dont vous avez besoin, définissez la taille des images et appuyez sur le bouton lorsque vous êtes prêt pour que le plugin démarre le processus d’optimisation.

Étape 9: Chargement paresseux d’images et de vidéos

Habituellement, lorsqu’un utilisateur ouvre un site Web, l’ensemble du contenu qui doit être affiché commence à se charger automatiquement. Ainsi, même si un utilisateur n’a besoin que du contenu du pli ci-dessus, tout ce qui est disponible sur cette page serait toujours chargé.

Au lieu de cela, en chargeant paresseusement des images et des vidéos, vous pouvez demander aux utilisateurs de charger uniquement du contenu visible à l’écran. Une fois que l’utilisateur commence à défiler, les images et les vidéos qui se déplacent dans la zone visible de l’écran commencent à se charger. De cette façon, l’ensemble du site se chargera plus rapidement et permettra une meilleure expérience utilisateur.

Comment activer le chargement paresseux dans WordPress:

Étape 10: Empêcher le hotlinking d’image

Le hotlinking est une action qui consiste à copier la source d’une image d’un site Web pour l’utiliser sur un autre. Bien que l’image s’affiche sans problème, elle ne se charge pas à partir de votre serveur. Au lieu de cela, il utilise toutes les ressources du site d’origine, et il est en fait considéré comme illégal.

En empêchant le hotlinking, vous pouvez empêcher d’autres personnes de voler vos images. De cette façon, vous économisez des ressources sur votre propre service d’hébergement, ce qui signifie que votre site sera le seul à utiliser ces ressources, ce qui se traduira par un site Web plus rapide pour vos visiteurs.

Il existe plusieurs façons d’empêcher le hotlinking:

• Utilisation d’un CDN : les CDN les plus populaires comme Cloudflare et KeyCDN ont déjà activé la protection de liaison à chaud.
• Utilisation de plugins de sécurité: Le plugin de pare-feu Tout-en-un WP Security & vous permet de contrôler les liens directs.
• Désactiver le clic droit sur vos images: utilisez un plugin comme Prévenir le vol de contenu.
• Modification.fichier htaccess: les utilisateurs plus avancés peuvent désactiver directement la liaison directe en modifiant le code dans le.fichier htaccess.

Étape 11: Hébergez des vidéos sur des services tiers et déchargez de gros médias

Lorsque vous démarrez un site Web, il est logique d’avoir toutes vos vidéos et fichiers multimédias volumineux sur votre propre serveur. Cependant, ce qui peut vous manquer, c’est que le stockage et la reproduction de fichiers volumineux nécessitent des ressources de serveur. En ce qui concerne la vitesse de votre site, il est beaucoup plus pratique de décharger des vidéos et des fichiers multimédias volumineux sur des services tiers pour économiser de la bande passante.

Une vidéo chargée depuis YouTube fonctionnera tout aussi bien (sinon mieux) que celle chargée depuis votre serveur. Et si vous avez un trafic plus élevé, cela signifie que l’impact sur votre bande passante est moindre, ce qui se traduit par un site plus rapide.

En ce qui concerne les vidéos, vous pouvez les héberger sur:

• Il est possible de créer des vidéos sur YouTube ;
• Vimeo; ou
• Wistia.

Étape 12: Gardez les plugins au minimum / trouvez les plugins qui vous ralentissent

Chaque plugin améliore votre site Web. Cependant, chaque nouvelle fonctionnalité signifie également de nouveaux fichiers qui prennent de l’espace et de la bande passante. De plus, tous les plugins ne sont pas codés de la même manière, il est donc probable que vous ayez un plugin qui ralentit votre site en chargeant des éléments inutiles dont vous n’êtes peut-être même pas au courant.

Avant de commencer à désactiver tous les plugins, je suggère de faire un test de vitesse.

Ce plugin exécutera des tests sur votre site Web et vous montrera un graphique et des détails. Ce qui vous intéresse ici, c’est l’onglet « Runtime by Plugin » qui dessinera un graphique vous montrant tous vos plugins actifs et leur impact sur le site.

Recherchez les plus gros « morceaux de gâteau » sur votre graphique qui montre les plugins les plus lents sur votre site. Notez que cela ne signifie pas que vous devez vous débarrasser de ce plugin spécifique.

Ce test vous permettra d’analyser tous vos add-ons, afin que vous puissiez peser le pour et le contre et décider pour quels plugins lents vous pouvez désinstaller ou trouver une alternative.

Étape 13: Contrôler les redirections sur votre site Web

Avoir des redirections améliore l’expérience utilisateur, et peut même améliorer votre référencement s’il est fait correctement. Avoir des redirections actives n’aura pas d’impact négatif sur votre site. Cependant, à chaque redirection, votre site devient un peu plus lent. Donc, si vous finissez par avoir trop de redirections (créant une soi-disant chaîne de redirection), les millisecondes s’additionneront et votre site deviendra plus lent.

L’un des outils les plus populaires pour gérer les redirections est Screaming Frog. Vous pouvez également vérifier:

• Redirect Checker
• Sitebulb
• Deepcrawl

En installant le logiciel ou en exécutant une analyse en ligne (selon l’outil que vous avez choisi), vous pourrez analyser votre site Web. Il vous montrera une analyse détaillée du site Web et vous montrera rapidement les URL redirigées. Étant donné que seul le fait de savoir qu’une URL est redirigée n’aura pas beaucoup de sens, vous allez adorer la fonctionnalité qui vous indique la source d’une redirection. Cela vous aidera à comprendre votre site Web, et vous permettra d’agir sur les redirections en supprimant celles qui ne sont pas nécessaires.

Si vous trouvez une chaîne de redirection qui ralentit votre site, la solution est simple– au lieu de rediriger du lien A vers le lien B qui va au lien C, vous devez simplement changer la redirection vers le dernier lien de la chaîne.

Pour gérer les redirections dans WordPress, vous pouvez utiliser un plugin de redirection WP 301 gratuit qui vous aidera à gérer toutes vos redirections.

Étape 14: Optimiser le contenu (utiliser des extraits, diviser de longs articles et commentaires, etc.)

Parfois, vous pouvez faire beaucoup en changeant de petites choses. Si vous écrivez un blog, vous pouvez obtenir un site plus rapide en contrôlant le contenu. Lorsque vous affichez les derniers articles du blog, utilisez des extraits au lieu de charger l’article entier.

Si vous utilisez un éditeur classique, il est relativement facile d’afficher un extrait personnalisé:

Maintenant, l’affichage de l’extrait sur votre page d’accueil dépend de votre thème. Il peut être déjà activé ou vous devrez peut-être cocher l’option quelque part dans votre thème. Je suggère de vérifier la documentation ou de contacter le support car chaque thème est différent.

Si vous avez tendance à écrire de longs articles, vous pouvez rapidement les diviser en deux parties ou plus. Si vous utilisez un éditeur de blocs, vous n’avez pas besoin de plugins externes. Il suffit de modifier un long article, de cliquer sur le symbole « plus » et de trouver le bloc « Saut de page » qui divisera votre article en deux.

Enfin, pour ceux qui ont beaucoup de commentaires, vous pouvez choisir de paginer les commentaires au lieu de les charger tous en même temps:

Continuez à tester la vitesse de votre site Web

Même si vous faites toutes les étapes de ce tutoriel et accélérez votre site Web avec succès, cela ne signifie pas que vous avez terminé. Les choses peuvent rapidement changer, et vous ne savez jamais à quel point votre site se comportera demain ou dans un mois. C’est pourquoi il est crucial que vous fassiez des tests de vitesse réguliers et que vous amélioriez régulièrement votre site.

Vous pouvez mettre ce tutoriel en signet au cas où vous oublieriez où et comment tester votre site, ainsi que de vous rappeler les étapes à suivre pour l’accélérer.

Comment un site Web lent peut vous blesser

Même si cela ne vous dérange pas d’attendre le chargement des sites, la plupart des gens ont un problème avec cela. Et si vous négligez le problème, cela peut vous blesser à long terme. Comment ?

• Taux de rebond plus élevés – Même si votre visiteur décide d’attendre le chargement d’une page, cela ne signifie pas qu’il sera patient pendant toute sa visite. Vous risquez des taux de rebond plus élevés qui obligeront les gens à quitter votre site après avoir visité la première page.
• Perdre de l’argent – Si vous vendez des produits ou des services sur votre site Web, un site lent repoussera les acheteurs potentiels et les futurs clients.
• Perte de trafic – Voulez-vous plus de trafic qui propulsera votre site vers l’avant? Dans ce cas, vous ne pouvez pas vous permettre de perdre un visiteur car votre site n’est pas correctement optimisé.
• Classement SERP inférieur – Google et d’autres moteurs de recherche prennent en compte la vitesse de chargement. Une page plus lente peut entraîner une poussée plus en bas de la page de résultats du moteur de recherche, même si votre contenu est bon.

Vous ne pensez toujours pas que la vitesse est importante? J’espère que ces quatre raisons vous convaincront à quel point la vitesse d’un site Web est cruciale et que vous êtes prêt à améliorer le vôtre.

Conclusion

Tout le monde aime les sites magnifiques et bien conçus. Cependant, si cela signifie attendre quelques secondes supplémentaires pour que le site Web se charge, il y a de fortes chances que vous perdiez un certain pourcentage de visiteurs.

Donc, peu importe ce que vous faites, ne sacrifiez pas la vitesse pour l’esthétique. Il est possible d’avoir les deux; il vous suffit d’être patient et de travailler sur votre site Web pour l’améliorer.