Topito — Front v4 — Étude de cas

← Retour au portfolio

Topito est un média français à forte audience, spécialisé dans les top listes et classements : humour, insolite, découverte, culture pop et contenus utiles. Le site propose une grande variété de formats éditoriaux au-delà des articles classiques : quiz interactifs, vidéos, battles, shopping (« Topitruc »), podcasts… Le Front v4 est la refonte complète de la couche de présentation de topito.com. Il s'agit d'une application Symfony qui ne consomme pas WordPress en runtime, mais s'appuie sur des données indexées dans Elasticsearch, alimentées par un microservice Indexer depuis le CMS historique. L'architecture est conçue pour un site à très fort trafic : cache edge Varnish avec fragments ESI, assets servis via CDN (S3), redimensionnement d'images à la volée (Imagor), et déploiement Kubernetes avec autoscaling. La v4 coexiste avec la v3 historique : Varnish route les requêtes vers le bon backend selon les en-têtes de version, permettant une migration progressive sans interruption de service.

Mon rôle

Développeur Symfony en collaboration avec l'équipe Ziofix. Contribution sur l'ensemble du cycle de vie de l'application : développement fonctionnel, performance, SEO, qualité de code et déploiement.

Points clés

Refonte complète du front topito.com (Front v4) en production
Architecture cache-first (Varnish 12 Go RAM, ESI, CDN) pour absorber des millions de pages vues
Migration progressive v3 → v4 sans interruption de service
7+ types de contenu éditoriaux sur une seule codebase Symfony
Objectif PageSpeed Insights ≥ 70 en mobile contrôlé en CI

Stack technique

PHP 8.1+, Symfony 6.4, Twig
Elasticsearch 9 (Elastica), index multi-types
Varnish 7, ESI (Edge Side Includes)
Gulp, Sass, Browserify, Babel, JavaScript
Imagor, Nginx S3 Gateway, CDN (a.topi.to)
Spatie Schema.org, pages AMP, PWA manifest
PHPStan (niveau 9), PHPMD, PHP_CodeSniffer (PSR-12), TwigCS, PHPUnit
Docker, Kubernetes (Helm), HPA, Nginx
GitLab CI (build, qualité, PSI, déploiement preprod/prod)

Intégrations tierces

Elasticsearch — lecture des contenus indexés (posts, quiz, vidéos, battles, shopping, podcasts, pages, menus, partenaires)
Indexer — API de preview et synchronisation depuis WordPress
oEmbed — microservice d'intégration de contenus tiers (vidéos, tweets, etc.)
Imagor — service de redimensionnement et optimisation d'images (i.topito.com)
WordPress — CMS source (backend Varnish legacy v3)
Pubstack / Smart AdServer — monétisation publicitaire (header bidding)
Google PageSpeed Insights — contrôle automatisé des performances en CI (seuil mobile 70)

Front-office (entreprises)

Articles (tops) — listes paginées, images responsives (srcset), mise en avant éditoriale
Quiz interactifs — vrai/faux, QCM, quiz de personnalité, soumission AJAX et calcul de score côté serveur
Vidéos — pages dédiées avec intégration oEmbed
Battles — confrontations thématiques entre deux options
Shopping (Topitruc) — contenus affiliés avec blocs ESI dynamiques
Podcasts — intégration dans le moteur de recherche multi-index
Pages statiques — contenus éditoriaux hors format « top »
Page d'accueil — contenus mis en avant, pagination
Listings par catégorie, tag, auteur (topiteur), partenaire — tri par date ou popularité (likes Facebook)
Archives — navigation par année, mois et jour
Recherche full-text — titres, contenus, tags et catégories, avec filtrage des stop words français
Routage intelligent — un même slug peut correspondre à un article, une page ou un listing selon le contexte
Cache Varnish + ESI — assemblage de fragments (footer, navigation burger, prev/next, blocs shopping) côté edge
SEO avancé — JSON-LD Schema.org (Article, Organization, WebSite), Open Graph, meta robots configurables, pages AMP
PWA — manifest web pour installation sur mobile
Publicité — gestion brand safe, désactivation des pubs par contenu, intégration header bidding (Pubstack, Smart AdServer)
Preview éditoriale — consultation de contenus non publiés via l'API Indexer

Back-office (administration)

WordPress — CMS éditorial historique
Indexer — microservice de synchronisation WordPress → Elasticsearch
Commande Varnish — génération automatique des règles de routage depuis les slugs indexés

Développements majeurs

Architecture multi-formats — modèles, repositories et adapters dédiés pour chaque type de contenu (Post, Quiz, Video, Battle, Shopping, Podcast, Page)
Moteur de recherche Elasticsearch — requêtes multi-index, filtres nested (tags, catégories), recherche full-text avec stop words FR, pagination et tri
Quiz interactifs — formulaires Symfony par type (vrai/faux, choix, personnalité), endpoint AJAX, rendu Twig des résultats
Fragments ESI — footer, navigation burger, navigation prev/next, blocs shopping assemblés par Varnish
SEO Schema.org — génération JSON-LD (Article, Organization, Person, ImageObject) via Spatie
Preview éditoriale v4 — intégration API Indexer pour la consultation de brouillons
Listings et archives — pages catégorie, tag, auteur, partenaire, archives par date avec pagination
Pages AMP — versions allégées des contenus pour le référencement mobile
Routage dynamique — RouteMatcher pour distinguer articles, pages et listings sur un même pattern d'URL
Pipeline Gulp — build SCSS/JS, critical CSS, purge CSS, icon fonts, versioning des assets (rev), BrowserSync
Cache Varnish — configuration VCL, génération des routes backend depuis Elasticsearch
Images responsives — service ImageResizer avec génération de srcset et intégration Imagor

Qualité & infrastructure

Qualité de code — conformité PHPStan niveau 9, PHPMD, PHPCS PSR-12, TwigCS en CI
Déploiement Kubernetes — charts Helm (PHP, Nginx, Varnish, Imagor, nginx-s3-cache), HPA, déploiement automatisé preprod/prod via Kompaas
CI GitLab — pipeline build (Composer + Yarn), contrôles qualité, audit PageSpeed Insights
Minification HTML — transformation automatique des balises include en esi:include

Enjeux & défis

Haute disponibilité et trafic — architecture cache-first avec Varnish (12 Go RAM en prod), ESI et CDN pour absorber des millions de pages vues
Découplage CMS / front — migration progressive de WordPress vers une lecture Elasticsearch, avec coexistence v3/v4
Multi-formats éditoriaux — une seule codebase pour gérer 7+ types de contenu aux comportements et templates distincts
SEO à fort enjeu — Schema.org, AMP, meta robots, brand safety et noindex par contenu sur un site média très référencé
Performance web — objectif PageSpeed Insights ≥ 70 en mobile, critical CSS, minification, images optimisées à la volée
Cohérence des index — requêtes Elasticsearch partagées avec le microservice Indexer (constantes et mappings synchronisés)