Simple Site Speed Improvements For Local Businesses
octobre 30, 2020

Améliorations simples de la vitesse du site pour les entreprises locales

Par damien

De nombreuses petites entreprises locales ont du mal à optimiser leur site pour la vitesse. Pourquoi ? Eh bien, l’optimisation de la vitesse d’un site a tendance à nécessiter des compétences en développement web que la plupart des propriétaires de petites entreprises n’ont pas, et les développeurs peuvent être assez coûteux.

Que pouvez-vous faire si vous n’avez pas les compétences ou le budget nécessaires, mais que vous devez tout de même améliorer la vitesse de votre site ? Dans cet article, je vais vous expliquer comment vous pouvez améliorer la vitesse de votre site même si vous n’avez pas accès à un développeur.

Pourquoi améliorer la vitesse de votre site ?

L’expérience utilisateur et les taux de conversion peuvent être affectés négativement si votre site est lent. Il est très fréquent que vos clients potentiels naviguent sur leur téléphone à la recherche de services locaux pendant qu’ils regardent la télévision ou font des courses. La vitesse du téléphone portable est donc très importante pour les sites web d’entreprises locales.

En 2016, les recherches sur téléphone portable ont dépassé les recherches sur ordinateur. Selon une étude, 56 % des recherches mobiles effectuées en déplacement ont une intention locale. Et je suis sûr qu’aujourd’hui, ce chiffre est beaucoup plus élevé.

Par rapport aux appareils de bureau, les appareils mobiles ont une vitesse de téléchargement beaucoup plus lente. De ce fait, les sites web qui sont déjà plus lents auront encore plus de mal à se charger rapidement sur un appareil mobile.

Comment cela affecte-t-il les entreprises locales ? Le taux de rebond moyen pour les pages se chargeant dans les deux secondes est de 9 %. Dès que le temps de chargement d’une page atteint quatre secondes, le taux de rebond s’élève. Le taux de rebond à cinq secondes est de 38 %. En résumé, le temps de chargement d’une page a un impact direct sur le taux de rebond.

Ce dernier aura à son tour un effet négatif sur les taux de conversion.

Source : Cloudflare

Vous voulez voir comment votre site s’en sort ? Vous pouvez consulter les indicateurs de vitesse des sites de Google ici.

Comment améliorer la vitesse de votre site

Voulez-vous que les visiteurs quittent votre site ou voulez-vous que vos visiteurs se convertissent ? Je parie que c’est la dernière solution. Vous devez donc optimiser votre vitesse, après tout… VITESSE MO’ = PLUS MO’ !

Pour ce tutoriel, je vais vous montrer comment j’ai utilisé quelques plugins payants différents sur le site d’un optométriste local. Le prix d’utilisation de ces deux plugins commence à environ 60 dollars. Il vous sera ainsi beaucoup plus facile d’accélérer votre site. De plus, j’ai rencontré quelques difficultés lors du processus d’amélioration de la vitesse du site sur ce site, je vais donc vous montrer comment surmonter les problèmes réels qui peuvent survenir.

Avant de procéder à une optimisation de la vitesse, assurez-vous que vous utilisez un hébergeur web de qualité. Il est arrivé à plusieurs reprises que la vitesse du site d’un client s’améliore d’une tonne simplement en changeant d’hébergeur. Si vous dépensez 5 $/mois pour l’hébergement, vous pouvez envisager une mise à niveau.

En outre, je ne recommande pas d’améliorer la vitesse d’un site en direct. Je recommande l’utilisation d’un site de transit parce que certains des paramètres que vous allez modifier peuvent entraîner une “rupture” de ce que les utilisateurs voient.

Un site de simulation est une copie de votre site réel. Cela vous permet d’essayer des plugins et de modifier le code sans affecter le site en direct.

Paramètres de base

Avant de commencer, nous devons prendre quelques mesures de base afin de voir si la vitesse du site s’est améliorée après les optimisations. Pour cela, j’utilise quelques outils tiers gratuits :

Google Pagespeed Insights

Google Pagespeed Insights vous donne un score de vitesse pour les mobiles et liste les améliorations de vitesse spécifiques au site que vous pouvez apporter en dessous du score.

