Audit de performances

site : www.quantum-way.com

L’audit de performance a pour objectif d’analyser la fluidité globale du site internet.
Cet élément influence grandement le référencement, la rétention des visiteurs et le taux de conversion.

Pour ce faire deux éléments vont êtres examinés :

La vitesse globale du site ainsi que tous les éléments qui influencent la vitesse d’affichage de vos pages.
L’expérience utilisateur (UX) qui décrit l’affichage adapté du contenu et la simplicité d’utilisation du site.

Vitesse du site

Score de performance sur ordinateur

Score de performance sur mobile

Ces analyses sont basées sur les outils de référence

Vitesse moyenne d’affichage : 4 secondes

La vitesse d’affichage indiquée ici est le temps moyen à partir duquel la page devient interactive, navigable pour l’utilisateur.
Il est fortement recommandé que ce temps soit en dessous de 3 secondes. Au delà de ce délais il est démontré que certains utilisateurs quittent.

Poids moyen de la page : 6 Mo

Le poids moyen de la page prend en compte l’intégralité des éléments à charger pour que la page s’affiche (texte, images, structure, design, polices…).
Plus les éléments à charger sont volumineux, plus la page mettra de temps à s’afficher. Il est recommandé d’avoir comme objectif un poids moyen de 1 Mo. A noter que l’optimisation du contenu (compression, minifying, WebP…), en plus de l’utilisation de tailles d’images appropriées, sont indispensables pour atteindre cet objectif.

Optimisation des images 📷

• Poids adapté des images : Non

Le poids des images influe grandement sur le poids total de la page, c’est même bien souvent ce qui l’impacte le plus.
Avoir des images de taille importante ralenti donc considérablement le temps de chargement, encore plus si les images ne sont pas compressés et que la page n’a pas de ‘lazy load’ configuré.
Il est recommandé d’avoir des images autour de 150 Ko, en pouvant aller exceptionnellement jusqu’à 500 Ko. Les images au delà de ce poids sont à proscrire.

• Utilisation du format WebP : Non

Le format WebP est un format de compression d’images mis au point par Google, c’est aujourd’hui la norme à utiliser sur les sites internet.
La conversion automatique des images dans ce format permet de réduire grandement leur poids et donc leur impact sur le temps de chargement. Ce format permet généralement de rendre les images 26% moins lourdes.

• Compression des images : Non

La compression des images, en plus de l’utilisation du format WebP, permet de réduire la taille des images chargées tout en évitant la perte de qualité.
Il existe de nombreux outils qui permet de compresser les images automatiquement avec Wordpress. Il est important que cette compression soit faite en fonction de l’affichage de l’image afin de préserver l’expérience utilisateur. C’est à dire de réduire l’image chargée à la dimension à laquelle elle apparaît sur le site

• Utilisation du « lazy load » : Non

Cette fonctionnalité a pour objectif de rendre la page navigable le plus rapidement possible en donnant la priorité au contenu, puis en chargeant les photos. Cela permet également de charger en priorité les photos directement visible par l’utilisateur, pour ensuite charger les photos qui apparaissent plus bas dans la page

• Distribution des images via un CDN : Non

Le content delivery network (CDN) ou en Français le Réseau de Diffusion de Contenu permet de répliquer le contenu de votre site internet via des serveurs relais au plus proche de l’utilisateur final. Cela permet la réduction de la bande passante et du temps de latence pour les utilisateurs.
Avoir un CDN permet donc d’afficher plus rapidement votre contenu

Score d’optimisation des images

Tout reste à faire concernant l’optimisation des images.
Vous avez des actions simples à mener qui vont grandement améliorer l’optimisation des vos médias.
Je vous conseille de commencer par ce travail dans votre stratégie d’optimisation car vos images représentent en général +80% du poids de vos pages. Leur optimisation va donc avoir un gros impact. Certaines images font actuellement 1Mo, cela devrait être le poids total de la page.

Je recommande également de mettre en place des règles à respecter pour votre équipe en charge du contenu. Par exemple déterminer un format d’image pour les images produits, les images d’en-tête et pour les images de fonds. En déterminant à chaque fois la dimension à respecter et le poids à ne pas dépasser.

Si vous avez besoin d’accompagnement je propose un abonnement d’optimisation et suis toujours disponible sur demande.

Optimisation du contenu 📝

• Mise en cache des pages : Non

La mise en cache du contenu permet de stocker temporairement un sous-ensemble de données afin de les distribuer de façon ultra-rapide aux visiteurs lors de leurs prochaines visites

• Configuration de la mise en cache par les navigateurs : Non

Les navigateurs (Chrome, Safari, Mozilla…) disposent de leur propre système de cache qu’il convient d’utiliser de façon appropriée afin d’y stocker des données temporaires. Cela permet d’améliorer considérablement la vitesse d’affichage des sites internets.
A noter que l’utilisation du cache navigateur engendre souvent un délais dans l’affichage des modifications faites sur le site. Pour afficher rapidement les modifications il est possible de vider le cache au niveau du serveur.

• Compression Gzip : Non

La compression Gzip permet de compresser le contenu des pages web et des feuilles de style avant leur envoi aux navigateurs. Les fichiers étants plus légers après compression, cela réduit le temps de transfert.

• Optimisation du code (minifying) : Non

