Chapitre 2 : État des lieux

URL :  https://gtmetrix.com/

GTmetrix est un outil ressemblant à Lighthouse de Google qui est accès sur la performance générale d'une page. Assez complet, il propose plusieurs astuces pour améliorer les points qu'il a détecté comme faibles.

Résultats : Agréablement surpris pour le peu de temps que j'ai passé à l'époque à intégrer ce thème. Il reste un peu de marge à aller chercher d'un point de vue performance notamment en travaillant sur le poids de la page.
On remarque très vite que les trois quarts du poids est dû uniquement aux images et polices d'écriture. La marge de manœuvre est donc assez importante.

Objectifs :

• Réduire le poids tout en gardant les mêmes fonctionnalités, voir plus.
• Faire baisser le nombre de requêtes au niveau des images en remplaçant certaines images décoratives par du CSS, Glyphes ...

URL :  https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=fr

Lighthouse est l'outil le plus utilisé par les développeurs/intégrateurs. Il est accessible directement depuis la console de développement de Google Chrome. 
Le mieux est de le lancer avec le paramètre "Mobile". Les résultats sont plus sévères notamment à cause de potentiels vitesses de connexions plus faibles et ainsi coller avec la politique de Google qui valorise l'optimisation de la navigation sur mobile.

Certaines mesures étaient déjà présentes dans GTmetrix mais n'ont pas du tout les mêmes valeurs notamment sur les temps de réponses. D'où l'importance d'avoir plusieurs outils mesurant la même chose afin de pouvoir faire des moyennes.

Résultats : Ces données valident le fait que je ne partirai pas de trop loin tout en ayant quand même des axes d'améliorations possibles. 

Objectifs :

• Avoir la note maximale dans les rubriques Accessibilité, Bonnes pratiques et SEO
• Corriger tous les diagnostiques rouge si c'est possible dans mon contexte. Cela fera remonter la note de performance.

URL :  https://yellowlab.tools/

C'est sans aucun doute l'outil que je préfère utiliser. Le dashboard, les résultats, les détails et conseils sont précis et très compréhensibles. En plus il est gratuit et open-source, que demander de plus ?

Résultats :  C'est plutôt acceptable. Il y a quand même deux points noirs à vite corriger : les rubriques CSS et Webfonts. 
Concernant le CSS, beaucoup de remontées concernent les feuilles de styles mm-menu qui est un module Drupal pour avoir un menu responsive. Ça me prouve la nécessité en éco-conception d'éviter un maximum les librairies externes surtout si la fonctionnalité est assez simple à faire. 
Concernant les polices d'écriture c'est entièrement de ma faute par méconnaissance à l'époque de ce sujet. Un nouveau monde à apprendre !

Objectifs :

• Diminuer la profondeur des balises HTML (Drupal n'est pas un bon élève sur ce point en utilisant les templates natifs)
• Trouver une solution pour la partie webfonts
• Remplacer les librairies externes comme mm-menu ou carrousel avec du code custom léger qui respectent les recommandations

URL :  https://www.seoptimer.com

En terme d'outil SEO d'analyse j'utilise principalement SEOptimer pour au minimum corriger les erreurs flagrantes. Dans le cas de figure de ce projet le SEO n'est pas ultra important une fois les bases installées. Je n'ai pas besoin de pousser très loin le curseur contrairement à un site E-commerce où il faut une attention toute particulières pour optimiser au maximum les conversions.

Attention, cet outil semble ne fonctionner qu'avec les pages d'accueil des sites web. En tout cas dans sa version gratuite.

Résultats :  Au vu des retours fait pour SEOptimer, il est évident que je ne pourrais pas avoir les meilleures notes dans l'ensemble des catégories. Pour ça il me faudrait des comptes sur tous les réseaux sociaux ce qui n'est absolument pas dans mon optique, tout comme la partie Google Analytics qui semble importante pour ce genre d'outil. 
La note performance va s'améliorer automatiquement avec les recommandations des outils précédents.
Il restera la note référencement où quelques actions concrètes restent à faire.

Objectifs :

• Corriger les remontés concernant le référencement
• Traiter un maximum des priorités faibles en gardant à l'esprit le coût(temps)/bénéfices
• Essayer de mettre en place un plan pour améliorer les backlinks

URL :  https://seositecheckup.com/

Deuxième outil SEO que j'utilise pour valider les recommandations du premier et potentiellement trouver d'autres améliorations.

Résultats :  Il affiche les mêmes "soucis" impactant le SEO comme la non présence des réseaux sociaux et la non présence de Google Analytics. Il est cependant légèrement plus loquace que le précédent outil.

Objectifs :

• Mêmes objectifs que le programme précédent, corriger les erreurs principales puis regarder les demandes non chronophages

   

URL :  https://wave.webaim.org/

Première fois que j'utilise cet outil pour faire un tour sur l'accessibilité d'une page. L'utilisation est assez ludique avec une bonne catégorisation des éléments remontés. 

Résultats :  Il y a quelques corrections à effectuer notamment sur les contrastes. Ce sera pris en compte dès les maquettes de la refonte.

Objectifs :

• Corriger les erreurs
• Repasser sur toutes les images pour ajouter les textes alternatifs manquants
• Faire un menu mobile custom en respectant les règles d'accessibilités

URL :  https://www.ecoindex.fr

Le plus connu sur ce thème est EcoIndex. Le calcul est assez simple et totalement transparent (Fonctionnement). Pour des sites complexes à fort impact cet algorithme est juste une base. Une analyse plus approfondie sera nécessaire pour mieux cibler l'état réel d'un site web sur ce point.

Résultats :  Chiffres semblables à ceux des outils axés sur les performances. Le poids et le nombres de requêtes sont plutôt corrects. En revanche le structure HTML est trop complexe d'où la nécessité de reprendre la main sur les templates de Drupal.

Objectifs :

• Simplifier très fortement le HTML au vu de la simplicité de la page
• Concevoir un header et footer ultra léger afin d'avoir le plus de marge de manœuvre et complexité possible sur le contenu principal des pages. Cela permet d'être plus efficace dans les contenus notamment d'un point de vue SEO. 

URL :  

• Add-on Firefox 
• Add-on Chrome
   

Différent des autres outils utilisés jusqu'ici, GreenIT est un add-on à installer sur un navigateur. Depuis la console de développement, il permet d'accéder aux résultats de ses calculs sur la page en cours. Très bon programme notamment en phase de développement pour pouvoir lancer régulièrement des tests sans avoir le site en ligne.

Résultats :  On retrouve globalement les mêmes chiffres que sur EcoIndex mais avec plus d'informations sur les améliorations possibles.

Objectifs :

• Comparé à EcoIndex, GreenIT préconise au maximum 27 requêtes contre 78 par page. L'objectif est de s'approcher au maximum des 27 requêtes sauf sur certaines pages comme ici où il y a déjà une dizaine de requêtes juste pour les images d'illustration 😅
• Nouvelle indication ici, la demande pour avoir une feuille de style en cas d'impression de la page.
  Fonctionnalité que je n'ai quasiment jamais vu sur mes projets professionnels car je ne savais pas que l'impression de pages web étaient encore utilisées aujourd'hui hormis pour les sites type recettes de cuisine.