Mon Petit Gazon (MPG) : la refonte de site vitrine avec Next.js
Obtenez un résumé intelligent et des insights personnalisés
AquilApp a refondu le site vitrine de Mon Petit Gazon (MPG). C’est un jeu de fantasy football comptant plus d’un million d’utilisateurs en France. L’objectif était double : atteindre un score Lighthouse supérieur à 85 sur mobile et préserver le référencement naturel du site. La solution choisie est Next.js. C’est un framework JavaScript qui combine rendu statique, performance et compatibilité SEO native.
Qui est Mon Petit Gazon ?
Mon Petit Gazon est aussi connu sous le nom de MPG. C’est un jeu français de fantasy football créé en 2011. Il est né du rachat de la plateforme Fantaleague par trois associés : Martin Jaglin, Benjamin Fouquet et Grégory Rota.
Le principe est simple : chaque joueur constitue son équipe avec de vrais footballeurs professionnels. Puis, il affronte ses amis à chaque journée de championnat. Les notes sont calculées à partir des performances réelles des joueurs sur le terrain.
MPG s’appuie sur six compétitions européennes : la Ligue 1, la Premier League, la Liga, la Serie A, la Ligue 2 et la Ligue des champions de l’UEFA. Le jeu dépasse aujourd’hui le million d’utilisateurs actifs en France.
Pourquoi Mon Petit Gazon MPG avait besoin d’une refonte de site ?
Pour ce projet, nos interlocuteurs étaient Benjamin Fouquet et Grégory Rota, les cofondateurs de MPG. La mission ne concernait pas l’application mobile, mais son site vitrine. Ce dernier nécessitait une reconstruction complète autour de deux priorités absolues : le référencement naturel (SEO) et la vitesse de chargement.
Un jeu à un million d’utilisateurs attire une forte audience sur son site institutionnel. Un site lent ou mal indexé représente un risque direct sur la notoriété et l’acquisition. La concurrence pour ce projet fut forte. AquilApp s’est démarquée en proposant une approche technologique différente de la solution initialement envisagée.
Quels sont les enjeux d’une refonte de site vitrine pour une application grand public ?
Une refonde de site vitrine ne se décide pas du jour au lendemain. C’est une démarche numérique importante qui peut avoir beaucoup de conséquences.
La performance et taux de rebond : quid des mesures de Google en 2026
Les Core Web Vitals (signaux web essentiels) sont les trois métriques de Google pour évaluer l’expérience utilisateur réelle sur une page web. Ils se composent de :
- LCP (Largest Contentful Paint) qui mesure la vitesse de chargement du contenu principal
- INP (Interaction to Next Paint) pour évaluer la réactivité aux interactions
- Et, le CLS (Cumulative Layout Shift) qui mesure la stabilité visuelle de la page.
Ces trois indicateurs influencent directement le classement dans les résultats de recherche depuis 2021. D’ailleurs, leur poids n’a fait qu’augmenter depuis.
La donnée clé à retenir : plus de 68 % des utilisateurs quittent un site qui met plus de 3 secondes à charger. Pour un jeu en ligne avec un million d’utilisateurs, chaque seconde perdue en chargement se traduit par des abandons mesurables.
Le SEO et le JavaScript : une combinaison à maîtriser
Le JavaScript est puissant pour l’animation et l’interactivité. Mal maîtrisé, il devient un obstacle au référencement naturel. Si le contenu d’une page est généré dynamiquement par JavaScript sans rendu côté serveur, les robots de Google peuvent ne pas l’indexer correctement, ou l’indexer avec du retard.
La règle de détection est simple : désactivez le JavaScript dans votre navigateur et accédez à votre site. Si le contenu disparaît ou devient illisible, le référencement du site est probablement affecté.
C’est précisément ce point qui a motivé le choix de Next.js pour la refonte MPG.
Le mobile en 2026 : un critère non négociable
En 2026, le mobile représente 68 % des sessions web en France. Un site vitrine dont le score Lighthouse mobile est inférieur à 70 est donc pénalisant. C’est le cas, pour l’expérience utilisateur et pour le positionnement organique.
Obtenir un score performant sur mobile est techniquement plus difficile qu’en version ordinateur. C’est ce défi que la refonte MPG devait relever.
Pourquoi AquilApp a choisi Next.js pour la refonte MPG ?
Next.js est un framework JavaScript open source développé par Vercel. Il permet de créer des sites web avec :
- Un rendu statique (SSG, Static Site Generation)
- Et un rendu côté serveur (SSR, Server-Side Rendering)
- Ou rendu hybride.
Il repose sur React. De plus, il ntègre nativement :
- L’optimisation des images
- Le découpage automatique du code (code splitting)
- La gestion des métadonnées SEO
- Et le routage.
En 2026, Next.js est en version 16. C’est le choix de référence pour les sites à fort trafic avec des exigences de performance élevées.
Pourquoi choisir Next.js face à une solution HTML/PHP classique ?
La maquette initiale présentée par MPG prévoyait une solution purement statique : HTML, PHP et JavaScript pour les animations. Cette approche aurait fonctionné. Cependant, elle présentait des limites structurelles pour un site appelé à évoluer. Voici pourquoi AquilApp a proposé Next.js à la place.
- Accélérer le développement sans réinventer les fondations
Next.js intègre nativement le routage et la gestion du multilingue. Ces fonctionnalités sont notamment indispensables pour un site grand public. Elles auraient dû être développées from scratch avec une approche HTML/PHP. Avec Next.js, elles sont disponibles dès le départ, sans sacrifier la liberté créative sur le design et les animations.
- Garantir les bonnes pratiques dès la structure du projet
Next.js impose une architecture cohérente qui évite les dérives courantes. Par exemple : une mauvaise gestion des dépendances, une structure de fichiers incompatible avec la maintenance long terme, des difficultés lors des évolutions. Pour un site dont la durée de vie est prévue sur plusieurs années, ce cadre structurant est un avantage direct.
- Obtenir la puissance de React sans compromettre le SEO
Enfin, Next.js génère des pages en HTML statique côté serveur. Les robots de Google lisent un contenu complet, identique à ce qu’un navigateur afficherait. La performance JavaScript et la compatibilité SEO ne s’opposent plus : elles coexistent.
Pourquoi choisir Next.js et Vercel pour la refonte d’un site vitrine : l’alliance infrastructure-framework
Vercel est l’hébergeur natif de Next.js. Il est conçu spécifiquement pour optimiser les applications JavaScript modernes. Le déploiement sur Vercel garantit :
- Une distribution mondiale via CDN (Content Delivery Network)
- Des temps de réponse serveur très bas
- Et une intégration native avec le pipeline de build Next.js.
Cette combinaison Next.js + Vercel a permis d’atteindre des scores Lighthouse élevés sans optimisations extraordinaires. Il suffit de capitaliser sur les comportements par défaut du framework.
Quels sont les résultats sur Mon Petit Gazon : les scores Lighthouse et performance obtenue
L’objectif fixé était d’obtenir un score de performance Lighthouse supérieur à 90 % sur ordinateur et au moins 85 % sur mobile. Atteindre ce niveau sur mobile est significativement plus difficile. En effet, les contraintes de bande passante, de puissance de calcul et d’affichage sont plus sévères que sur ordinateur de bureau.
Plusieurs techniques d’optimisation ont donc été combinées pour atteindre ce résultat.
Le lazyload diffère le chargement des images situées en dehors du champ de vision initial. Les images ne sont chargées que lorsque l’utilisateur s’en approche en faisant défiler la page. La compression réduit le poids de chaque ressource (images, fichiers JavaScript, CSS) sans perte de qualité perceptible.
Ensuite, le prefetch anticipe les pages susceptibles d’être visitées ensuite et pré-charge leurs ressources en arrière-plan, rendant la navigation quasi instantanée.
Mon Petit Gazon en quelques mots
| Client | Mon Petit Gazon (MPG) — Fantaleague |
| Interlocuteurs | Benjamin Fouquet et Grégory Rota, cofondateurs |
| Problématique | Site vitrine à reconstruire entièrement, avec exigences fortes sur la vitesse de chargement et le référencement naturel |
| Solution | Refonte complète avec Next.js déployé sur Vercel, optimisations mobile ciblées (lazyload, prefetch, compression) |
| Score Lighthouse mobile | 85 / 100 |
| Score Lighthouse desktop | 98 / 100 |
« Très professionnel dans l’approche de la mission, l’équipe AquilApp a su répondre à tous nos besoins et n’a pas hésité à challenger nos choix de technos lors du brief. Ils ont su faire preuve de disponibilité et de flexibilité tout au long de la mission dans un projet qui demandait de la souplesse. Je recommanderai vivement AquilApp. »
— Benjamin Fouquet, cofondateur de Mon Petit Gazon
Tableau comparatif : avant / après la refonte Mon Petit Gazon
| Critère | Avant refonte | Après refonte (Next.js + Vercel) |
|---|---|---|
| Score Lighthouse mobile | Non mesuré | 85 / 100 |
| Score Lighthouse desktop | Non mesuré | 98 / 100 |
| Framework | HTML / PHP / JavaScript vanilla | Next.js 13+ |
| Rendu SEO | Dépendant du JavaScript | Statique garanti (SSG) |
| Gestion du multilingue | Manuelle | Intégrée au framework |
| Hébergement | Serveur standard | Vercel (CDN mondial optimisé Next.js) |
Sources : AquilApp (données projet Mon Petit Gazon) ; outil Google Lighthouse, ; documentation officielle Next.js, nextjs.org
Quels sont les enseignements de la refonte MPG pour votre projet web ?
Alors, que peut-on tirer de cette refonte de site de Mon Petit Gazon ?
Quand opter pour un framework JavaScript plutôt qu’une solution classique ?
Next.js n’est pas la réponse universelle à chaque projet. Il est particulièrement adapté dans les cas suivants.
Le site génère un volume de trafic significatif. Donc, une lenteur de chargement a un impact mesurable sur l’acquisition ou la conversion. Le site doit gérer plusieurs langues ou est susceptible de le faire dans les 18 à 24 mois suivant la mise en ligne. Le projet inclut des animations ou des interactions qui nécessitent JavaScript, tout en devant maintenir une indexation SEO irréprochable. L’équipe technique est à l’aise avec l’écosystème React ou souhaite l’adopter.
En dehors de ces cas, une solution plus légère peut répondre au besoin avec moins de complexité d’infrastructure. Exemple : un WordPress bien configuré, un Webflow ou un site statique Jekyll.
Les 5 questions à se poser avant de lancer une refonte de site
- Quel est le score Lighthouse actuel du site, sur mobile et sur ordinateur ?
- Le trafic mobile dépasse-t-il 50 % des visites totales ?
- Le framework actuel supporte-t-il le rendue statique ou côté serveur ?
- Le site devra-t-il gérer plusieurs langues dans les prochaines années ?
- Quelle est la durée de vie attendue de la refonte, 2 ans, 5 ans, et quelles évolutions fonctionnelles sont prévues ?
Ces cinq questions permettent de cadrer la décision entre une mise à jour ciblée, une refonte partielle et une refonte complète avec changement de stack technique.
Devez-vous faire un audit préalable ?
Un audit complet avant une refonte couvre 4 dimensions. À savoir :
- L’audit technique analyse la vitesse, la compatibilité mobile et les erreurs de code.
- L’audit SEO cartographie les positionnements existants, le trafic organique et les liens entrants à préserver.
- L’audit UX (expérience utilisateur) identifie les points de friction dans les parcours via les heatmaps et le taux de rebond par page.
- L’audit contenu recense les pages à conserver, à améliorer ou à supprimer.
Ce travail préalable est indispensable. En effet, il vous permet d’éviter le risque le plus fréquent d’une refonte : la perte de positionnement SEO. Un site bien positionné sur Google peut perdre 30 à 80 % de son trafic organique si les redirections ne sont pas correctement gérées lors du changement de structure.
Quel est le coût et le délai d’une refonte de site vitrine en 2026 ?
| Type de refonte | Périmètre | Budget estimé | Délai |
|---|---|---|---|
| Rafraîchissement graphique | Design uniquement, structure inchangée | 500 à 3 000 euros | 1 à 3 semaines |
| Refonte partielle | Design + contenu, même CMS | 2 000 à 8 000 euros | 1 à 2 mois |
| Refonte complète site vitrine | Design + tech + SEO + contenu | 3 000 à 10 000 euros | 2 à 4 mois |
| Refonte complète + framework sur mesure (ex. Next.js) | Architecture custom + migration SEO | 5 000 à 15 000 euros | 2 à 4 mois |
| Maintenance annuelle post-refonte | Corrections, mises à jour, évolutions mineures | Environ 15 % du coût initial / an | Continu |
Sources : Alizee Web; Clickzou ; Repha.
Ces fourchettes représentent les prix pratiqués par les agences françaises en 2026. Elles varient selon la région, la taille de l’agence et la complexité du projet. Un devis précis nécessite toujours un audit de l’existant.
FAQ sur la refonte de site web et Next.js
Conclusion
La refonte du site vitrine de Mon Petit Gazon illustre une conviction fondamentale chez AquilApp. À savoir : le bon choix technologique se définit toujours en amont du code, dans la phase de cadrage. Proposer Next.js là où une solution statique classique était envisagée n’était pas une option plus complexe. C’était une solution plus cohérente avec les objectifs à long terme du client.
Un score de 98/100 sur ordinateur et 85/100 sur mobile est le résultat d’une architecture pensée pour la performance, pas rattrapée après coup. C’est cette logique que nous appliquons à chaque projet de développement web et mobile sur mesure.
Vous envisagez une refonte de site ? Découvrez notre méthode de cadrage projet ou contactez directement notre équipe pour un audit de votre site existant.
Demander un audit de votre site
