Le club de voile de Sevrier avait besoin d'améliorer son site web pour pouvoir afficher une offre claire de toutes leurs prestations disponibles. Ils souhaitaient aussi améliorer en même temps l'ergonomie du site et le référencement, ainsi que l’accessibilité.

Contrat rempli avec un nouveau site développé sur le CMS Wordpress en respectant les bonnes pratiques de cette plateforme.

Petit aparté : je tiens à préciser qu'il n'est jamais simple de développer un site dans une association. La plupart du temps, le travail est fait par des bénévoles qui font ça sur leurs temps libres et sans forcement les compétences, mais qui font au mieux. On ne les remerciera jamais assez.

Jusqu'à cette nouvelle version, la personne qui a géré le côté technique du site avait fait un bon défrichage avec les membres du bureau, ce qui nous a permis d'aller beaucoup plus vite. En effet, nous avions déjà les principales rubriques, il suffisait d'améliorer tout ça pour obtenir un contenu un peu plus organisé.

L'ancienne version

L'ancienne version était déjà basée sur Wordpress.
Les principaux défauts étaient :

Problème d'accessibilité : mauvaise visibilité avec des polices trop petites et un fond de couleur (voir copie écran)

Un site assez long à charger avec de nombreuses requêtes (voir copie écran) :
- 15 sur 100 au Google Speed Test Mobile
- 59 sur 100 sur Google Speed Test en Desktop
- 172 requêtes et plusieurs Méga-octets de ressources !

Des répétitions de pages et un contenu un peu mal organisé dans le menu.
Un SEO peu optimisé et des duplications de page (www, sans www)
Une mise à jour compliqué à cause de la conception du thème utilisé.

Ancien site du club de sevrier L'ancienne version du site Google Speed Mobile 15 sur 100 au Google Speed Test Mobile Google Speed Desktop 59 sur 100 sur Google Speed Test en Desktop Requête de l'ancienne version du site cvsevrier 172 requêtes et plusieurs Méga-octets de ressources ! Test eco-index ancienne version Résultat du test Eco-index de l'ancienne version Note eco-index ancienne version La note du test Eco-index de l'ancienne version

Une nouvelle version sur des bases solides

Nous avons choisi de rester sur Wordpress pour garder une pérennité sur le projet :

  • il est plutôt facile de trouver (un bon ?) développeur Wordpress pour prendre la suite en cas de besoin.
  • l'équipe étant habituée à l'interface de l'admin Wordpress, cela facilite la prise en main de la nouvelle version.
  • cela nous permettait de conserver l'hébergement.

L'idée étant de repartir sur une base propre et faire évoluer le projet au fur et à mesure.

Wordpress Ok, mais...

Wordpress est une cible facile pour les attaques malveillantes. Il est donc nécessaire de mettre à jour régulièrement la base et les plugins pour être un minimum en sécurité.

Notre façon de développer un site Wordpress se compose ainsi :

  • limiter un maximum l'utilisation de plugin
  • construire un thème complètement personnalisé et léger avec Timber
  • Utiliser les custom-post-types pour créer des sections spécifiques si besoin
  • utiliser Gutenberg pour éditer les pages

En procédant ainsi, les mises à jour sont facilitées et on maitrise complètement le projet.

Les plugins utilisés

Voici la liste des plugins utilisés :

  • ACF pour créer des champs personnalisés (obligatoire pour tout projet)
  • Jetpack pour le formulaire de contact et l'hébergement des images.
  • Aksimet pour les SPAM du formulaire de contact
  • Fast Velocity minify pour réduire les CSS et JS en 2 fichiers
  • Map Block Leaflet pour afficher une carte dans la page de contact
  • SEO Press pour le SEO
  • Redirection pour gérer les 404 et les 503
  • WP Super Cache pour mettre en cache les pages
  • Wordfence pour bloquer les attaques
  • Smush pour réduire le poids des images
  • Timber pour utiliser twig dans les templates

+ 2 plugins développés nous-même :

Nous avons donc une liste de plugins de bonne qualités qui ont des mises à jour régulières.

Le thème

Le thème est donc développé entièrement de zéro à l'aide de Timber.
Timber permet de créer des templates en utilisant le langage Twig et donc permet une séparation entre le php et le html. C'est plus propre et plus facile à maintenir.
Nous avons créé des Custom post Types pour l'agenda et l'équipe.
Le reste est composé de pages et la partie blog utilise les posts.

Côté CSS et JS, parcel JS compile tout ça.

En CSS, Sass et post CSS sont utilisés. Pour le JS, c'est principalement du Vanilla JS et JQuery est supprimé de la partie front.

Bloc Gutenberg

En plus d'utiliser les blocs disponibles dans l'édition du contenu, 6 blocs ont été développés pour le thème en suivant la méthode officielle de Wordpress avec React JS.
Cela permet de contrôler parfaitement les éléments ajoutés dans les pages pour garder une cohérence.

À noter que des blocs sont ajoutés régulièrement dans les mises à jour de Wordpress.
Utiliser Gutenberg est un gage de pérennité dans le contenu du site et des mises à jour.

Le résultat

Je vous laisse apprécier vous-même le résultat final sur https://www.cvsevrier.fr/, mais faisons un point sur cette nouvelle version :

  • Un site totalement responsive et "utilisable" sur mobile.
  • Un site optimisé et rapide (voir les résultats de Google Speed Test)
  • Un site accessible : taille police, couleur, navigation au clavier, lecteur d'écran...
  • Un contenu plus facile à maintenir pour l'équipe
  • Un meilleur référencement avec une meilleure structure et une meilleure gestion des url
  • Plus de sécurité en utilisant moins de plugin et un thème propre et bien codé.
  • Un site conforme au RGPD. Système de consentement que nous avions développé en open-source (https://github.com/ipatate/gdpr-cookies)
speed test google nouvelle version mobile 98 sur 100 au speed test google speed test google nouvelle version desktop 99 sur 100 au speed test google requête nouvelle version 29 requêtes seulement et 650 Ko !

Côté impact écologique

Pour l'impact écologique, avec le test en ligne éco index, nous sommes passé (sur la home page) :

- de 2,38 gCO2e de Co2 à 1,59 gCO2e
- de 823 éléments à 352 (nombre de tag html sur la page)
- d'un score global de 31 (E) à 70 (B)

Résultats éco index de la nouvelle version sur cette page : http://www.ecoindex.fr/resultats/?id=71294

La suite...

Tout ça pour vous montrer qu'il est donc possible de développer proprement sur le CMS Wordpress.

Depuis la mise en ligne, nous avons eu quelques mises à jour de la plateforme qui se sont déroulées sans soucis.
Le référencement s'améliore petit à petit, les moteurs suppriment les anciennes url et les résultats commencent à apparaitre.
Et Wordfence bloque la plupart des attaques malveillantes et nous prévient des mises à jour de plugin nécessaires.

Un site e-commerce statique développé avec Gatsby JS et Snipcart
Les basiques du SEO à respecter sur un site