Optimisation page web / Média
Lazy loading
Performance web
refonte UX
Le projet
Optimisation des page web pour l’un des plus gros site éditorial mondial. Ces pages articles constituent des éléments centraux de l’expérience utilisateur de ce site, avec un fort impact sur la consultation des contenues et leur monétisation via la publicité et le SEO.
L’environnement technique du projet
- Front-End : Vanilla TypeScript, HTML , CSS3
- BackEnd : PHP 8 / Symfony 7
- CI / CD : Github / Github Actions
- Monitoring et Web Performance : Google Analytics, Lighthouse, WebPageTest, AWS
- Tracking : Adobe Analytics
- Recirculation : UX / UI
- Git
Notre valeur ajoutée
Pour répondre aux enjeux, nous avons adopté une approche agile avec des développements itératifs et des tests réguliers.
Les principales améliorations apportées :
- Réécriture complète du DOM de la page article pour garantir une meilleure sémantique HTML et une meilleure accessibilité.
- Suivi rigoureux des maquettes Figma fournies par l’équipe produit pour assurer la fidélité du design et répondre aux exigences UX/UI.
- Optimisation des images et des ressources statiques avec des formats modernes (WebP, AVIF) et un chargement asynchrone.
- Implémentation en Vanilla TypeScript, optimisant les performances sans surcouche inutile.
- Optimisation des CSS en chargeant uniquement les styles nécessaires pour la page article, avec du preloading de CSS pour accélérer l’affichage initial.
- Mise en place d’un système de lazy loading pour charger dynamiquement les publicités et améliorer la fluidité.
- Lazyloading des scripts tiers avec InView, permettant d’injecter leurs scripts uniquement lorsque l’utilisateur les visualise, réduisant ainsi l’impact sur les performances.
- Gestion d’un design personnalisé pour certaines verticales en Anglais, en appliquant des palettes de couleurs et mises en page spécifiques.
- Mise en place des deux types de pages articles, avec une logique adaptative en fonction du type de contenu.
- Navigation fluide avec swipe entre articles de contextes différents, permettant à l’utilisateur de découvrir de nouveaux contenus sans rupture.
- Amélioration du SEO on-page avec une meilleure gestion des balises méta, OpenGraph et des microdonnées.
- Focus sur les Core Web Vitals (élimination des render-blocking scripts, optimisation du LCP, CLS et FID).
Témoignage
« Ce projet m’a permis d’explorer les meilleures pratiques en optimisation web et d’approfondir mes compétences en performance, SEO et gestion des spécificités UX avancées. La mise en place des deux types de pages articles et des designs spécifiques pour certaines verticales a été un défi stimulant. De plus, la navigation par swipe entre articles très différents a demandé un travail approfondi sur la gestion des contextes et des métadonnées. J’ai également apprécié la collaboration avec des designers, experts SEO et analystes de données pour offrir une expérience utilisateur optimale. »