Google Pagespeed Insights vous donne également une note de vitesse pour les ordinateurs de bureau et énumère les améliorations de vitesse spécifiques au site que vous pouvez apporter en dessous de la note.

GTmetrix

GTmetrix vérifie la vitesse de chargement de votre site web.

WebPageTest.org

Le WebPageTest, comme son nom l’indique, teste les performances de votre site web.

*Note : seul le premier test a montré une note de A pour “First Byte Time”. Chaque test suivant a obtenu la note “F”.

Répartition du contenu par domaine (WebPageTest.org)

Optimisation de la vitesse des sites

Ok, alors commençons ! Jetons un coup d’œil sur les optimisations de la vitesse du site que j’ai réalisées.

Fusée WP

La première chose que j’ai faite a été d’installer WP Rocket et de désactiver un plugin appelé SG Optimizer. SG Optimizer est un plugin de SiteGround mais il est en conflit avec WP Rocket. Donc, si vous n’utilisez pas SiteGround comme hôte, vous n’avez pas à vous inquiéter de cela.

Dans WP Rocket, j’ai activé les paramètres suivants :

Cache

Cache mobile : J’ai coché cette case pour activer la mise en cache sur les appareils mobiles également.

Durée de vie du cache : Je choisis généralement 7 à 10 jours ici pour la plupart des sites de petites entreprises. La durée de vie du cache détermine la durée de conservation des fichiers mis en cache. La limite par défaut est fixée à 10 heures.

Mais vous pouvez la fixer à une durée plus courte si vous ajoutez et mettez à jour du contenu sur le site plusieurs fois par jour. Vous pouvez également la fixer à une durée plus longue si vous ne mettez pas votre site web à jour fréquemment. Si un site est mis en ligne au maximum une fois par semaine, vous pouvez régler la durée de vie du cache à sept jours.

Optimisation des fichiers

Une fois de plus, je vous recommande de faire une copie de votre site et de le tester d’abord sur la mise en scène, en particulier lorsque vous utilisez les paramètres “Optimisation des fichiers”.

Vous allez donc éventuellement réduire la taille de certains fichiers et en combiner d’autres, ce qui peut réduire le temps de chargement des pages. Dans certains cas, cela peut casser des choses. Un développeur web pourrait probablement configurer cette section rapidement, mais comme vous le faites vous-même, il faudra faire quelques essais et erreurs.

Ce que je fais, c’est cocher une case à la fois, vider le cache, puis afficher la page. Si tout semble correct, je coche une autre case et je répète le processus.

Au minimum, vous devriez pouvoir cocher toutes ces cases et n’avoir aucun problème, mais je ne peux pas le garantir.

Fichiers CSS :

Minimiser les fichiers CSS
Optimiser la fourniture de CSS

Fichiers JavaScript :

Minifier les fichiers JavaScrip
Charger le JavaScript en différé
Mode sécurisé pour jQuery

Une fois que vous pensez avoir terminé, vous devez vous assurer de tester toutes les actions sur le site afin de vérifier qu’elles fonctionnent toujours. Il s’agit par exemple de remplir des formulaires pour s’assurer qu’ils sont bien soumis, de cliquer sur les boutons et les onglets, etc. Si une action a échoué sur le site, c’est probablement dû aux paramètres de fichier JavaScript que vous avez choisis dans les paramètres “Optimisation des fichiers”. Essayez de les annuler et testez à nouveau.

Médias

LazyLoad : j’ai activé LazyLoad pour les images, les iframes et les vidéos. Si vous avez des vidéos YouTube sur votre site, vous pouvez cocher la case “Remplacer l’iframe YouTube par une image de prévisualisation”. Cependant, j’ai eu des problèmes avec cette option une fois, alors assurez-vous de lire les vidéos après avoir coché cette case pour vous assurer qu’elles fonctionnent correctement.

Emoji : J’ai également coché la case “Désactiver Emoji” afin d’utiliser le style emoji depuis le navigateur de l’utilisateur au lieu de charger un fichier emoji depuis WordPress.

Précharger

Précharger le cache : Cette fonction indique au navigateur de télécharger et de mettre en cache des ressources telles que des fichiers CSS ou JavaScript dès que possible. Il est utilisé lorsque ces ressources seront utilisées sur la page que vous êtes en train de charger.

