Toutoupourlechien c’est quoi ?
Le site internet toutoupourlechien est le plus gros projet sur lequel j’ai été amené à travailler à ce jour. Il s’agit d’un site internet créé en 2013 et ayant pour but d’apporter un maximum d’informations sur nos amis canins.
Leur créateurs, Vincent et sa compagne travaillent sur ce site d’arrache-pied afin de proposer des contenus qualitatifs. Ce site est très bien positionné sur Google mais il pêchait par un manque d’optimisation et une version mobile assez lourde. A l’heure du tout-mobile, il fallait donc corriger ce problème afin de proposer une expérience 3G/4G plus allégée et donc plus rapide.
Cahier des charges
Point de départ
Ce site à été créé sur le CMS WordPress et dispose de plus de 1500 pages et articles confondus. La base de donnée est de taille impressionnante mais alourdie par l’installation et la désinstallation de plugins effectués depuis la création du site.
Le design de la version PC ayant été réalisé il y a peu, nous avons décidé de le conserver. J’avais un peu plus de liberté sur la version mobile et tablette.
Les besoins
Le menu du site était séparé en deux parties : un menu « hamburger » (menu qui ressemble à un menu mobile qui se déplie quand on clique sur l’icone) et un menu classique qui se réduit lorsqu’on descend dans la page. Ceci n’était pas très clair pour les utilisateur et nous avons donc décidé d’opter pour un seul menu avec une icone + pour dérouler le reste du menu.
Toutoupourlechien disposant d’énormément d’articles et de catégories, il a fallu repenser la page d’accueil afin de créé des section bien spécifiques regroupant les derniers articles classés par catégories ou type de page.
Certaines catégories sont hiérarchique (exemple de la catégorie santé avec des sous-catégories comme maladie, etc). Pour simplifier l’utilisation, il a été décidé de créer structure de page avec un filtre permettant de choisir sa sous-catégorie voir sa sous-sous-catégorie.
Pour les articles, le besoin était d’avoir une barre latérale sur PC avec la possibilité de choisir ce qui s’affiche dedans en fonction de la catégorie. Il fallait également prévoir la mise en place des articles en relation avec la possibilité de les choisir de manière simplifiée pour les administrateurs. Suivent ensuite l’affichage de l’auteur et un module de commentaire
Pour la gestion des pages, le gros point noir se situe sur la page race de chien en effet, celle ci répertorie toutes les pages filles qui sont des descriptions complètes des différentes races. Cette page nécessite d’être chargée rapidement car c’est un des plus gros point d’entrée du site par les utilisateurs (essayez de taper une recherche de race de chien sur google et vous tomberez directement sur ce site). Il faut donc éviter d’alourdir la page avec des appels à la base de donnée mal gérés et utiliser un affichage intelligent des images des différentes races.
La réalisation
L’audit du site
Un site comme toutoupourlechien n’est pas une mince affaire à auditer. La base de donnée très conséquente, la manière dont sont traitées les catégories , les articles et les pages sont autant de point à prendre en compte avant d’attaquer le développement.
Un RDV en amont a été indispensable afin de comprendre comment étaient utilisées les différentes fonctionnalités, et les plugins afin d’essayer d’optimiser et simplifier la tâche au CMS et aux administrateurs.
La page d’accueil
Comme décrit plus haut dans les besoin, la page d’accueil se découpe en plusieurs sections.
La première section est la partie actualité. Elle référence les 6 derniers articles de toutes les catégories confondues. Elle est présentée avec le dernier article prenant plus de place que les autres puis les 5 articles suivants.
Vient ensuite un CTA (« Call-to-action) permettant aux utilisateurs de comparer les différentes offres des assurances santé.
Suivent les sections alimentation, éducation et comportement puis les dernières races de chien et enfin les articles à la une sélectionnés par les créateurs eux-même.
La petite difficulté ici à été la presentation de la première section pour qu’elle s’affiche de manière correcte sur mobile et tablette et de ne pas charger plusieurs fois le même article
Pour finir, la page présente un footer (pied de page) avec différents liens et informations ainsi que la possibilité de s’abonner à la newsletter .
Les catégories
La gestion des catégories se fait via un menu déroulant regroupant sous catégories. Il permet une navigation simplifiée pour l’utilisateur. La barre latérale est également affichée afin de donner des informations supplémentaires liées à la catégorie.
La page race de chien
La page race de chien affiche les différentes races avec un système d’onglet tel un répertoire. La difficulté ici à été de minimiser les appels à la base de donnée et le poids des images. J’y ait apprit à me servir des transcient de WordPress. il permette un seul appel à la base de données pour des requêtes lourdes. Je ne rentrerais pas dans les détails techniques mais les gains peuvent être très confortables.
Les articles
Comme prévu dans le cahier des charges, les articles ont plusieurs sections.
La première est l’image mise en avant et le titre. La difficulté ici a été de gérer l’affichage de l’image et de son copyright. En effet, un site avec cette réputation ne veut pas avoir de soucis avec les droits à l’image.
Une petite introduction commence l’article puis vient le contenu. La barre latérale renvoie vers le le comparateur d’assurances.
Suivent des boutons de partage vers les principaux réseaux sociaux et la un espace présentant l’auteur.
La dernière partie présentent les articles en relation. Ceux-ci sont sélectionnables dans la partie administration via un champs de recherche afin d’en simplifier l’utilisation.
L’optimisation
L’optimisation du site pour mobile est la plus grosse partie du travail que j’ai effectué. Une base de donnée alourdie par des années d’installation et de désinstallation de plugin, le poids et le temps d’affichage des publicités, l’optimisation des polices et des scripts Google (et oui, c’est Google lui même qui ralenti les sites avec des scripts non optimisés 🙁 ) et enfin le travail sur le poids des images.
La base de donnée et les plugins
La base de donnée avait été alourdie par l’installation de plugin. Il a fallut trouver comment la nettoyer de manière efficace sans la casser. J’ai du créer des script afin de faire passer des données stockées par des plugins vers des fonctionnalités natives de WordPress. Ou encore simplifier des champs de données répétitifs vers un seul champ (exemple des articles en relation ou on avait jusqu’à 12 champs pour 6 articles alors qu’un tableau des 6 articles souhaités suffisait).
Pour les plugins, j’ai utilisé une méthode qui permet de ne charger que les scripts qui étaient nécessaire à la page. On gagne ainsi les temps de chargement sur des données inutilisées dans la page.
Le poids des images
Là, je suis passé par les fonctionnalités natives de WordPress qui permettent lorsqu’on importe une image de créer des images réduites afin de les afficher sur le site. Cela permet de créer un format d’image et de l’utiliser pour qu’il soit optimisé a la taille souhaitée. Exemple des images en avant sur la page d’accueil ou dans les catégorie. J’ai créé des formats correspondants au besoin de l’affichage.
La deuxième chose que nous avons faite est d’avoir stocké les images WordPress sur un serveur statique. Ceci permet au site d’être allégé de l’affichage des images. Le serveur ne se concentre que sur la réponse de la base de donnée et le chargement des scripts. Cette manipulation permet vraiment de gagner du temps de chargement et un score plus qu’interessant sur Google Speed. Pour plus de détail je vous conseille de faire une recherche sur ce point.
Une autre idée à été d’utilisé le lazyload (affichage intelligent des images) . Celui-ci permet de n’afficher que les images qui sont prêtes ou sont dans le champs de vision de l’écran. Un plugin comme WP-Rocket le fait nativement, mais il s’avérait que sur certains type d’image, il ne fonctionnait pas correctement. J’ai donc du en intégrer un « fait-maison ».
Les polices d’écriture et les scripts Google Analytics
Pour optimiser les polices et le script, j’ai effectué plusieurs recherchent qui m’ont permis de les stocker sur le serveur le script Google Analytics et les Google Fonts. Ceci permet de leur donner une durée de vie spécifique et de moins solliciter les ressources du navigateur coté client. Quelques modification sur mes CSS ont été nécessaires afin d’obtenir les résultats escomptés.
Les publicités
Gros point noir et gros coup de gueule!! Comment se fait-il que les publicités gérées par Google lui-même alourdissent à ce point un site internet. Nous nous somme rendus-compte avec Vincent qu’en fonction des publicités chargées sur le site, les pages pouvaient mettre jusqu’à 5 secondes pour obtenir une réponse du serveur. Ainsi, les images mises dans les publicités sont très lourdes et demandent un temps fou à charger.
Les besoin de Vincent étaient d’avoir des publicités qui se positionnent automatiquement. Google le permet mais parfois elle se positionnent a des endroits indésirable. il a fallu que je modifie mon code pour arriver à contrôler tout ca.
Je garderais pour moi les détails technique de ces méthode et proposerais sans doute un article sur le sujet car il m’en a couté quelques cheveux 🙂
Conclusion
Pour conclure, je dirait que ce projet m’a propulsé dans une autre vision de ce CMS, du SEO (référencement naturel) et de l’optimisation. J’y ai appris énormément de chose que j’ai pu réutiliser sur les projets suivants.
Je ne remercierais jamais assez les créateurs de ce site de m’avoir confié ce projet car il à été pour moi une confirmation de ce pourquoi je fais ce travail et ce vers quoi je souhaite me diriger.
