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 ne vous soucierez pas de la vitesse du site Web. 

Après avoir construisez votre site web or lance ton blog, on pourrait avoir l'impression que tout est 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 Recherche Google, plus le chargement d’une page est long, plus les internautes abandonneront un site Web.

En outre, Google a introduit Web Core Vitals (qui compte comme facteur de classement pour les sites Web) qui entre 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 d'un site Web

• Étape 1 : Exécutez un test de vitesse
• Étape 2 : Obtenez un hébergement Web rapide et fiable
• Étape 3 : Mettre en œuvre un service de réseau de diffusion de contenu (CDN)
• Étape 4 : Réduire les fichiers CSS et JavaScript
• Étape 5 : Activer la mise en cache du navigateur
• Étape 6 : Optimiser et nettoyer 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 : Chargement paresseux des images et des vidéos
• Étape 10 : Empêcher les liens dynamiques d’images
• Étape 11 : Hébergez des vidéos sur des services tiers et déchargez les médias volumineux
• Étape 12 : Gardez les plugins au minimum/recherchez les plugins qui vous ralentissent
• Étape 13 : Contrôlez les redirections sur votre site Web
• Étape 14 : Optimiser le contenu (utiliser des extraits, diviser les 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 de choses même sans un test de vitesse, je vous suggère fortement d'effectuer au moins un test de vitesse afin d'avoir une référence qui vous aidera à comprendre les performances de votre site et la qualité du résultat une fois toutes les améliorations terminées. pas.

Outils gratuits

Heureusement, il existe des tests de vitesse gratuits accessibles à tous. Il vous suffit d'en choisir un, de saisir votre URL et de laisser l'outil opérer 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. Ouvert PageSpeed ​​Insights de Google.
2. Entrez l'URL de votre site.
3. Cliquez sur le bouton « Analyser ».

Dans mon cas, il n'a fallu que 10 à 15 secondes pour que le test soit terminé 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 souhaitez obtenir un score de 100, vous souhaiterez examiner plusieurs autres segments. Ce sont:

• Première peinture de contenu (FCP)
• La plus grande peinture contentieuse (LCP)
• Décalage de mise en page cumulatif (CLS)

Ces trois éléments font partie de Web Vitals qui sont désormais inclus dans les principales mesures de Google qui indiqueront la vitesse ou la lenteur de votre site. Vous pouvez en savoir plus sur Web Vitals dans notre guide sur comment optimiser votre site mobile.

GTmetrix

L'un des tests de vitesse de sites Web les plus populaires est GTmetrix. C'est totalement gratuit et peut être fait en moins d'une minute :

1. Cliquez sur GTmetrix.
2. Tapez 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 la rapidité de votre site Web. Le test vous montrera également des détails tels que les performances de votre site, sa structure, ainsi que des éléments essentiels du Web qui constituent désormais un facteur de classement essentiel pour Google. 

Si vous n'avez pas encore travaillé activement à l'optimisation de la vitesse de votre site, il est probable que vous n'obtiendrez 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 les efforts que vous déployez pour offrir la meilleure expérience utilisateur, si votre hébergement est nul, la vitesse de votre site Web en souffrira.

L’ENTREPRISE meilleures sociétés d'hébergement prenez soin 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 commencer du bon pied, 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 son domaine – ce qui se traduira facilement par un site Web robuste.

Étape 3 : Mettre en œuvre un service de réseau de diffusion de contenu (CDN)

Notre monde est un grand endroit. Bien que les vitesses Internet se soient considérablement améliorées au fil des années, 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 depuis un serveur de votre pays sera généralement plus rapide que le chargement de données depuis le monde entier, tout comme il est plus facile pour vous d'acheter une table basse chez IKEA dans votre ville natale au lieu de devoir conduire pour en obtenir une dans un autre pays. .

C'est là qu'interviennent les réseaux de diffusion de contenu. 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 individu chargeant votre site et charger le contenu à partir du serveur le plus proche. Ainsi, si un visiteur tente de charger votre site depuis les USA, il obtiendra le contenu d'un des serveurs américains, tandis qu'une personne venant d'Europe chargera votre site via un serveur situé à proximité de chez lui, par exemple à Londres.

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

Vous pouvez également bénéficier de services CDN tiers. Le CDN les plus populaires sont:

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

Étape 4 : Réduire les fichiers CSS et JavaScript

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

Les concepteurs Web (les mêmes personnes qui créent 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, la présence de ces espaces blancs, lignes supplémentaires et caractères ne fait qu'augmenter le poids du fichier, qui peut être facilement réduit en le réduisant.

Voici un exemple de code CSS simple :

Il peut être réduit à ceci :

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

Heureusement, pour réduire vos fichiers CSS et JavaScript, vous n'avez pas besoin de parcourir le code et d'effectuer les modifications vous-même. Il existe des plugins qui le feront automatiquement pour vous et garantiront 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 ils les ont déjà stockés dans son navigateur.

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

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

• W3 Total Cache
• WP Cache le plus rapide
• WP Super Cache

Si vous utilisez W3 Total Cache par exemple, il vous suffit de installer le plugin:

Le plugin configurera automatiquement vos paramètres de mise en cache et ils commenceront immédiatement à jouer en votre faveur. Si vous décidez d'entrer plus dans les détails, vous pouvez ouvrir l'onglet Performances qui est désormais 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 : Optimiser et nettoyer la base de données WordPress

Votre site 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 maintiennent 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 signifie que vous devez comprendre son fonctionnement. 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 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 avoir un moyen d'annuler les modifications. Même si WP Optimize est un plugin connu et sécurisé, éditer directement une base de données peut parfois mal tourner. 

Donc, en cas de problème, je suggère Réinitialisation WP. Ce plugin créera un instantané de votre site et vous permettra d'annuler rapidement toutes 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 seront toutes combinées 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 manière dont tout est optimisé entre également en considération.

Comme il existe de nombreux thèmes et 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 être beaux 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 la page entière de votre site Web et finiront probablement par partir avant d’avoir vu le contenu.

Heureusement, il n’est pas si difficile d’optimiser les images. Il est important que vous examiniez votre thème/modèle pour connaître les tailles d'image dont 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 n'avez besoin d'optimiser que quelques images, vous pouvez utiliser un service tiers comme TinyPNG. Cet outil d'optimisation d'images vous permettra de télécharger vos images sources, et sera ensuite automatiquement optimisée. Faites simplement glisser et déposez les images et laissez le Panda opérer 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 par une, il existe un plugin freemium qui résoudra tous vos problèmes. Optimiseur d'image ShortPixel s'occupera de toutes vos images disponibles dans votre médiathèque. Il fonctionne également très bien avec NextGEN, Foo Gallery, ainsi qu'avec 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 des images et des vidéos

Habituellement, lorsqu'un utilisateur ouvre un site Web, l'intégralité du contenu qui doit être affiché commence à se charger automatiquement. Ainsi, même si un utilisateur n’a besoin que du contenu situé au-dessus de la ligne de flottaison, il aura toujours chargé tout ce qui est disponible sur cette page.

Au lieu de cela, en chargeant paresseux des images et des vidéos, vous pouvez demander aux utilisateurs de charger uniquement le contenu visible à l'écran. Une fois que l'utilisateur commence à faire défiler, les images et vidéos qui se déplacent dans la zone visible de l'écran commenceront à 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 différé dans WordPress :

Étape 10 : Empêcher les liens dynamiques d’images

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 réellement depuis votre serveur. Au lieu de cela, il utilise toutes les ressources du site d’origine et est en fait considéré comme illégal.

En empêchant les hotlinks, 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 les hotlinks :

• Utiliser un CDN: les CDN les plus populaires comme Cloudflare et KeyCDN ont déjà la protection contre les hotlinks activée.
• Utiliser des plugins de sécurité: Tout en un WP Security & Firewall Le plugin vous permet de contrôler les hotlinking.
• Désactiver le clic droit sur vos images: utilisez un plugin comme Prévenir le vol de contenu [Désactiver le clic droit].
• Modification du fichier .htaccess: les utilisateurs plus avancés peuvent désactiver directement le hotlinking en modifiant le code dans le fichier .htaccess.

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

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 vous manque peut-être, c'est que le stockage et la reproduction de fichiers volumineux consomment des ressources du serveur. En ce qui concerne la vitesse de votre site, il est beaucoup plus pratique de télé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 aussi bien (sinon mieux) qu’une vidéo chargée depuis votre serveur. Et si votre trafic est plus élevé, cela signifie moins d’impact sur votre bande passante, ce qui se traduit par un site plus rapide.

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

• YouTube;
• Vimeo; ou
• Wistia.

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

Chaque plugin améliore votre site Web. Cependant, chaque nouvelle fonctionnalité signifie également de nouveaux fichiers qui prennent de la place 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 conscient.

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 grosses « parts 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 modules complémentaires, afin que vous puissiez peser le pour et le contre et décider quels plugins lents vous pouvez désinstaller ou trouver une alternative.

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

Avoir des redirections améliore l'expérience utilisateur et peut même améliorez votre référencement si cela 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. Ainsi, si vous finissez par avoir trop de redirections (créant ce qu'on appelle une 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 consulter :

• Vérificateur de redirection
• Ampoule de site
• Deep Scrawl

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. Puisque savoir seulement qu'une URL est redirigée n'a pas beaucoup de sens, vous allez adorer la fonctionnalité qui vous montre 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 mène au lien C, vous devez simplement modifier la redirection vers le dernier maillon de la chaîne.

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

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

Parfois, on peut faire beaucoup en changeant de petites choses. Si tu écrire 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’intégralité de l’article.

Si vous utilisez un éditeur classique, afficher un extrait personnalisé est relativement simple :

Désormais, l'affichage de l'extrait sur votre page d'accueil dépend de votre thème. Il est 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 à rédiger de longs articles, vous pouvez rapidement les diviser en deux ou plusieurs parties. Si vous utilisez un éditeur de blocs, vous n'avez pas besoin de plugins externes. Modifiez simplement un long article, cliquez sur le symbole « plus » et recherchez 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 suivez chaque étape de ce didacticiel et réussissez à accélérer votre site Web, cela ne signifie pas que vous avez terminé. Les choses peuvent changer rapidement et vous ne savez jamais comment votre site se comportera demain ou dans un mois. C'est pourquoi il est essentiel que vous effectuiez régulièrement des tests de vitesse et que vous amélioriez régulièrement votre site.

Vous pouvez ajouter ce didacticiel à vos favoris au cas où vous oublieriez où et comment tester votre site, ainsi que pour vous rappeler les étapes à suivre pour l'accélérer.

Comment un site Web lent peut vous nuire

Même si cela ne vous dérange pas d'attendre que les sites se chargent, la plupart des gens ont un problème avec cela. Et si vous négligez le problème, cela risque de vous nuire à long terme. Comment?

• Des 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 tout au long de sa visite. Vous risquez des taux de rebond plus élevés qui inciteront les internautes à quitter votre site après avoir visité la première page.
• Perdre de l'argent - Si vous vendre des produits ou services sur votre site internet, un site lent rebutera 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 parce que 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 bas dans la page de résultats des moteurs 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 beaux 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.

Alors, quoi que vous fassiez, ne sacrifiez pas la vitesse au profit de 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.