Agence web performance

Le périmètre d'une mission web performance

Une prestation d'agence web performance couvre cinq blocs : audit Core Web Vitals sur données réelles, plan d'action priorisé, mise en œuvre technique dans la codebase, monitoring continu, formation de l'équipe interne. C'est exactement le périmètre que je conduis depuis 8 ans en tant que consultant indépendant.

Je suis Paul Delcloy. J'interviens auprès de marques exigeantes (CHANEL, April Moto, Leroy Merlin, Rimowa, Fenty Beauty, SiriusXM) sur ce périmètre complet, du diagnostic à la transmission. Chaque mission est chiffrée avant engagement, mesurée en RUM, documentée pour votre équipe technique.

Le contexte varie d'un projet à l'autre : une refonte en cours qui commence à dériver côté LCP, un e-commerce dont le TTFB explose sous charge, un site à trafic SEO stratégique qui vient de basculer en zone rouge sur Search Console. La méthode, elle, reste la même. On mesure, on priorise, on met en œuvre, on transmet.

Ce que la performance web change concrètement pour votre business

La performance web pèse sur trois enjeux directement chiffrables.

SEO : les Core Web Vitals sont un signal de ranking Google depuis 2021, intégrés à la pondération Page Experience. Sur une requête concurrentielle à contenu équivalent, le site aux CWV verts prend l'avantage. Le seuil officiel de LCP mobile est 2,5 secondes au P75 pour rester en zone verte, et Google Search Console pénalise silencieusement les URLs qui dérivent au-dessus.

Conversion : l'étude Deloitte 2020 « Milliseconds Make Millions », commandée par Google et menée sur 30 marques retail et voyage, mesure qu'un gain de 0,1 seconde sur la vitesse mobile fait progresser les conversions retail de 8,4 % et les conversions voyage de 10,1 %. Sur un site à 500 k€ de CA mensuel, l'ordre de grandeur des gains rendus par une mission d'optimisation LCP se compte en dizaines de milliers d'euros récupérés par trimestre.

Coût publicitaire : Google Ads intègre la landing page experience dans le calcul du Quality Score, qui pondère le CPC réel. Les Core Web Vitals ne sont pas cités nommément dans la doc Ads, mais l'expérience mobile mesurée entre dans l'évaluation, avec des baisses de CPC observées en pratique quand une landing page passe de zone rouge à zone verte. Le mécanisme est indirect mais mesurable en A/B post-optimisation.

Les leviers Core Web Vitals que je pose en mission

Sur un site en production, trois familles de leviers déterminent le passage des Core Web Vitals au vert.

Chemin critique de rendu et LCP

Le travail porte sur l'image LCP, le CSS critique, les polices. L'image LCP identifiée doit être servie en AVIF ou WebP avec préchargement explicite, jamais lazy-loadée :

<link rel="preload" as="image" href="hero-800.avif"
      imagesrcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
      imagesizes="(max-width: 600px) 100vw, 50vw"
      fetchpriority="high">

<img src="hero-800.avif"
     srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     width="1200" height="600"
     fetchpriority="high"
     alt="Produit vedette">

Côté polices, les deux modes d'échec à traiter sont le FOIT (Flash of Invisible Text : texte invisible jusqu'à ce que la police web soit chargée) et le FOUT (Flash of Unstyled Text : basculement visible entre police système et police web). font-display: swap protège contre le FOIT ; les descripteurs size-adjust, ascent-override et descent-override sur la police fallback protègent contre le CLS causé par le FOUT.

JavaScript et INP

Sur une SPA React, l'INP se stabilise en travaillant trois axes : bundle splitting effectif (routes en React.lazy, imports dynamiques), re-renders inutiles (React.memo, useMemo, useCallback ciblés, pas en carpet bombing), et scripts tiers qui saturent le main thread. Un tag manager qui charge 15 tags synchrones peut à lui seul faire basculer un INP au rouge au-dessus de 200 ms.

Back-end et infrastructure

Le TTFB est piloté par le cache page (varnish, redis, cache CDN), les requêtes SQL, la stratégie CDN. Sur un e-commerce Magento à trafic soutenu, un TTFB divisé par 4 est fréquent avec un cache Varnish bien orchestré et une base optimisée sur les requêtes catalogue. La dilution du cache par paramètres d'URL de tracking (utm_*, gclid, fbclid) est une cause récurrente qu'un audit doit toujours vérifier.

Mesurer sur données réelles, pas Lighthouse seul

Le score Lighthouse est un point de départ, pas un objectif. Google ne classe pas sur Lighthouse, il classe sur les Core Web Vitals mesurés en RUM auprès des utilisateurs Chrome réels, agrégés sur 28 jours glissants et exposés via le Chrome UX Report (la définition CrUX sur pauld.fr en résume la méthodologie). J'ai audité des sites à Lighthouse 95 qui échouaient sur le CrUX, et l'inverse : CHANEL est un cas connu, score Lighthouse ~51 mais CWV au vert.

La mesure qui compte, c'est le percentile 75 (P75) du LCP mobile sur vos URLs prioritaires, mois par mois. C'est cette métrique que je cible en mission, et sur laquelle je m'engage dans le plan d'action. Une mission sérieuse croise trois sources :

Optimiser sur une seule source, c'est optimiser à l'aveugle ou célébrer trop tôt. Une régression réelle vue en RUM peut être invisible en lab, et un gain en lab peut ne pas se refléter en field si l'origine du problème est ailleurs (mix trafic, distribution device, connexion).

Retours terrain : les leviers qui font vraiment gagner du LCP

Un cas récent, April Moto, un WordPress à trafic soutenu. Score Lighthouse mobile rouge, LCP à 3,2 s au P75, INP correct mais fragile. L'équipe interne avait tenté deux passes d'optimisation sans succès notable.

