Cas client : Mon Petit Gazon aka MPG, une refonte de site originale

Mon Petit Gazon, l’application pour jouer au foot entre amis

Peut-être que le nom de MPG ou MonPetitGazon parlera aux amateurs du ballon rond puisqu’il s’agit d’un jeu mobile bien connu ! Le but est de créer son équipe de football avec les joueurs évoluant réellement en championnat professionnel afin d’affronter ses amis à chaque match. Le résultat est calculé par rapport aux véritables performances des joueurs : de quoi pimenter vos soirées foot !

Rencontre avec les créateurs de Mon Petit Gazon

Pour ce projet, nos interlocuteurs étaient Benjamin Fouquet et Grégory Rota, les fondateurs de MPG. Nous avons tout d’abord discuté de leurs besoins immédiats, qui ne concernaient pas l’application mobile mais son site vitrine.

En effet, la mission était de refaire entièrement ce dernier tout en priorisant deux éléments indispensables : le SEO (Search Engine Optimization) et la vitesse de chargement du site.

Mon Petit Gazon étant un jeu populaire (environ un million d’utilisateurs). La mission de refonte de site était vraiment intéressante surtout pour les footeux :).

Par conséquent, la concurrence avec les autres prestataires fut forte et nous avons su nous démarquer en chamboulant un peu les idées qu’ils avaient en tête, surtout sur un point de vue technologique.

Une refonte de site censée être simple

Les fondateurs de Mon Petit Gazon nous ont proposé une maquette de site. onepage sans trop de complexité, l’idée initiale était simple. Créer un site web purement statique, avec du HTML, du PHP et du JavaScript pour l’animation. Une idée qui aurait très bien pu fonctionner alors pourquoi avoir soumis un autre projet ?

Quand et comment faire usage de NextJs ?

Le premier avantage d’utiliser un framework comme NextJS c’est d’avoir une boîte à outils conçue et utilisée par des milliers de développeurs.

1. Cela permet de ne pas réinventer la roue et d’accélérer la refonte de site. En évitant de redévelopper des parties indispensables comme le routing ou encore la gestion du multilingue. Ces fonctionnalités déjà présentes n’empêchent en aucun cas d’avoir une liberté totale lors d’une refonte de site.
2. De profiter d’une façon de développer préétablie, pour cette technologie, favorisant les bonnes pratiques de développement. Cela évite aussi de partir sur une structure de projet pouvant générer des bugs et/ou empêchant une bonne prise en charge lors de l’évolution et la maintenance du site vitrine.
3. D’avoir la puissance du JavaScript au service de la performance, sans négliger la partie SEO puisque NextJS permet de faire du rendu statique, tout comme si nous avions développé de manière classique le site en PHP et HTML.

Objectif: atteindre un score de performance de 90% sur LightHouse

Nous n’allons pas nous mentir, de plus en plus Google pousse les développeurs à créer des sites web plus légers, plus rapides et plus performants. Ces points sont essentiels pour le référencement naturel (SEO).

Même s’il est relativement facile d’obtenir un score proche de 100% sur ordinateur, la mission se corse énormément lorsque nous voulons avoir un score similaire sur téléphone. Un souci quand on sait que 60 % du trafic web se fait via mobile.

Grâce à la technologie utilisée et à de nombreuses optimisations globales ou ciblées mobiles (lazyload, prefetch, compression) nous avons pu fournir t un projet ayant un score de plus de 85% en mobile et très proche des 100% en ordinateur*, notamment grâce à l’utilisation de Vercel, un hébergeur spécialisée des Apps Javascript NextJS.

*Ces scores ont été calculés en 2020 et peuvent avoir changer avec l’évolution des algorithmes de Google.

Le JavaScript peut avoir une incidence sur votre SEO

Attention au JavaScript et au référencement naturel : même si les robots de référencement s’améliorent de jour en jour, le contenu affiché grâce au javascript peut vraiment être mal interprété si ce n’est pas fait correctement. 

Petite astuce pour savoir si votre site est bien visible des robots : accédez à votre site en désactivant le JavaScript, si l’affichage est mauvais ou incomplet, il se peut que votre référencement soit impacté.

Je voudrais faire une refonte de site mais je ne sais pas quoi demander

Une agence web vous proposera au préalable un audit, afin de noter les points forts et les points faibles de votre site en l’état actuel.

Un audit complet, vérifiera la rapidité de votre site, l’expérience utilisateur, les technologies devenues obsolètes (votre site tourne encore avec Flash?)

À partir de ce moment, l’équipe de l’agence web AquilApp, vous soumettra un cahier des charges détaillant la refonte de votre site web.

Une fois que vous aurez validé ce dernier, nous entamerons la mise à jour de votre site.

Une refonte de site ne risque-t-elle pas de m’apporter des bugs ?

Après une refonte de site web, l’équipe de notre agence web entre dans la phase de recettage.

Nous soumettons votre site à une batterie de test afin de vérifier qu’il n’y a aucun bug, afin que vous ayez en mains un outil correspondant parfaitement à vos attentes.