Test de vitesse des page builders Shopify : Méthodologie & bonnes pratiques RUM

À retenir

• Lors de notre analyse de plus de 500 boutiques Shopify, les sites utilisant des page builders avec rendu via application (app-rendered) étaient systématiquement plus lents que les sites équivalents construits avec du code de thème natif. L’écart est structurel, ce n’est pas un problème de configuration.
• Une erreur courante lors des tests de vitesse est de se fier à une seule analyse Lighthouse. Lighthouse représente un seul chargement de page dans un environnement synthétique ; les vrais utilisateurs visitent votre site avec des réseaux, des appareils et des pages différents.
• Utilisez le Real User Monitoring (RUM) au 75e centile pour mesurer ce que vos clients ressentent vraiment. C’est aussi ce que Google utilise pour le référencement.
• Les tests synthétiques (Lighthouse, WebPageTest) sont parfaits pour comparer des outils entre eux. Ils ne constituent pas une mesure fiable de votre expérience utilisateur (UX) en conditions réelles.

Les page builders Shopify les plus rapides sont ceux qui génèrent du code de thème natif, car ils n’ajoutent aucun runtime à la page ; les builders avec rendu via application imposent tous une pénalité de vitesse due à leur runtime chargé à chaque visite. Lors de notre analyse de plus de 500 boutiques Shopify, les sites utilisant des page builders avec rendu d’application étaient systématiquement plus lents que les sites équivalents construits avec le code natif du thème. Un page builder qui ralentit votre boutique vous fait perdre simultanément des conversions, du ROAS sur vos publicités et des positions en SEO. Ce guide explique ce qui cause réellement ce ralentissement, comment le mesurer honnêtement avec des données d’utilisateurs réels, et fournit un modèle à copier-coller pour tester chaque outil vous-même.

Pourquoi vous pouvez nous faire confiance

Nous avons plus de 15 ans d’expérience en développement et travaillons dans l’écosystème Shopify depuis plus de quatre ans. Nous avons mesuré les performances sur plus de 500 boutiques Shopify utilisant Fudge et d’autres outils, et avons reconstruit des thèmes spécifiquement pour récupérer la vitesse perdue à cause des applications. Nous développons également Fudge, l’opérateur IA pour les boutiques Shopify, noté 4.9 sur le Shopify App Store. Son page builder écrit les pages directement dans votre thème plutôt que d’ajouter un runtime — un choix de conception motivé précisément par ce problème.

Ce qui ralentit vraiment une boutique Shopify quand on installe un page builder

Il y a quatre sources de problèmes. Et ils s’accumulent.

1. Le bundle JavaScript lié au runtime du builder

La grande majorité des builders drag-and-drop déploient un paquet JavaScript à chaque visite sur une page qu’ils ont conçue. Ce paquet régit parfois l’hydratation du layout, un lazy-loading sur des blocs ou des animations, au même titre qu’un lien de prévisualisation dans le mode éditeur, et ce qu’importe si le client ne fait que jeter un coup d’œil.

Bon à savoir, l’impact change d’un outil à l’autre. Quelques-uns se contentent d’un volume peu dérangeant, à l’inverse de leurs camarades qui peuvent exiger des paquets de 200 Ko de JS que les visiteurs essaient de charger pendant que la page s’anime. Le décalage se voit au niveau du Total Blocking Time et du Largest Contentful Paint.

2. Le CSS “render-blocking” planqué dans le head

Les page builders injectent fréquemment une feuille de style dans le head du document avant que la page ne s’affiche. Cette feuille de style doit être téléchargée et analysée avant que le navigateur ne commence le rendu (paint). Sur les réseaux lents, c’est l’un des principaux facteurs d’un LCP lent.

3. Les immenses images hero sans format récent

Même sans leur conférer le mauvais rôle en la matière (la chose demeurant assez courante par défaut chez ce type de builders) un visiteur sur smartphone devra fatalement supporter les 1,5 Mo en moyenne pour un affichage sur son modèle. Essayez de passer au modèle WebP ou AVIF, avec des ajustements de taille et les propriétés loading requises pour compenser cela.

4. Le paquet d’applis qui s’ajoute à la liste