J’ai également coché les cases suivantes :

Activer le préchargement
Activer le préchargement basé sur le plan du site
Plan du site de Yoast SEO XML : Cochez cette case si vous utilisez le plugin Yoast SEO. Si vous n’utilisez pas Yoast, ne cochez pas cette case et collez l’URL de votre plan de site XML dans la section “Plans de site pour le préchargement” située en dessous.

Précharger les requêtes DNS : Ceci indique au navigateur de télécharger et de mettre en cache des ressources comme des fichiers CSS ou JavaScript en arrière-plan.

Prefetch est moins prioritaire afin de ne pas interférer avec le téléchargement de ressources plus importantes. Il est utilisé lorsque vous savez que vous aurez besoin de cette ressource sur une autre page qui sera bientôt consultée.

J’ai utilisé WebPageTest.org pour voir tous les domaines qui doivent être “consultés” lors du chargement du site.

Répartition du contenu par domaine (WebPageTest.org)

J’ai ensuite copié tous les domaines externes (et leurs sous-domaines) du rapport “Content Breakdown by Domain” de webpagetest.org (photo ci-dessus.) Inclure “//” devant chacun d’eux comme ceci :

//www.facebook.com

//www.youtube.com

//www.google.com

//fonts.gstatic.com

//www.gstatic.com

Une fois que vous avez votre liste, collez-la dans la section Prefetch DNS requests dans WP Rocket.

Add-ons

J’ai allumé les “Add-ons” suivants :

Google Tracking : WP Rocket hébergera localement les scripts de Google Analytics. Si vous n’utilisez pas Google Analytics, vous n’avez pas besoin de l’activer. Mais vous devriez utiliser Google Analytics !

Pixel Facebook : WP Rocket hébergera localement les Pixels Facebook. Si vous n’utilisez pas un Pixel Facebook, vous n’avez pas besoin de l’activer.

Eclat de nuages : Ce site utilise Cloudflare, donc cette intégration a été mise en place. Si vous n’utilisez pas Cloudflare, alors ne vous inquiétez pas pour celui-ci.

ShortPixel

Grâce à ShortPixel, l’optimisation de toutes les images de votre site est un jeu d’enfant. Il compresse toutes les images et les vignettes pour vous. Après avoir compressé toutes les images, il remplace automatiquement toutes les images originales du site.

J’ai installé ShortPixel et j’ai utilisé les paramètres suivants :

Onglet Général

Type de compression : J’ai choisi “Lossy” pour ce site. Si vous ne voulez pas que les images de votre site aient une perte visible de qualité, vous pouvez choisir “Brillant” ou “Sans perte”. Si vous ne savez pas lequel utiliser, lisez ce guide de ShortPixel.

Incluez les vignettes : Activez cette option pour que les vignettes (pas seulement les grandes images) soient compressées.

Sauvegarde des images : Activez cette option. Cela vous permettra de restaurer les images dans leur état original ou de les convertir de Lossy à Lossless et vice-versa.

Onglet Avancé

WebP Images : En choisissant cette option, vous pouvez utiliser les versions WebP de vos images si le navigateur de l’utilisateur le prend en charge.

Selon Google, “WebP est un format d’image moderne qui offre une compression supérieure sans perte et avec perte pour les images sur le web. Grâce à WebP, les webmasters et les développeurs web peuvent créer des images plus petites et plus riches qui rendent le web plus rapide.

Les images WebP sans perte sont 26 % plus petites que les PNG. Les images WebP avec perte sont 25-34% plus petites que les images JPEG comparables à indice de qualité SSIM équivalent”.

Onglet API Cloudflare

Ce site utilise Cloudflare et cette intégration a donc été mise en place. Si vous n’utilisez pas Cloudflare, alors vous n’avez pas à vous soucier de ce paramètre.

Traitement des images

Une fois que vous avez choisi tous vos paramètres, cliquez sur “Sauvegarder et passer au processus de traitement en masse”. Cela lancera le processus de compression et prendra un certain temps.

Après avoir compressé les images en masse, vous pouvez voir combien d’espace disque et de bande passante vous avez économisé.

La bande passante économisée est calculée à 10 000 impressions/image.

Une dernière mise au point

