L’application Set & Match est née pour mettre en relation joueuses et joueurs de tennis avec des coachs.

Cela, dans l’optique de préparer un tournoi, ou améliorer un aspect précis (d’ordre technique, physique ou mental).

NDA: La fonctionnalité pour l’inscription a été volontairement désactivée. L’application n’a pas vocation pour l’instant à accueillir des utilisateurs, c’est un test . Tout n’est pas encore en place, notamment l’aspect juridique, collecte de données etc…

En plus d’un profil public détaillé consultable, Set & Match met a la disposition de ses utilisateurs un système de recherche simple et efficace.

Une barre de recherche par mots clés, pour cibler une spécialité recherchée, un budget équivalent etc…

Il sera aussi possible de rechercher par dates de disponibilités. Ces dernières seront liées à un lieu particulier, par exemple, du 02/03/2021 au 10/03/2021 à Londres.

L’application Set & Match est bâtie sur les frameworks Symfony 4.4 et Bootstrap 4.5.

Pour que l’utilisateur puisse télécharger son portrait, j’ai installé le Vich-uploader Bundle.

J’ai aussi utilisé le plugin DataTables en JQuery pour le CRUD dans l’onglet d’administration.

Très pratique pour son système de pagination, sa barre de recherche et autres filtres intégrés.

Une base de données avec une table principale, User, autour de laquelle gravitent les autres (en relations ManyToMany ou OneToMany).

J’ai aussi indexé divers champs, les plus pertinents, pour accélérer la recherche par mots clés.

Pour le référencement naturel, j’ai soigné les balises <title>, cibler les mots clés avec <strong>, le heading, l’attribut alt de la balise <img>.

J’ai aussi été attentif a bien renseigner les différentes <metaDescription>, choisir le format .webp pour les images et ajouter l’attribut loading= »lazy » toujours pour la balise <img>

Tout ce travail ayant pour but d’améliorer le chargement des pages, et donc le SEO

Et toutes ces techniques, apprises notamment chez Wexample, ont donné de bons résultats, en performances pures comme en éco-conception.

GreenIt Analysis (plugin Mozilla et Chrome)

Ecograder

Website Carbon

PageSpeed Insights

GTmetrix

Découvrant à l’occasion de mon stage ce nouveau champ d’action, j’ai dû dans un premier temps me documenter. Visionner aussi plusieurs vidéos (certaines destinées aux non-initiés, d’autres plus pointues). C’était un préalable et une nécessité me concernant, pour pouvoir passer à l’étape suivante.

Après les avoir référencé,  j’ai testé une grande nombre de plugins. Pour ensuite n’utiliser que les plus convaincants, certains destinés à l’optimisation des fichiers (Fast Velocity Minify, Autoptimize, Advanced Database Cleaner) ou aux images (Imagify, reSmush.it, a3 Lazy Load et WebP Express). 

J’ai aussi fait des recherches pour répertorier les thèmes WordPress déjà optimisés (tels que GeneratePress, Astra, Neve, pour ne citer que ceux là). Ils sont à installer de préférence (si ce n’est obligatoirement) pour commencer sur des bases environnementales plus saines.

Durant toute cette phase d’ajouts et réglages de plugins, j’auditais les nouvelles performances du site. Avec des outils axés écoconception tels que: GreenIt Analysis (extension Firefox et Chrome), Ecograder ou Website Carbon. Et d’autres outils plus généralistes tels que: GTmetrix, WebPageTest ou Yellow Lab Tools.

Le double objectif étant d’optimiser les performances « pures » du site, tout en améliorant ses indices environnementaux (tout au moins ne pas les dégrader).

Voici quelques écrans « avant/ après » pour illustrer cette progression sur les divers outils d’audit.

Les outils axés éco-conception

Ecograder avant

Ecograder après

Website Carbon avant

Website Carbon après

Les outils de mesure plus généralistes

GTmetrix avant

GTmetrix après

Yellow Lab Tools avant

Yellow Lab Tools après

Pour matérialiser toute cette étude, j’ai rédigé un article documenté. Je me suis appliqué à soigner tout le travail sur la lisibilité et le SEO, inhérent a cette tache pour optimiser le référencement naturel. Ce soin a été payant, matérialisé par de bons scores sur le plugin Yoast

Durant ce stage pour optimiser le site Wexample,  j’ai aussi été initié a l’installation intégrale d’un WordPress a partir d’un script Docker (console Linux sur Ubuntu). Cette démarche était très intéressante et nouvelle pour moi. Les bénéfices qu’on en retire sont immédiats (en temps d’installation de projet), une fois configuré le script Docker. Ce dernier a par ailleurs évolué suite à mes tests concluants, pour les intégrer de base.

Toute cette expérience fut hautement bénéfique. En plus de monter en compétence sur le CMS WordPress en général (et en SEO et optimisation en particulier), j’ai pris conscience de la pollution générée par le Web.

Si Internet était un pays, il serait le 3ème plus gros consommateur d’électricité au monde avec 1500 TWH par an, derrière la Chine et les Etats-Unis. Au total, le numérique consomme 10 à 15 % de l’électricité mondiale, soit l’équivalent de 100 réacteurs nucléaires. Et cette consommation double tous les 4 ans !

Fournisseur-Energie

Et désormais je travaillerais en tenant compte cette dernière. Pour mon portfolio Fatz Studios, j’ai appliqué cette méthode d’optimisation qui m’a permis d’améliorer mes indices « globaux » comme environnementaux ! Cependant, ils ne peuvent égaler les indices de Wexample, mon template de base n’étant pas optimisé (d’où l’importance de son choix au moment d’installer votre WP )

PageSpeed Insight

J’étais tellement fier d’avoir fait basculer mon portfolio dans le « vert »  que j’ai mis le badge de Website Carbon dans mon pied de page .