Sami : traquer chaque milliseconde de chargement sur un SaaS déployé en 4 langues

Réalisé par

Simon Marsault

Growth Specialist

Le client & le contexte

Sami est une plateforme SaaS de comptabilité carbone qui accompagne les entreprises B2B dans leur reporting extra-financier (SECR, TCFD, UK SRS, ISSB, GHG Protocol). En pleine phase d'expansion vers le marché UK et d'autres marchés européens, le site sami.eco (Webflow) cumulait plusieurs strates de dette technique : ressources bloquant le rendu, chargement d'images non priorisé, architecture CMS rigide pour les contenus multilingues, et une désynchronisation entre hreflang et balises canoniques. Un audit exhaustif, couplé à une analyse comparative de rapports Lighthouse avant/après, a servi de point de départ pour prioriser et exécuter les correctifs.

Constats & enjeux initiaux

• Un audit technique complet a cartographié 34 chantiers, portant sur plus de 3 600 pages et liens (4xx, hreflang, balises, canoniques, contenu, redirections confondus), dont 93 pages présentant des besoins d'amélioration Core Web Vitals et 93 pages au chargement trop long.
• Une chaîne de ressources bloquant le rendu, identifiée par une lecture fine des rapports Lighthouse : CSS global Webflow (86,7 Ko), jQuery 3.5.1 chargé en synchrone (31 Ko), WebFont Loader Google en cascade de 3 requêtes séquentielles, et un script tiers cassé par des guillemets typographiques mal échappés dans son src, qui bloquait le rendu pour une requête qui partait de toute façon en échec.
• Une architecture CMS rigide pour les guides multilingues : chaque guide était géré via une base de données CMS renvoyant vers une page construite en dur, avec des URLs figées et non traduites, obligeant à répliquer manuellement chaque modification dans les 4 langues.
• 611 pages avec une déclaration hreflang dupliquée, causée par un décalage entre l'URL de base définie dans les réglages Localization de Webflow et le domaine canonique réel du site (www vs non-www), qui envoyait des signaux internationaux contradictoires à Google.
• 323 pages en erreur 4xx et 323 pages orphelines, ainsi que 114 pages crawlées mais non indexées : autant de frictions à l'indexation d'un site déployé sur plusieurs marchés (FR/EN/IT/ES).

Objectifs de la collaboration

L'objectif principal était de fiabiliser en profondeur les fondations techniques du site (indexabilité, hreflang, Core Web Vitals, architecture CMS) avant d'engager les leviers de contenu et de netlinking prévus dans la stratégie GEO/SEO internationale. En objectif secondaire, il s'agissait de traiter chaque chantier avec une granularité fine plutôt qu'en corrections génériques, en s'appuyant sur une comparaison de rapports Lighthouse avant/après pour isoler précisément l'impact de chaque correctif.

Actions clés menées

Audit exhaustif en 34 chantiers, classés P1/P2 et suivis jusqu'à clôture. Spark a cartographié chaque problématique technique (accessibilité des pages, indexabilité, hreflang, Core Web Vitals, balises on-page, canoniques, maillage) avec, pour chacune, le volume de pages concernées et l'action corrective. Les 27 chantiers classés P1, bloquants pour l'indexation ou l'international, ont été traités en priorité ; l'ensemble du plan est aujourd'hui finalisé.

Correction du script cassé et fiabilisation du chargement (lazyload, fetchpriority, defer). Un script tiers pointait vers une URL cassée à cause de guillemets typographiques dans sa balise <script src="..."> ; corrigé et repassé en defer. En parallèle, les images d'en-tête des pages guides ont été repassées en chargement prioritaire (loading="eager", équivalent HTML de fetchpriority="high" une fois publié par Webflow) plutôt qu'en lazy-load par défaut, pour que le navigateur découvre l'élément LCP dès le début du parsing.

Résolution des conflits de scripts tiers et de la chaîne de rendu bloquante. Le CSS global Webflow, jQuery 3.5.1 et le WebFont Loader Google formaient une chaîne critique de blocage du rendu ; chaque ressource a été évaluée et réordonnancée (defer, suppression des dépendances inutiles) pour dégager le chemin critique vers le premier rendu.

Résolution du conflit hreflang / canonique via les réglages Localization. Le diagnostic a révélé un comportement propre à Webflow : le code hreflang injecté manuellement dans le head est silencieusement écrasé par le panneau natif de Localization. La correction s'est faite au bon endroit, en forçant l'URL de base sur https://www.sami.eco, pour aligner hreflang, canonique et sitemap sur les 611 pages concernées.

Passage en base de données unifiée pour l'architecture CMS des guides. Pour mettre fin à la gestion page par page, l'ensemble des guides a été migré dans une collection CMS unique avec pages templates : toute modification future (traduction, SEO, ajout de champ) se fait désormais en un seul endroit plutôt que sur des dizaines de pages séparées.

Nettoyage exhaustif des balises on-page, canoniques et du maillage. 146 pages sans H1, 99 H1 dupliqués, 163 titles dupliqués, 108 titles trop longs, 55 pages sans canonique, 67 pages en noindex, 323 pages orphelines réintégrées au maillage : chaque catégorie a été traitée systématiquement jusqu'à clôture complète du plan d'audit.

Résultats obtenus

📈 3 664 pages et liens techniques assainis sur 100% des 34 chantiers du plan d'audit, dont les 27 chantiers P1 critiques pour l'indexation internationale : 323 pages en erreur 4xx corrigées, 323 pages orphelines réintégrées au maillage, 611 pages hreflang resynchronisées en une seule intervention.

📈 LCP -12%, Speed Index -21%, TBT -17% : la chaîne de rendu la plus lente du site (script cassé, CSS Webflow, jQuery synchrone, WebFont Loader) a été démantelée, faisant grimper le score de performance Lighthouse mobile de 0,86 à 0,90.

📈 47 pages guides éclatées en 4 langues fusionnées en une seule collection CMS, mettant fin à un travail estimé à une demi-journée par lot de pages à chaque mise à jour, traduction ou optimisation SEO.

Ce qui a rendu cette collaboration particulière

Ce chantier a combiné deux échelles de travail bien différentes : un audit de masse sur plus de 3 600 pages et liens, classé et suivi statut par statut jusqu'à clôture complète, et un travail de précision quasi chirurgical sur la chaîne de rendu (repérer un script cassé par de simples guillemets typographiques mal échappés, ou un conflit hreflang causé par un réglage Webflow qui écrase silencieusement tout code personnalisé équivalent). Cette double approche, exhaustive sur le volume et rigoureuse sur le détail technique, a permis de traiter le plan d'audit dans son intégralité sans sacrifier la précision des correctifs à plus fort impact sur la performance.