Une application de conception + le fameux programme d’avis + un petit widget pour engager la discussion + l’outil d’upselling derrière… La page a à peine démarré qu’elle vient de choper 1 ou 2 Mo de JavaScript dans la face. Le builder n’est évidemment pas l’unique responsable de cette dégradation, mais il finit le plus souvent dans le top des applications les plus lourdes. Pensez à auditer le bloc.

Ce que la notion “sans runtime” veut dire au final

Un page builder qui génère du code de thème natif écrit du Liquid + CSS + HTML dans les fichiers de votre thème et n’ajoute rien d’autre. Quand le client visite le site, le serveur fait le rendu de la page exactement comme n’importe quelle autre page Shopify. Pas de SDK d’application, pas de runtime de builder, pas de mise en page au runtime.

Fudge fonctionne de cette façon : vous décrivez la page, Fudge l’écrit dans votre thème, et la page publiée a la même empreinte JavaScript qu’une page codée à la main par votre développeur. Le score Lighthouse est limité par votre thème, vos images et vos autres applications — pas par Fudge. Si vous le demandez, Fudge peut également lancer un audit de vitesse sur le reste de la boutique et préparer les correctifs dans votre thème pour que vous les approuviez.

C’est l’avantage structurel de cette catégorie. Ce n’est pas que les builders IA sont intrinsèquement plus rapides ; c’est que les builders qui écrivent du code natif n’ajoutent pas de runtime pour les ralentir.

Le vrai test honnête sur Shopify

La plupart des articles de « speed test » lancent un seul audit Lighthouse et rapportent le score. Ce n’est pas suffisant. Le chiffre que vous obtenez d’une seule analyse Lighthouse ne correspond pas à ce que vos clients vivent — et ce n’est pas ce que Google utilise pour classer votre boutique.

Les techniques ci-dessous sont classées par ordre d’utilité pour évaluer réellement l’impact de la vitesse sur l’UX, le trafic SEO et les conversions.

1. La force des collectes RUM (pour nous comme pour Google)

Le moyen le plus fiable de mesurer la vitesse sur Shopify, ce sont les données collectées auprès de vrais clients. C’est ce que Google utilise dans ses systèmes de classement via les Core Web Vitals. Les données RUM capturent les facteurs variables que les tests synthétiques ne peuvent pas voir : différentes vitesses de réseau, tailles d’écran, capacités des appareils, régions géographiques et la combinaison réelle de pages visitées par les clients.

Comme l’expérience d’un seul utilisateur est trop bruitée pour en tirer des conclusions, on l’agrège. Nous — et Google — préférons le 75e centile (P75) de chaque Core Web Vital. Ainsi, un LCP de 4,5s au P75 signifie que 75 % de vos utilisateurs connaissent ce LCP ou mieux. Le P75 est le bon centile car il capture l’expérience de la grande majorité des utilisateurs tout en atténuant les valeurs extrêmes (un client sur une connexion 2G dans un tunnel ne définit pas l’UX de votre boutique).

Si votre métrique P75 est bonne, vous savez que la plupart des utilisateurs ont une bonne expérience.

Où trouver ces données :

• Votre propre script RUM — par exemple la bibliothèque web-vitals de Google, qui rapporte le P75 par template et par appareil
• Chrome User Experience Report (CrUX) — Le jeu de données RUM public de Google, avec un décalage d’environ 28 jours par rapport au temps réel
• Google Search Console — Le rapport Core Web Vitals, alimenté par CrUX

Si vous modifiez la vitesse aujourd’hui, votre propre script RUM l’affichera dès l’arrivée du nouveau trafic ; cela apparaîtra dans CrUX et la Search Console dans les 28 jours.

2. Les tests synthétiques (Lighthouse, WebPageTest)

Les tests synthétiques consistent à faire passer une page dans un environnement contrôlé qui simule un utilisateur. L’audit Lighthouse dans PageSpeed Insights en est l’exemple le plus courant. C’est utile, mais ça diffère toujours des données des utilisateurs réels. Lancez un audit Lighthouse sur Amazon, eBay ou Walmart et comparez avec leurs chiffres CrUX — l’écart est important.

Trois choses à retenir lors de la lecture des résultats synthétiques :

Le synthétique est un seul chargement de page, le RUM en représente des milliers. Un seul test Lighthouse peut s’écarter de 30 % ou plus par rapport à la médiane de trois tests. Prenez toujours la médiane d’au moins trois tests, avec les mêmes conditions de réseau, à la même heure de la journée.

