ETUDE DE CAS
Analyse
et intervention
site www.bbies.fr
Objetif : Examen du site www.bbies.fr. Liste des modifications apportées date par date et analyse des résultats de façon à améliorer l’expérience de navigation des visiteurs.
Lancement du test
PROBLEME :
https://www.bbies.fr : Valider la propriété du domaine via l’enregistrement DNS. Impossible de trouver le jeton de validation dans les enregistrements TXT de votre domaine. Les enregistrements DNS TXT suivants ont été identifiés à la place : v=spf1 include:mx.ovh.com ~all
Nous avons donc modifié « v=spf1 include:mx.ovh.com ~all » par la valeur demandée par la console.
16 janvier 2021
Résutat médiocre ( voir nul ) : 09/100
Message de la console : « Les formats d’image comme le JPEG XR et WebP proposent souvent une meilleure compression que les formats PNG ou JPEG. Par conséquent, les téléchargements sont plus rapides et la consommation de données est réduite. »
Il faudrait optimiser les images et les convertir au format Webp qui permettrait de gagner environ 50% mais le souci, c’est qu’actuellement, WordPress ne prend en charge nativement le format WebP. Par conséquent et en attendant, il va falloir réduire le poids des images ( il existe des plug-ins WordPress comme WebP express ) mais l’objectif reste de soulager le noyau du site B’bies ). La compression des images se fera donc manuellement.
Exemple d’images chargées en page d’accueil :
Image 1 : Cliquez ICI ( 874 Ko )
Image 2 : Cliquez ICI ( 569 Ko )
Les images du Blog chargées en page d’accueil : Exemple 1 ( 2 400,00 Ko ) ou bien encore Exemple 2 ( 2 100,00 Ko )
Message de la console : » Evitez d’énormes charges utiles. Les charges utiles sont fortement corrélées aux délais de chargement interminables. Vous pouvez envisager de ne pas afficher des extraits dans vos listes d’articles (Blog), de réduire le nombre d’articles affichés dans votre page d’accueil et de répartir vos articles longs sur plusieurs pages. »
Il faut donc supprimer les articles ( extraits ) en page d’accueil et uniquement conserver un lien dans le menu.
Website Coach OVH
Le site B’bies est hébergé chez OVH. OVH propose une fonctionnalité GRATUITE baptisée » Website Coach » qui permet une analyse technique profonde d’un site Internet ( résultats disponible sous quelques heures ). Vous recevez des conseils basés sur une analyse à 360° du site Internet pour en améliorer votre audience, la sécurité et plus généralement la satisfaction de des visiteurs. Vous trouverez ci-dessous les informations transmisent par email.
RESULTATS A VENIR ( SOUS 2 ou 3 jous )
Cloudflare : Modification des DNS B’bies
CloudFlare est un service de performance et de sécurité. En moyenne, un site utilisant CloudFlare se charge 40% plus vite, utilise 60% de bande passante en moins, à 65% de requêtes en moins et est plus sécurisé. Pour se faire, nous avons associé le nom de domaine B’bies au service CDN de Cloudflare, qui protège et accélère tout site web en ligne. Le trafic du site B’bies est maintenant acheminé sur leur réseau mondial intelligent CloudFlare.
ESTIMATION DU GAIN EN PASSANT PAR CLOUDFLARE
Attention : Les informations indiquées ci-dessus correspondent à une estimation. En attendant, voici les modifications effectuées sur le domaine du site Internet B’bies :
– Le serveur ns200.anycast.me a été remplacé par chip.ns.cloudflare.com
– Le serveur dns200.anycast.me a été remplacé par kelly.ns.cloudflare.com
Une fois la propagation prise en compte, nous relancerons le test de la console afin de comparer le résultat obtenu avec la première analyse.
Nous avons activé la conversion automatique et systématique CloudFlare du » http:// » par » https:// « . Test = OK en date du 16 janvier 2021.
Minification automatique des fichiers Javascript + CSS + Html avec réduction du code par CloudFlare. Test = OK en date du 16 janvier 2021.
Compression Brotli : Accélérez les temps de chargement des pages pour le trafic HTTPS des visiteurs en appliquant la compression Brotli. Test = OK.
Nous avons activé la clé API CloudFlare dans l’extension WordPress du site B’Bies. Cette clé accélère les vitesses de chargement des pages, améliore l’optimisation pour les moteurs de recherche (SEO) et protège des attaques DDoS et des vulnérabilités spécifiques à WordPress.
Fiche produit
Problème de marge
sur desktop et mobile
La marge du thème DIVI est trop importante en natif sur Desktop et surtout sur mobile ( voir image ci-contre sur Smartphone ). Le test n’a pas été effectué sur tablette mais il convient donc d’apporter les modifications en prenant soin de suivre les instructions ci-dessous.
L’expérience de navigation est dégradée et nécessite d’être améliorée.
VOICI LES MODIFICATIONS A APPORTER
1) Dans la ligne section en bleu, cliquer sur » Réglage de la section » + » Style » + » Espacement » et supprimer la ligne » 84px » au niveau de la marge interne.
2) Dans la ligne section en vert, cliquer sur » Réglage de la rangée » + » Style » + » Espacement » et supprimer la ligne » 122px » au niveau de la marge interne.
Voici le résultat obtenu :
Modification du menu
Il y a deux menus différents sur le site B’bies :
1) Le menu standard Desktop visible uniquement sur poste fixe
2) Le menu mobile visible uniquement sur Smartphone et tablette
SUPPRESSION DE LA BARRE D’ENTETE : 83% des visites sur le site B’Bies est effectuées sur mobile. La barre d’entête fixe situé en haut des pages cachait le menu mobile. Par conséquent, nous avons définitivement supprimé la barre d’entête sur fixe et mobile permettant d’afficher uniquement le menu de navigation.
————————–
Concernant le menu Desktop, nous avons agrandi le logo B’bies en page d’accueil avant d’être réduit par un fondu lors du scroll. De plus, nous avons ajouté le code ci-dessous dans le fichier CSS de l’apparence :
#main-header {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
Ce code permet de supprimer la barre situé juste en dessous du menu. Test = OK.
————————–
Concernant le menu mobile, nous avons agrandi la taille de la police des caractéres da façon à améliorer le confort visuel.
Autoptimize version 2.8.1
Installation et paramètrage du plugin Autoptimize permettant l’optimisation et la concaténation des fichiers CSS & JS, l’optimisation des polices Google Fonts, CDN, Lazy-loading, etc.
Concaténer tous les fichiers JS liés pour éviter de bloquer le rendu de la page. Les fichiers SJ individuels resteront en place, mais seront minifiés.
Mettre en ligne « le CSS au-dessus de la ligne de flottaison » pendant le chargement du CSS principal autoptimizé uniquement après le chargement de la page. Complètement automatisé pour différent types de page avec l’onglet CriticalCSS.
Styles et scripts en cache 100 fichiers, totalisant 19,48 MB (calculé le 16 janvier 2020 )
17 janvier 2021
Absence de sitemap sur B’bies
Un sitemap est un fichier qui liste toutes les URLs (adresses) de votre site web. Ce plan de votre site permet d’aider les robots d’un moteur de recherche à obtenir des informations sur la structure de votre contenu, tout en accélérant l’indexation de votre site.
Pour faire très simple, lors de la phase d’indexation, des robots stockent votre contenu dans une base de données, avant qu’il ne soit restitué aux internautes via les résultats de recherche.
Nous avons créé un sitemap pour le site Internet B’bies baptisé « sitemap.xml » : https://www.bbies.fr/couches-lavables/sitemap.xml.
Attention : Ce fichier a été créé manuellement et nous devrons donc le mettre à jour de la même façon. Google le traitera régulièrement pour chercher des modifications.
W3 TOTAL CACHE
Améliore considérablement la vitesse et l’expérience utilisateur du site B’bies. Ajout de la mise en cache de navigateur, de page, d’objet et de base de données ainsi que de la minification de (CDN) pour WordPress.
1) La mise en cache de pages va réduire le temps de réponse de votre site et augmenter l’échelle de votre serveur web = OK.
2) La minification diminue la taille des fichiersHTML, CSS, JS et des flux de 10% en moyenne = OK.
3) La mise en cache d’objets de base de données diminue le temps de réponse de votre site. Meilleur utilisation si le cache objet est impossible = OK.
4) Le cache objet augmente fortement les performances pour les sites hautement dynamiques qui utilsent l’API = OK.
IMPORTANT : Dans le réglage des permaliens, nous avons demandé la ré-écriture des URL avec le titre de la publication.
CloudFlare
17 janvier 2021 à 18h20 : Message de ClouFlare concernant le site B’bies = » Félicitations ! Vous avez activé bbies.fr. Voici une confirmation de la modification de vos serveurs de noms avant Cloudflare et après Cloudflare : dns200.anycast.me ns200.anycast.me vers chip.ns.cloudflare.com kelly.ns.cloudflare.com. Votre site bénéficie à présent des avantages des fonctionnalités de performance, sécurité et fiabilité de Cloudflare. Découvrez les rapports sur la bande passante économisée et les menaces bloquées sur la page Analytics de votre compte.
Lancement d’un nouveau test
Message de la console : Cette page charge 4.2 Mo de données, diminuez ce poids. Le poids de votre page est important, ce qui ralentit sa vitesse d’affichage, d’autant plus sur les connexions bas débit. Cela peut également générer de la frustration pour vos internautes qui sont limités par des forfaits data.– Images : 71,70% du poids total
– JavaScript : 13,37% du poids total
– Polices de caractères : 5,72% du poids total
– CSS : 4,83% du poids total
– Textes : 4,34% du poids total
– JSON : 0,03% du poids total
18 janvier 2021
REFLEXION : SOLUTION AMP pour mobile
Etant donné que plus de 80% des visiteurs B’bies sont sur mobile, il est peut-être intéressant d’étudier la possibilité de mettre en place une version mobile du site B’bies.
Explication : Actuellement, le site B’bies est responsive ( c’est-à-dire que le contenu du site reste le même, mais il est ajusté pour le visionnement mobile en utilisant des requêtes médias ). Nous avons uniquement changé le menu. Le reste est inchangé.
Nous pourrions opter pour une transformation du site en AMP. Il s’agit d’un programme complètement différent qui a généralement des fonctionnalités mobiles plus puissantes.
Attention de ne pas confondre site responsive et AMP, ce n’est pas la même chose. De plus, votre site à beau être “responsive”, il n’en demeure pas moins qu’il reste long à charger pour les utilisateurs naviguant sur mobile.
Nous venons de faire quelques tests sur un autre site Internet ( www.vepro.fr ) et, même si le contenu du site et des produits est conservé, il y a un très gros travail de refonte sur l’apparence de la version mobile.
Solution non envisageable pour le moment . . . A suivre
Ajouter B’bies sur Bing
Bing Webmaster Tools est un ensemble d’outils d’analyse et de notification conçu pour maximiser sa visibilité sur Bing.
Nous avons donc créé le compte B’bies sur BING puis nous avons placé le fichier BingSiteAuth.xml à la racine du site via FTP.
Message = » Félicitations ! Ajout du site réussi »
Nous avons également envoyé le sitemap B’bies. Le traitement est en cours. Les premières données seront disponibles sous 48h00.
Problème « Panier »
Problème détecté dans la gestion du « Panier ». Les images ( miniatures ) n’apparaissent plus dans le panier des clients. Ce souci n’empêche en rien la finalisation de la commande mais donne un aspect peu esthétique à la page panier.
Nous avons intégré les petites images d’arrière-plan dans le fichier CSS du thème lui-même au lieu d’un téléchargement séparé. Problème résolu !
20 janvier 2021
LANCEMENT DES SOLDES D’HIVER 2021 – CREATION D’UN PACK DECOUVERTE –
Problème avec l’éditeur DIVI. Malgré une mise à jour effectuée en fin d’après-midi, l’éditeur n’offre plus la possibilité de construire ou de modifier le moindre page.
A ce stade et en attendant de trouver une solution, nous ne pouvons pas apporter les modifications liées à l’apparence des images sur la page d’accueil ( problème de taille et de poids ).
Mise à jour de WordPress vers la version 5.6
Mise à jour de DIVI vers la version 4.8.1
Mise à jour du certificat SSL vers la version 4.0.6
Nous avons vidé le cache du système afin que les mise à jour soient prise en compte
21 janvier 2021
Réponse du support DIVI : S’il vous plaît, allez dans WP Dashboard> Divi> Options du thème> Builder> Avancé et désactivez la génération de fichier CSS statique.
Le problème peut être causé par un plugin tiers ou un conflit avec d’autres codes, pouvez-vous essayer d’activer le mode sans échec à partir du centre de support et voir si le problème est résolu?
Vous pouvez le faire en allant dans Divi> Centre de support, faites défiler vers le bas jusqu’à ce que vous trouviez la section « Mode sans échec«
23 janvier 2021
Le problème précédent est résolu. La réduction et la compression de la taille des fichiers CSS empêche le bon fonctionnement de l’éditeur DIVI. Par conséquent, il faut désactiver la génération des fichiers CSS statiques dans DIVI et supprimer l’option la minification des fichiers CSS dans l’extension W3 Cache. Le problème, c’est que nous perdons environ 10% de rapidité sur les pages.
24 janvier 2021
Compression manuelle des images en page d’accueil de façon à alléger le chargement du site B’bies. A ce nouveau stade, nous lançons un test de performance.
26 janvier 2021
TEST D’UN JEU CONCOURS AVANT LANCEMENT
Ce test a été effectué du 19 au 26 janvier 2021
Test : Jeu concours
Dans l’objectif de préparer une campagne de communication importante sur le mois d’avril 2021 ( thème et objectifs à déterminer ), nous avons testé un nouvelle mécanique de jeu auprès des membres de la page facebook B’bies du 19 au 26 janvier 2021. Il s’agissait d’un jeu « instant gagnant » ayant pour objectif le partage ( viralité ) du sujet ainsi que la récupération des emails. Veuillez trouver ci-dessous les résultats obtenus.
