Bonjour le web ! Suite à mon embauche en février 2017 en tant que développeur web full-stack au sein de l’équipe du groupe Immo9 (immobilier neuf à Toulouse), j’ai comme l’envie de faire le point sur ces quelques mois passés à travailler sur de nouveaux projets.
Refonte du site toulouseimmo9.com :
Première mission : reprendre en main et améliorer l’ensemble du site. Il y avait beaucoup de choses à améliorer, pour dégrossir voila les thèmes principaux :
- conception graphique / design
- SEO
- optimisation (vitesse de chargement, responsive design,…)
- reprise en main du backend (un peu délaissé)
Sur une base de vieille version de Joomla!, impossible à mettre à jour pour cause de code « maison » mal réparti dans l’ensemble du CMS, on a du jouer des pieds et des mains pour atteindre un résultat satisfaisant. Vous pouvez voir l’ancien site sur web archive : ici. Le rôle du site étant principalement de la génération de contacts qualifiés pour de l’achat de biens immobiliers en défiscalisation Loi Pinel sur Toulouse, nous nous sommes donc naturellement concentré sur l’optimisation SEO, l’ergonomie et « l’agréabilité » de la navigation, afin de véhiculer une image de confiance et d’expertise (ce qui est évidemment le cas 🙂 ). Au niveau technique, rien de bien folichon, si ça n’est le défi de refaire une cure de jouvence à un site qui en avait bien besoin. Quelques optimisations sur la gestion des assets, quelques retouches sur la gestion back-end des annonces, beaucoup (vraiment beaucoup) de nettoyage, et une grosse dose d’ergonomie et de SEO. Vous pouvez consulter le site ici : Site de Toulouse Immo Neuf.
Refonte du site premiumimmoneuf.com :
Deuxième mission : reprendre en main le site premiumimmoneuf.com. Un peu plus solo sur ce projet, j’étais responsable de la reprise avant tout technique du site. Ce site, quelque peu délaissé depuis longtemps, devait retrouver une place de choix dans la présence web de l’entreprise. Basé sur October CMS (lui même basé sur le framework PHP Laravel), personne n’avait pris le temps de mettre les doigts dans le camboui. C’est donc moi qui m’y suis collé 🙂
J’ai eu le champ libre pour les différentes améliorations à apporter sur ce site de vente de biens immobiliers neuf à Toulouse, alors je me suis un peu lâche 🙂
Versionnage du site grâce à Github
Le versionnage n’étant pas dans la culture de l’entreprise quand j’y suis arrivé, j’ai décidé de commencer petit à petit à insérer ce concept. Grâce à un code assez carré et propre basé sur Laravel, je n’ai eu aucun mal à versionner le site premiumimmoneuf (sur un github privé de l’entreprise, spécialement ouvert à cet effet).
Mise en place d’un sous domaine de dev
L’architecture utilisée jusque la n’avait pas de sous domaine de dev pour les sites. J’ai donc mis en place cet aspect là, afin de ne pas utiliser des nom de domaines « fake », seulement accessible grâce à la modif du fichier hosts. C’est pas grand chose, mais ça apporte de la cohérence (et je suis un peu psycho-rigide aussi 🙂 ), et on travaille sur un domaine réel, ce qui permet de mettre en place des règles et du code beaucoup plus propres (comportement différent en dev et en prod, espace web « partagé », etc…). Bientôt on aura même un serveur physique dédié au dev et un autre pour la prod (un petit pas pour l’homme, un bond de géant pour le dev).
Gros ménage dans les assets
La plupart des libs étaient dépassés, non minifiées, voir complètement inutiles au fonctionnement du site. J’ai donc épuré au maximum tout le Javascript et CSS, et mis à jour ce qui était vraiment nécessaire. Beaucoup de travail aussi sur la gestion des images, afin de ne pas engorger le tuyau plus que nécessaire (thumbnails, responsive background, object-fit, etc…). J’en profites pour partager ici un petit trick : en tant que dev, on rencontre souvent (toujours) le problème de l’inter-compatibilité entre navigateurs et leurs différentes versions. C’est chiant, mais c’est comme ça (et c’était pas mieux avant !). J’ai trouvé une super astuce pour gérer ça facilement :
- installez bowser.js dans votre site
- utilisez le pour ajouter les attributs « navigateur » et « version » a votre balise htlm principale. Ça donne un truc du genre :
<html data-browser="Internet Explorer" data-version="10"> - utilisez ça pour faire des règles CSS à la sauce « media queries » avec des règles du type
html[data-navigator="Internet Explorer][data-version="10"]{votre règle d'intercompatibilité}
C’est simple, léger, efficace, et ça marche nickel. Pas besoin de charger un autre fichier ou de faire du JS sale. Avec un compte BrowserStack en plus, plus rien ne vous arrêtera à ce niveau !
Voici les lib que j’ai retenu en plus de Jquery, Bowser et Elephant (strict minimum) :
Gestion du cache
Optimisation de la gestion du cache, mis en place d’un système de nommage dynamique des fichiers basé sur le dernier commit pour avoir toujours la dernière version (en plus de la config htaccess et du système de cache d’october)… C’est du cache busting, et ça évite beaucoup d’incompréhensions des utilisateurs qui ne comprennent toujours pas la notion de « cache ». En gros, dès qu’une nouvelle version du site arrive en prod, le numéro de commit change, donc le nom du fichier change, donc : le navigateur recharge automatiquement le fichier (qu’il ne connait pas encore). Et hop ! Plus de CTRL+R pour voir les nouveautés !
Ajout de fonctionnalité
Suite à des brainstorming à répétitions, on a rajouté pas mal de fonctionnalités dans l’ensemble du site, notamment sur le formulaire de recherche. J’ai eu l’occasion de pouvoir développer un plugin JQuery « perso ». Ce plugin, totalement indépendant de nos sites, et donc réutilisable sur les autres sites de l’entreprise (gain de temps). Il permet créer une sélection personnalisée et automatique des biens vus par un visiteur, et de les restituer classés par intérêt. Les critères de classements sont par exemple :
- le temps passé sur une page
- le nombre de visites d’une page
- le scroll
- le click sur des éléments déclencheurs (images, boutons, etc…)
- et d’autres critères…
Tous ces éléments sont pondérés, et pris en compte dans le calcul du score de chaque page et la création du classement. Ça permet à un utilisateur de retrouver facilement les biens qu’il a déjà vu, sans qu’il n’est à les mettre en favoris, ou à les noter quelque part. C’est auto-ma-tique ! 🙂 Tout ça en JS et CSS et localStorage, en mode plugin Jquery. Pour en savoir plus, vous pouvez voir la page Github du projet Elephant, qui lui est en mode publique, et open source.
Relookage, ergonomie et responsive design
Grooos chantier, le site avait besoin d’un vrai coup de jeune, et d’une meilleur structuration des données. On a donc revu tout les aspects de présentations et de facilité d’utilisation. Avec une bonne structure HTML et CSS, on peux faire des miracles ! 🙂 Et oui, faut faire du sexy pour plaire aux gens ! 🙂
Correction de gros pépins côté backend
Il y avait pas mal de grains de sable dans la « mécanique » coté backend. C’est ça le travail de stagiaire (on y es tous passé 😉 ). Donc après quelques coups de rabots, et un peu de réécriture des classes PHP utilisées dans le site, on a gagné environ 1000% de temps de réponse serveur (de 3,7 secondes pour certaines pages, à 300 millisecondes…). Maintenant le site, comment dire, il boost un peu mieux 🙂 Et pourtant à l’heure ou j’écris ces lignes, on est encore sur un serveur pas trop à jour qui n’a pas de SSD.
Résultat : ça convertit mieux qu’avant !
Encore dépendant d’Adwords car le SEO « pur » (à comprendre : sémantique) n’a pas été vraiment amélioré pour l’instant, on observe tout de même une conversion des visiteurs en contacts beaucoup plus importante qu’avant. Comme quoi un site rapide, optimisé, et remis à neuf, ça compte !
Liens utiles :