Le Total Blocking Time (TBT) peut être trompeur. Les outils qui diffèrent (defer) les scripts non critiques pour qu’ils se chargent après le contenu principal (ce qui est la bonne pratique pour l’UX) obtiennent souvent un TBT plus élevé dans Lighthouse que les outils qui bloquent la page avec ces scripts. Le chiffre Lighthouse peut augmenter alors que l’UX réelle s’améliore. Vérifiez avec le RUM avant de réagir à une baisse du TBT.

Mises en garde concernant la mesure du LCP. Lighthouse et WebPageTest mesurent le plus grand élément affiché de tout le chargement de la page. La mesure RUM de Google utilise le plus grand affichage avant que l’utilisateur n’interagisse avec la page. Sur une page produit, cela signifie souvent l’image du produit — mais WebPageTest va parfois mesurer le temps nécessaire pour qu’une popup de sortie (exit-intent) s’affiche. Configurez votre outil synthétique pour arrêter de mesurer à la première interaction, sinon vous surestimerez le problème.

Si vous devez choisir un outil synthétique, WebPageTest est la référence absolue dans la communauté de la web performance car il vous permet de régler finement l’environnement pour qu’il corresponde à un utilisateur P75 (bridage du réseau, émulation d’appareil, localisation géographique). Nous l’utilisons nous-mêmes pour comparer l’expérience d’un site avec et sans Fudge avant que les données des utilisateurs réels ne soient disponibles.

3. L’ordre des opérations

1. Connectez un outil RUM (la librairie web-vitals, un service RUM, ou tirez les données de CrUX)
2. Établissez une ligne de base P75 sur 28 jours sur vos principaux templates et types d’appareils
3. Faites un seul changement
4. Observez le P75 dans le RUM. N’utilisez Lighthouse que pour une comparaison relative entre des configurations, jamais comme source de vérité

Si vous n’avez pas encore de RUM, commencez par là. Les comparaisons synthétiques sans contexte RUM ne sont que des suppositions.

Un template de test de vitesse à copier-coller

Utilisez ceci lorsque vous avez besoin de comparer des page builders sur une boutique de développement avant de vous décider. Associez la médiane synthétique à au moins une semaine de données RUM une fois votre site en ligne.

Comment le remplir :

1. Installez une nouvelle copie d’Horizon (ou Dawn) sur une boutique de développement. Lancez Lighthouse Mobile 3× sur la page d’accueil ; notez le LCP médian comme valeur de base.
2. Installez un builder. Publiez une page représentative (hero, trois blocs image+texte, slider de témoignages, FAQ, CTA). Lancez Lighthouse Mobile 3× ; notez la médiane.
3. Le Δ LCP est votre estimation synthétique du coût de ce builder. Remarque : il s’agit d’un seul chargement de page. Confirmez avec le RUM après une semaine de trafic réel.
4. Désinstallez complètement le builder — y compris toutes les balises script qu’il a laissées dans theme.liquid — avant de tester le suivant.
5. Utilisez les DevTools de Chrome → onglet Coverage pour compter le “JS ajouté” (inutilisé vs total) pour chaque builder.

La colonne “Modifiable après désinstallation ?” est le détail qu’aucune analyse Lighthouse ne peut vous montrer. Testez-le : créez une page, désinstallez l’application, et regardez ce qu’il reste. Le code natif du thème reste en place et modifiable ; le rendu généré par l’application se casse ou se fige.

À quoi ressemble une “bonne” vitesse

Chiffres cibles pour une page Shopify sur mobile, mesurés au P75 :

• LCP (Largest Contentful Paint) : moins de 2,5s
• INP (Interaction to Next Paint) : moins de 200ms
• CLS (Cumulative Layout Shift) : moins de 0,1
• Poids total de la page : moins de 1,5 Mo (hors vidéo)

Les trois premiers sont les seuils des Core Web Vitals de Google, mesurés au 75e centile des chargements de pages sur mobile et desktop (web.dev, 2024) ; le chiffre sur le poids de la page est notre propre recommandation. Google a confirmé que les Core Web Vitals sont utilisés par ses systèmes de classement, et ne pas les atteindre peut vous faire perdre des positions par rapport à des pages similaires.