Un site internet est basé sur des nombreux codes provenants de Wordpress, du thème, des plugins et des codes insérés manuellement. Le ‘minifying’ vise à grouper certains codes afin que ceux-ci chargent plus rapidement.
Attention ceci est une pratique avancée qui peut casser votre site. Je déconseille absolument d’utiliser des plugins ou des outils de ‘minifying’ entièrement automatisés. Cela doit être fait à la main.

• Optimisation de l’ordre d’affichage (defering) : Non

Le ‘defering’ permet de décider l’orde d’affichage afin de privilégier le contenu indispensable à l’interractivité de la page. Cela permet d’améliorer la vitesse du site internet pour les internautes.
Attention ceci est une pratique avancée qui peut casser votre site. Je déconseille absolument d’utiliser des plugins ou des outils automatiques. Cela doit être fait à la main.

Score d’optimisation du contenu

Le contenu n’est actuellement pas optimisé pour réduire le temps de chargement des pages.
En plus des points cités ci-dessus j’ajouterai que l’utilisation d’un builder comme Elementor rend plus compliqué l’optimisation, il convient donc de choisir la bonne stratégie.
Si vous souhaitez optimiser vous même le contenu je vous conseille de vous limiter à la mise en cache et la compression qui sont plus accessibles.
Le minifying et le defering nécessitent un travail plus poussé et de nombreux tests avec Elementor. Si vous souhaitez réaliser cette partie gardez à l’esprit qu’il est absolument déconseillé d’utiliser plusieurs plugins d’optimisation sur un seul site.

Je vous conseille également fortement d’optimiser votre contenu créé avec Elementor : plus vous mettez de blocs, de colonnes, de champs, plus le code sera important. Il faut faire la distinction entre contenu (qu’il faut en quantité) et la structure (qu’il faut limiter)

Si vous avez besoin d’accompagnement je propose un abonnement d’optimisation et suis toujours disponible sur demande.

Expérience utilisateurs (UX) 🎨

• Charte graphique

Etat d’avancement :

La charte graphique utilisée pour votre site n’est pas uniforme sur l’intégralité des pages. Pour une meilleure expérience utilisateur il est important d’avoir une cohérence sur le site ainsi que tous les posts externes.

Certains éléments sont à améliorer en priorité :
– La police doit être la même partout.
– La combinaison taille du texte et épaisseur doit être la même pour tous les éléments similaires (tous les titres h1 d’une certaine façon, tous les paragraphes d’une autre, tous les boutons d’une autre….)
– Les couleurs doivent êtres respectés : vous devez avoir une couleur de base et une seule couleur d’action. La couleur d’action doit être utilisée pour diriger les utilisateurs et doit être la même partout (sur les boutons, les liens…)
– Seules ces deux couleurs doivent êtres utilisées : utiliser de multiples couleurs engendre de la confusion
– La structure doit être uniforme (espacement entre les blocs, marges, marges internes, bordures, centrage…)

• Navigation

Etat d’avancement :

Le site est dans l’ensemble navigable et il est possible de trouver ce que l’on souhaite. La navigation n’est cependant pas intuitive, ce qui risque d’impacter fortement le taux de rebond et le taux de conversion.

Voici quelques pistes pour améliorer la navigation :
– Votre client doit savoir, une quelques secondes ce que vous proposez et ce qu’il peut acheter sur votre site, il faut pour cela que les menus correspondent à ce que vous vendez
– Les sous menus ne sont pas très adaptés pour des visiteurs non avertis qui visitent votre site pour la première fois. S’il y a des sous menus, ceux-ci doivent êtres compréhensibles pour tous et regrouper de larges catégories
– La page d’accueil comporte un très grand nombre de sections, il est préférable d’avoir peu de sections pour accrocher l’attention des visiteurs et les diriger dans leur parcours
– Les landings pages telles que /therapies-traumas et /developpement-personnel ne doivent pas apparaitre dans la navigation (ce sont ici des doublons des produits dans la boutique).
Par définition les landings pages ne sont accessibles que par les utilisateurs qui arrivent de l’extérieur du site

• Version mobile

Etat d’avancement :

Le site est utilisable sur mobile, ce qui est déjà une bonne chose. La navigation n’est en revanche pas optimisée pour la navigation sur téléphone, les éléments créés pour l’affichage sur ordinateur n’ont pas été adaptés.
Vous êtes de ce fait grandement pénalisés par Google qui considère que votre site n’est pas optimisé. Cet outil permet d’en savoir plus : Analyse mobile Google
D’autre part les utilisateurs qui souhaitent accéder à votre site sur mobile (on estime que plus d’un utilisateur sur deux ne navigue que sur mobile), risquent de quitter sans version optimisée pour leur appareil.

Voici les éléments à améliorer en priorité :
– Il ne faut jamais utiliser de « sticky header » sur mobile (le bouton de choix de langue qui reste en haut de la page)
– Le haut de page n’est pas créé pour mobile, c’est l’un des éléments les plus importants de votre site
– Une navigation dédiée aux mobiles doit être créée car l’utilisation n’est pas la même que sur ordinateur : elle doit être basée sur le scrawl, l’affichage plus gros de certains éléments, l’éloignement des éléments et un parcours client moins long. Il ne doit pas y avoir de popup et l’ouverture de pages dans d’autres onglets doit être limitée.