La page d’accueil comportait un curseur qui contenait quatre grandes diapositives/images. Le client était d’accord pour remplacer ce curseur par une seule image statique. Cela a permis de réduire encore plus le temps de chargement.

Dans de tels cas, je vous recommande vivement d’utiliser une image statique avec un CTA sur la page d’accueil, au lieu d’utiliser un curseur.

Suppression des codes inutiles

Après avoir installé et configuré WP Rocket et ShortPixel, il restait encore beaucoup d’autres optimisations à apporter au site. Je vais vous montrer comment faire certaines des plus faciles qui ne nécessitent pas de développeur.

Réduire les consultations DNS” était l’une des suggestions restantes concernant la vitesse du site. Il y a des choses que vous pouvez faire, mais elles sont un peu compliquées et nécessitent des compétences techniques. Mais ce que vous pouvez faire pour améliorer la situation, c’est simplement supprimer le code tiers inutile de votre site.

Une fois de plus, j’ai utilisé WebPageTest.org pour voir tous les domaines qui doivent être “consultés” lors du chargement du site. Vous pouvez ainsi voir quels sont les scripts présents sur le site et décider si certains d’entre eux peuvent être supprimés.

Scripts non utilisés supprimés

Je pouvais voir dans cette liste que le site avait installé Hotjar. J’ai demandé au client s’il utilisait toujours Hotjar et il a répondu “non”. J’ai donc simplement supprimé ce script. Cela a instantanément supprimé six demandes de la liste.

Répartition du contenu par domaine (webpagetest.org)

Les versions redondantes de Facebook et Google Maps

Ce site a vu Facebook et Google s’intégrer dans la barre latérale plus d’une fois. J’ai donc retiré les doublons et nettoyé la barre latérale.

Stocker les fichiers localement

Vous remarquerez dans la capture d’écran ci-dessus qu’il y avait un certain nombre de domaines de Google et de Facebook. Dans WP Rocket, j’ai utilisé les extensions Google Tracking et Facebook Pixel. Maintenant, ces fichiers seront stockés localement à la place. Lorsque vous hébergez ces fichiers localement, toutes les demandes qui leur sont adressées proviennent du même domaine.

Après avoir pris ces mesures, le nombre de demandes pour ce site est passé de 115 à 44 !

Résultats
Google Pagespeed Insights

Vous pouvez voir que le score de Google pour les téléphones portables peut encore être amélioré. Je suis en fait heureux que cela soit arrivé avec ce projet parce qu’il montre de manière réaliste les défis que vous pouvez rencontrer lorsque vous optimisez un site pour la vitesse.

GTmetrix

WebPageTest.org
Ventilation du contenu par domaine (webpagetest.org)

Tableau avant et après
OutilAvantAprès
Google Pagespeed Insights : Score de bureau7091
Google Pagespeed Insights : Score mobile1455
GTmetrix : Pagespeed ScoreCA
GTmetrix : YSlow ScoreDA
GTmetrix : Temps chargé5.3s4.2s
GTmetrix : Taille de la page4.13 MB888 KB
GTmetrix : Demandes11544
WebPageTest : Temps de chargement de la première vue8.866s2.392s
Autres questions

TTFB” signifie “time to the first byte”. C’est le temps qu’il faut au premier octet pour être reçu par le navigateur après qu’une requête HTTP a été faite.

La TTFB n’a pas été très bonne dans aucun des tests de vitesse du site, sauf pour le premier sur webpagetest.org qui a dû être un coup de chance. Une TTFB élevée peut être due à un mauvais hébergement ou peut être due à un routage par Cloudflare. Ce site semble avoir un hébergement décent, il est donc très probable qu’il s’agisse de Cloudflare.

Conclusion

Alors voilà ! Vous pouvez accélérer votre site web d’entreprise local avec seulement quelques plugins payants. Bien entendu, vous ne pouvez pas tout réparer, mais vous pouvez réaliser vous-même quelques gains rapides.

Bien que la vitesse du site ne soit qu’une petite pièce du puzzle du référencement local (parmi les optimisations GMB, les critiques et la création de liens), elle peut avoir un effet considérable sur les taux de rebond, les taux de conversion et la satisfaction des utilisateurs.

faction.