Le moyen le plus simple de les atteindre de manière constante sur chaque page que vous publiez est d’utiliser un builder qui n’ajoute aucun runtime, ce qui signifie aujourd’hui un builder qui écrit du code de thème natif plutôt qu’une application qui fait le rendu des pages via son propre runtime. L’écart entre les builders avec rendu par application et ceux avec code natif n’est pas un problème de configuration ; c’est lié à l’architecture.

Les catégories qui ont un désavantage structurel sur la vitesse

Sans citer d’outils précis :

• Les pages affichées via des intégrations iframe. L’iframe à elle seule ruine votre LCP tout en compliquant l’histoire de ce CLS au passage.
• Les builders injectant une feuille de style globale sur tout le site, et non pas uniquement sur les pages du builder. Tout Shopify pour la boutique passera ainsi sous ce lourd système, y compris la petite sélection des autres parties qui n’étaient à aucun propos visées.
• Les builders avec leurs animations aux charges folles. Apparitions subtiles en version de page avec la version dont l’effet un smooth scroll et du parallaxe ont beau amener une touche soignée ils coûtent une blinde à INP.
• Les builders appliquant du lazy-loading dans toute la conception ou de ce fait n’utilisant ça au mieux à d’autrui que pour ses grandes parties visuelles (et non pas sur l’image seule). Si la dépendance tombe depuis la structure avec les Javascript juste avant le “paint”, préparez-vous que ce procédé ruine totalement l’effet LCP aussi pour agir ensemble vers d’autres parts contre ce pauvre CLS des données.

Il reste envisageable au recours de petites runtimes pas très volumineuses en un simple coût où le tout semble bien aux petites charges qui posent pas grandes peines ni de quoi avoir ces inquiétudes à cela sans poser des conséquences mais en effet un outil se trouve vite pénalisé dès le moment devant toutes les grosses app dont l’ajout amène de fâcheux montants aux charges par rapport l’ajout pour les iframe qui font des ravages à se cumuler toutes ensemble en leur poids massif avec ce genre de ces cas pour plomber les bases sur cette version globalement et faire sombrer au poids maximal à ce problème.

Regardez de ce côté pour en apprendre comment en ces lieux vers d’avantage les autres du sujet sur tous nos articles sur les meilleurs choix comme de meilleurs articles au classement des meilleurs page builders Shopify ou consultez notre guide expliquant le concept à la question qu’est-ce qu’un page builder Shopify.

Une courte note sur l’hébergement et le CDN

Au passage on remarquera : Shopify installe des boutiques avec tout leur contenu via des CDN aux moyens vers le cloud par sa cache de diffusion à ce nom tel qui gère des réseaux par de tels éléments qu’aux services (ou version de cet edge caching au choix). L’inconvénient où tous nos développeurs d’applications pour le monde drag-and-drop des autres boutiques luttent face des systèmes ralentis se tourne majoritairement plutôt par cause au grand problème lié pour tous de son chargement ni vers d’autres qu’ainsi pour ses soucis au niveau du matériel face au souci de charges des éléments (le format qu’à ce fameux payload très souvent) mais quasiment point ou des rares fois d’un simple point qui viendrait toucher un hébergement. Alléger l’intégration vers des formats de photos tout afin mieux repérer les bouts à désinstaller au surplus depuis vos JS et se recentrer vers d’approuvés paquets aux appli aura une chance devant ça bien des dizaines de fois par-delà qu’aucuns réglages d’infrastructure liés ou pas pour vos hôtes.

Où va ce secteur

Pour rappeler notre parti pris : nous avons créé Fudge, qui écrit les pages directement dans votre thème au lieu de les rendre via un runtime d’application. Nous avons fait ce choix parce que la pénalité de vitesse du modèle de runtime n’est pas un bug corrigeable ; c’est l’architecture. Les outils avec rendu d’application peuvent réduire leurs runtimes, mais ils ne peuvent pas atteindre zéro. Les builders qui génèrent du code de thème natif le peuvent.

Pour la plupart des boutiques en 2026 — en particulier celles qui font de l’acquisition payante où chaque 100ms de LCP coûte en ROAS — la question n’est plus « quel page builder est le plus rapide » mais devient « quelle catégorie n’a pas de plafond structurel sur la vitesse ». C’est un choix bien différent de celui autour duquel la catégorie a été pensée il y a un an.

FAQ