Shopify Hydrogen vs Liquid : La Décision Basée sur les Chiffres

Quand Shopify Hydrogen est devenu stable fin 2024, nous avons évalué la migration du thème Liquid existant de notre client vers Hydrogen. Le processus décisionnel a été entièrement fondé sur des données : TTFB, build time, dev velocity, coût de migration. Résultat : la migration s'est concrétisée, mise en production 3 mois plus tard. Cet article explique quels chiffres ont tranché la décision.

TTFB : Le Coût du Server-Side Rendering

Le thème Liquid en production affichait un TTFB moyen de 680ms (Shopify Analytics, moyenne 30 jours). Répartition par type de page :

Le moteur SSR d'Hydrogen fonctionnant à la périphérie (edge) livrait une réponse autour de 120ms, indépendamment du type de page. Chaque requête vers Liquid déclenchait un server-side rendering vers l'origin Shopify, alors qu'Hydrogen exécute les loaders Remix directement sur les nœuds edge d'Oxygen.

// Exemple de loader Hydrogen — exécuté à l'edge Oxygen
export async function loader({context, params}: LoaderFunctionArgs) {
  const {storefront} = context;
  const {handle} = params;
  
  const {product} = await storefront.query(PRODUCT_QUERY, {
    variables: {handle},
  });
  
  return json({product});
}

En cas de cache hit, le TTFB descend à 40ms (avec une couche cache ajoutée via Cloudflare Workers KV). Dans Liquid, une optimisation similaire nécessite de s'appuyer sur le CDN Shopify, qui s'avère insuffisant pour le contenu dynamique (panier, personnalisation).

Build Time : L'Impact sur la Vélocité de Développement

La build de production du thème Liquid (dans le pipeline CI/CD) prenait en moyenne 8 minutes 15 secondes. Upload d'assets avec Theme Kit, minification, déploiement vers Shopify. La build Hydrogen prend 45 secondes — build Vite + déploiement Oxygen.

En environnement de développement :

• Liquid : pas de hot reload, chaque modification nécessite un rechargement du thème (~12s)
• Hydrogen : HMR reflète instantanément les changements dans le navigateur (<200ms)

Retour des développeurs : lors de 20 modifications sur une feature branch, le temps d'attente cumulé est de 4 minutes en Liquid, 4 secondes en Hydrogen. Augmentation de la dev velocity : 98%.

# Démarrage du serveur de développement Hydrogen
npm run dev
# Serveur Vite prêt en 200ms, HMR actif

# Développement du thème Liquid
shopify theme serve
# Attente de 8-12s avant que le thème soit disponible

L'architecture Headless rend ces optimisations possibles — le frontend récupère les données via l'API Storefront Shopify, le processus de build est indépendant.

Coût de Migration : Calcul de la Dette Technique

Nous avons réparti le coût de migration comme suit :

Coût supplémentaire : hosting Oxygen (inclus avec Shopify Plus), couche cache Cloudflare Workers (optionnel, $5/mois).

Compromis : Le coût alternatif de rester en Liquid : 120 heures d'inefficacité dev par an (basé sur la différence de build time ci-dessus) × $100/heure = $12,000. À la fin de la première année, le coût de migration est amorti.

Performance Runtime : Impact sur Core Web Vitals

Données de terrain (Chrome User Experience Report, 28 jours) :

La combinaison React Suspense + SSR avec streaming d'Hydrogen réduit le LCP. Le chargement lazy des composants les retire du bundle initial, rétrécissant le critical path.

// Lazy loading des recommandations produit avec React Suspense
import {Suspense} from 'react';
const ProductRecommendations = lazy(() => import('./ProductRecommendations'));

<Suspense fallback={<RecommendationSkeleton />}>
  <ProductRecommendations productId={product.id} />
</Suspense>

La réduction du CLS : Liquid causait des décalages de layout dynamique (panier, bannière promo), Hydrogen a éliminé ces shifts (via composants skeleton).

Expérience Développeur : Retours de l'Équipe

Sondage auprès des devs 60 jours après la migration (5 développeurs) :

Plus grand défi avec Liquid :

• 80% « Longueur du processus de debug »
• 60% « Absence d'outils modernes (TypeScript, hot reload) »
• 40% « Manque de réutilisabilité des composants »

Plus grand avantage avec Hydrogen :

• 100% « TypeScript + autocomplétion IDE »
• 80% « Vitesse de dev avec HMR »
• 60% « Accès à l'écosystème React »

Retours négatifs : Documentation Hydrogen incomplète (40%), courbe d'apprentissage du router Remix Shopify (20%).

Quand Rester avec Liquid a du Sens

La décision de ne pas migrer vers Hydrogen est justifiée dans ces cas :

1. Trafic <10K sessions/mois : La différence de TTFB n'impacte pas l'expérience utilisateur, ROI de migration inexistant.
2. Thème peu custom : Utiliser un thème prêt-à-l'emploi rend la migration injustifiée.
3. Équipe sans expérience React : Le coût d'apprentissage + onboarding multiplie par 2-3 la durée de migration.
4. Pas Shopify Plus : Oxygen est inclus avec Shopify Plus ; coût supplémentaire sur les plans Basic/Advanced.

Après la Décision : Stratégie de Mise en Production

Rollout en trois phases :

1. Environnement bêta : Site Hydrogen déployé sur Vercel, test interne 2 semaines (QA + stakeholders).
2. Canary release : 10% du trafic dirigé vers Hydrogen (split avec Cloudflare Workers), taux de conversion +2.3%.
3. Rollout complet : 14 jours plus tard, 100% du trafic basculé vers Hydrogen, thème Liquid conservé en backup.

Métrique post-lancement : taux de conversion au checkout 3.8% → 4.1% (effet de la réduction TTFB + amélioration CLS). Impact annuel estimé : $180K (AOV moyen $120, 15K commandes/mois).

La décision Hydrogen s'est avérée chiffrée : TTFB réduit de 82%, dev velocity augmentée de 98%, coût de migration amorti la première année. La raison de quitter Liquid ne réside pas uniquement dans la performance — c'est l'expérience développeur moderne et la flexibilité d'une architecture composable. Si vous restez dans l'écosystème Shopify tout en visant le headless, Hydrogen est le seul choix logique.