DEV. FRONT-END by CÉDRIC VÉRAUD

NOTE : L’audit présenté ici a été réalisé en live à l’adresse suivante. L’audit fourni en .pdf était daté et il fallait assurer une analyse basée sur des outils de mesure à jour.

Outils de mesure

Pour une analyse complète du site et pour répérer les éléments défaillants, une batterie d'outils est nécessaire.

Analyse des performances

L’accumulation de ressources lourdes et inadaptées pèse sur les performances globales du site et leur appréciation par les moteurs de recherche. Ci-dessous, Lighthouse liste les éléments problématiques en les priorisant.

Problèmes d'accessibilité

L’accessibilité vise à créer des sites et des outils web de haute qualité, inclusifs pour les personnes atteintes de handicap, facilement lisibles par les moteurs de recherche et attractifs pour tous.

Erreurs de sémantique

Le Web sémantique cherche à standardiser la structure des sites web pour faciliter l’exploitation des données structurées, pour donner du sens au contenu des pages, en facilitant leur interprétation par les moteurs de recherche.

Reprise méthodique de la sémantique

EN-TÊTE
Dans l’en-tête certaines balises indispensables ont été ajoutées :
✦ <meta> : description, indexation par les robots
✦ <title> : titre qui apparait dans les résultats de recherche.
Ce sont ces informations et mots clés qui apparaitront dans les résultats de recherche Google et autres moteurs.

D’autres balises ont été différées pour ne pas bloquer le chargement des données prioritaires.
✦ Les fonts sont importées dans le CSS
✦ Les balises <script> ont été déplacées en fin de page
✦ Les frameworks Bootstrap et jquery ont été mis à jour via un chargement CDN différé

STRUCTURE HTML
Une structure html doit respecter certaines règles pour garantir une bonne compréhension par les moteurs. J’ai ajouté les balises structurelles suivantes.
✦ <header>, <nav>, <footer>
✦ <main>, <section>, <aside>, <article>
✦ <h1>, <h2>, <h3>...
✦ <img> avec un nom d’image efficace et un texte alternatif détaillé pour offrir des mots-clefs pertinents aux moteurs.
✦ Pour le formulaire, <label> et <input> nécessitent d’être liées avec for=” ”

AUTRES
✦ Ajustement des classes CSS conformes au nouveau balisage HTML
✦ Création d’un footer contenant les informations de l’activité


Comme nous le voyons avec le score intermédiaire affiché ci-dessus, cette première action d’importance résoud déjà la plupart des problèmes et améliore même le score de performances, auquel nous allons maintenant nous attaquer plus spécifiquement...

Dimensionnement & format des images

Les images originales n’étaient pas adaptées à une diffusion digitale. Les dimensions étaient contraintes par la taille des écrans, le poids beaucoup trop important et les formats .jpg et .png datés et optimisables.

En l’état, l’impact sur la rapidité et la fluidité du site était désastreux. De surcroît, les dimensions ne correspondaient pas du tout à l’affichage du site dont la largeur maximum est fixée à 1920px (standard widescreen). Inutile, donc, de charger des images (beaucoup) plus grandes que cette limite.


Le gain de poids est au final très conséquent. Pour autant, les images optimisées et converties au format .webp gardent toutes leurs qualités originelles mais répondent désormais aux critères du web.

Le carousel & les versions mobiles

Le carousel en haut de page a un impact fort sur la rapidité du site, notamment concernant les appareils mobiles. Afin d’adapter au mieux ce composant, un mapping srcset (source set) a été mis en place. Ainsi, selon la résolution d’écran du client, le navigateur choisira le dimensionnement d’image le plus proche et libèrera ainsi de la charge utile. Par ailleurs un loading “paresseux” a été ajouté aux images qui ne sont pas immédiatement affichées à l’ouverture de la page.

Frameworks & minification

Les fichiers lourds comme Bootstrap ou Jquery bénéficient d’une mise à jour, d’une version minifiée et d’un chargement différé.


Les balises <script> ont été déplacées en bas de page.


Tous les fichiers non visibles (.css / .js) ont été minifiés afin de libérer de la charge, cela consiste à compresser le texte du fichier en éliminant les espaces et sauts de lignes inutiles pour les robots.

Contenu enrichi

Pour le référencement local, nous avons besoin d’indiquer les données essentielles de l’activité commerciale de Nina. Pour cela nous allons utiliser deux outils :
✦ Schema.org dresse un mapping précis des données de localisation et de business que nous allons intégrer dans l’en-tête du site.
✦ Avec OpenGraph nous définissons les meta-données pour les réseaux sociaux. Facebook et X ont été ajoutés et apparaitront ainsi dans les recherches.


Google Rich Snippet confirme désormais la présence de contenu enrichi.

Performances

A la suite de ces interventions, nous pouvons comparer les scores. Lighthouse nous indique ici un score sans commune mesure avec l’audit initial. Nous avons ainsi la garantie que les moteurs de recherche ne laisseront pas le site de côté.

Accessibilité & SEO

L’analyse de Wave nous indique ici que les erreurs d’accessibilité sont réglées, tandis que Lighthouse nous confirme les audits réussis. Le validateur W3C quant à lui n’affiche plus d’erreus sémantiques.

Performances mobile (hors demande)

Les versions mobiles du site, bien qu’exclues de la demande, ont néanmoins bénéficié des améliorations. Étendre le srcset (voir plus haut) à l’ensemble des images pourrait encore améliorer ce score.