L'audit a révélé trois causes cumulées : image LCP en JPEG 800 Ko sans preload ni fetchpriority, cache page fragmenté par des paramètres d'URL de tracking qui multipliaient les variantes stockées, tag manager chargeant 14 scripts synchrones dans le <head>. Trois semaines de mise en œuvre, LCP ramené à 1,3 s (soit 59 % de mieux), CWV au vert, taux de rebond mobile en baisse de deux points sur les 30 jours suivants.

◆Retour terrain·8 ans · 35+ clients

Mon retour terrain — E-commerce et cache par code postal.

J'ai audité un e-commerce WordPress dont le cache navigateur était quasi inopérant parce que les frais de livraison étaient calculés dès la page d'accueil, avec le code postal saisi. Résultat : un cache distinct par code postal, un cache hit ratio à 40 % au lieu des 88 % attendus. Le fix a été de déporter le calcul des frais en AJAX post-load, en gardant la page d'accueil parfaitement cacheable. LCP inchangé sur l'accueil, mais TTFB divisé par 3 sur toutes les pages internes et cache CDN redevenu efficace.

Un autre cas, un Drupal grand compte. TTFB à 1,1 s en moyenne, cause identifiée : des modules Drupal qui rechargeaient JS, CSS et exécutaient des milliers de lignes SQL sur toutes les pages, alors que les données ne servaient qu'à une seule vue. Refactor étalé sur trois sprints, TTFB descendu à 180 ms, avec impact direct sur le LCP mobile et sur les métriques TTFB côté Search Console.

Un dernier retour, plus récent, sur une SPA React à enjeu SEO fort. LCP mobile qui dérivait à 4,1 s parce que le composant hero attendait la fin de l'hydratation avant de rendre l'image. Migration ciblée vers les React Server Components sur le layout et le composant hero (App Router de Next.js), sans refonte globale de l'application. LCP redescendu à 1,7 s en trois semaines, sans toucher au reste de la codebase.

Stacks et outils que je couvre

Côté front, j'interviens sur React (Next.js Pages Router et App Router, RSC), Astro, Angular, Vue, WordPress et Shopify Liquid. Le plus fréquent reste React et WordPress, mais les motifs d'optimisation diffèrent radicalement selon la stack : sur React, l'INP et le bundle sont les enjeux dominants ; sur WordPress, c'est l'image LCP, le cache et la purge des plugins parasites.

Côté back et e-commerce : WordPress/WooCommerce, Drupal, Magento, Salesforce Commerce Cloud, PrestaShop. Sur Magento et SFCC, le layer personnalisation est presque toujours le premier chantier : injection de plusieurs mégaoctets de JavaScript pour du contenu conditionnel qui pourrait se rendre côté serveur. Sur WooCommerce, la combinaison plugin cache et cache CDN doit être orchestrée finement pour éviter les collisions.

Côté monitoring : SpeedCurve, DebugBear, Datadog RUM, Dynatrace, Akamai mPulse selon la stack en place. L'outil compte moins que ce qu'on en fait : un RUM sans budget de performance dans le CI et sans alerte de régression reste un tableau de bord décoratif. La discipline qui garantit qu'un score tient sur 6 mois, ce sont les budgets bloquants sur chaque merge request.

Le plus important n'est pas la stack elle-même, c'est la métrique cible. Un LCP au vert sur mobile 4G au P75, un INP stabilisé sous 200 ms, un CLS proche de zéro. Ce sont les objectifs de mission, atteints avec la stack en place plutôt qu'en imposant une refonte technique dont personne n'a le budget.

Comment démarrer une mission

Le premier échange de cadrage se tient sous 48 h. Il permet de clarifier les enjeux (SEO, conversion, coût d'acquisition), l'état actuel des Core Web Vitals sur Search Console, et les contraintes techniques (freeze de code, cycles de release, autonomie de l'équipe interne).

L'audit initial complet est livré sous 10 jours ouvrés. Il inclut le rapport chiffré par métrique (LCP, INP, CLS, TTFB au P75 et P95), le plan d'action priorisé avec estimations de gain et d'effort pour chaque levier, et une présentation à votre équipe technique et à la direction. À partir de là, la trajectoire est choisie ensemble : sprint express de 3 semaines avant campagne, refonte étalée sur plusieurs trimestres, ou monitoring seul si le socle est déjà sain.

Chaque mission est mesurée avant et après sur données RUM, documentée pour votre équipe, et laisse en place les budgets de performance qui permettent au score de tenir sur la durée. Le renouvellement d'accompagnement se discute au trimestre, uniquement s'il apporte de la valeur mesurable.

Sources

• Deloitte, Google (mars 2020). Milliseconds Make Millions: How mobile page speed drives consumer engagement. Étude sur 30 marques retail, voyage, luxe et lead gen (Europe et US), sur 4 semaines de field data. Corrélation vitesse mobile / progression funnel, panier moyen, bounce rate. Deloitte Ireland — page dédiée
• Google Chrome team. Chrome UX Report — methodology. Documentation officielle sur l'agrégation P75 des Core Web Vitals sur fenêtre glissante 28 jours à partir des utilisateurs Chrome opt-in. developer.chrome.com/docs/crux
• Google Search Central (juin 2021). Understanding Page Experience in Google Search results. Annonce et documentation du signal ranking Page Experience, dont les Core Web Vitals sont un composant. developers.google.com/search/docs/appearance/page-experience
• web.dev, Google Chrome team. Core Web Vitals — définitions, seuils, corrections. Référence technique officielle des métriques LCP, INP, CLS et de leurs seuils P75 (2,5 s / 200 ms / 0,1). web.dev/articles/vitals