NeatFX.fr : e-commerce Magento 2 Hyvä avec score Google PageSpeed maximisé

Le Rebranding de Neatfx.fr

Modernisation du Logotype et Création de Charte graphique

Réinventer l’expérience Web

Quand NeatFX, distributeur caennais spécialisé dans les stations de relevage et pompes eaux usées, nous a confié la refonte de sa boutique en ligne, le cahier des charges était exigeant : une plateforme Magento 2 robuste, un design professionnel à la hauteur de son positionnement d’expert, et surtout des performances techniques maximales pour satisfaire à la fois les utilisateurs et Google. Le choix du thème Hyvä s’est imposé comme la réponse évidente. Voici le récit complet de ce projet e-commerce.

Qui est NeatFX ?

Le brief : les enjeux du projet

NeatFX avait des besoins bien identifiés dès le départ. Le site existant souffrait de performances insuffisantes, d’un design vieillissant et d’un manque de clarté dans la navigation sur un catalogue technique dense. Les enjeux étaient multiples :

Pourquoi avoir choisi Magento 2 avec le thème Hyvä ?

La question de la stack technique est centrale dans tout projet e-commerce. Pour NeatFX, deux exigences s’imposaient : la robustesse d’une plateforme e-commerce mature capable de gérer un catalogue technique complexe, et des performances frontend exceptionnelles. La combinaison Magento 2 + Hyvä répond exactement à ces deux exigences.

Magento 2 : la puissance e-commerce pour un catalogue technique

Magento 2 est la référence pour les boutiques e-commerce à catalogues complexes. Gestion fine des attributs produit (dimensions, puissance, débit, pression…), filtres de navigation multicritères, règles de prix catalogue, gestion des stocks multi-sources, checkout optimisé — autant de fonctionnalités natives indispensables pour un distributeur comme NeatFX.

Hyvä : la révolution des performances frontend Magento

Le thème Hyvä remplace l’architecture frontend traditionnelle de Magento 2 (RequireJS + Knockout.js + jQuery) par une stack moderne et légère : Alpine.js pour l’interactivité et Tailwind CSS pour le style. Le résultat sur les performances est spectaculaire :

Critère	Magento 2 thème Luma classique	Magento 2 + Hyvä
JavaScript chargé (homepage)	~400–600 Ko (minifié)	~30–60 Ko
CSS généré	~300 Ko (non purgé)	~10–25 Ko (Tailwind purgé)
Score PageSpeed Mobile	20–45 typiquement	85–98 atteignable
Time to Interactive (TTI)	5–12 secondes	1–3 secondes
LCP (Largest Contentful Paint)	3–6 secondes	inférieur à 2,5 secondes
CLS (Cumulative Layout Shift)	0.1–0.3 (mauvais)	inférieur à 0.05 (excellent)

Avec Luma, le thème natif de Magento, même un site bien optimisé plafonne autour de 40/100 sur mobile. Avec Hyvä, on vise les 90+ en standard. Ce n’est pas une optimisation marginale, c’est une architecture différente.

— Équipe développement Pixellescence, Caen

Phase 1 – Direction artistique & design e-commerce

Un site e-commerce technique ne doit pas sacrifier le design au profit de la fonctionnalité. Au contraire : un design soigné renforce la confiance de l’acheteur et contribue directement au taux de conversion — surtout pour des produits dont le panier moyen est élevé.

🎨 Les partis pris visuels pour NeatFX

Charte graphique professionnelle. Nous avons travaillé une palette sobre et sérieuse — tons bleus techniques, blancs propres, accents orange pour les appels à l’action — évocant l’univers industriel et hydraulique de NeatFX tout en restant accessible et rassurant pour le particulier.

Homepage orientée conversion. La page d’accueil guide immédiatement le visiteur vers ses besoins : un bandeau hero clair avec la promesse principale (« Solutions de relevage d’eaux usées »), une navigation par univers de produits (relevage, récupération, assainissement…), des éléments de réassurance visibles dès le premier scroll (livraison offerte dès 199€, conseil expert, marques européennes).

Fiches produit techniques et rassurantes. Les produits NeatFX ont des caractéristiques techniques précises — débit, hauteur de refoulement, puissance moteur, diamètre de passage. Nous avons conçu des fiches produit structurées avec des tableaux de spécifications lisibles, des visuels produit optimisés et une hiérarchie visuelle claire qui guide l’acheteur vers le bon choix.

Pages catégories avec filtres.) La navigation dans un catalogue hydraulique dense nécessite des filtres multicritères efficaces. Nous avons conçu une interface de filtrage latérale intuitive, avec des attributs métier pertinents (puissance, type d’application, marque, prix), permettant à n’importe quel profil d’acheteur — du bricoleur au professionnel — de trouver rapidement le bon produit.

📐 Maquettes Figma validées avant tout développement

Comme pour chaque projet de création de site e-commerce à Caen, nous livrons les maquettes desktop et mobile sur Figma avant d’écrire une seule ligne de code. NeatFX a pu visualiser, commenter et valider chaque template (homepage, catégorie, produit, checkout) en amont, garantissant un alignement total sur la vision du client.

Phase 2 – Développement & intégration Magento 2 Hyvä

L’intégration d’un site Magento 2 sous Hyvä demande une maîtrise complète de l’écosystème : architecture des templates Hyvä, composants Alpine.js, compilation Tailwind, modules Magento natifs et sur-mesure. Voici les éléments clés du développement réalisé pour NeatFX.

⚙️ Stack technique

Composant	Solution	Rôle dans le projet
Plateforme	Magento 2 Open Source	Gestion catalogue, commandes, clients, stocks
Thème frontend	Hyvä Theme	Performance, Alpine.js, Tailwind CSS — zéro jQuery/RequireJS
Interactivité	Alpine.js	Filtres, mini-cart, galerie produit, composants UI dynamiques
Style	Tailwind CSS (purgé)	CSS ultra-léger, cohérence design-system, responsive
Recherche	ElasticSearch + Hyvä Search	Recherche instantanée, pertinence sur les références techniques
Filtres	Layered Navigation Magento + Alpine	Filtrage multicritères AJAX sans rechargement de page
Paiement	Stripe + PayPal + virement	Couverture maximale des modes de paiement BtoC/BtoB
Hébergement	Serveur dédié optimisé Magento	PHP 8.2, OPcache, Redis, Varnish, CDN

🛠️ Développements spécifiques réalisés

• 🔧 Thème Hyvä sur-mesure à partir des maquettes validées, sans surcouche de page builder — code propre, maintenable, performant
• 📦 Templates de fiches produit enrichis : tableaux de spécifications techniques générés dynamiquement depuis les attributs Magento, onglets (Description, Specs, Documents, Avis), galerie optimisée avec lazy load et zoom
• 🔍 Navigation filtrée AJAX : filtres de catalogue sans rechargement de page complet via Alpine.js, avec mise à jour de l’URL pour le SEO (paramètres de filtres dans l’URL canonique)
• 🏷️ Système de réassurance : modules de rassurance personnalisés (livraison, conseil, garantie, paiement sécurisé) intégrés nativement dans les layouts Hyvä
• 📊 Pages marques et fabricants : landing pages dédiées à chaque marque partenaire (Calpeda, Jetly, DAB…) pour le SEO et la fidélisation
• 📄 Guides d’achat : templates de contenu informatif intégrés aux pages catégorie pour le SEO et l’aide au choix
• 📞 Module contact expert : formulaire de demande de conseil technique intégré aux fiches produit complexes

Phase 3 – Maximisation du Google PageSpeed : notre méthode

Le score Google PageSpeed (ou score Lighthouse) est directement lié aux Core Web Vitals — les métriques que Google utilise comme facteur de classement depuis 2021. Sur un site e-commerce Magento, atteindre un score élevé est un véritable défi : catalogue de produits, images nombreuses, scripts tiers (analytics, avis clients, chat…), fonctionnalités complexes. Voici l’ensemble des optimisations réalisées pour NeatFX.

🏗️ Fondations : Hyvä comme socle de performance

Le choix du thème Hyvä est la première et la plus impactante des décisions de performance. En supprimant RequireJS, Knockout.js et la grande majorité des dépendances jQuery héritées de Luma, Hyvä réduit drastiquement le poids JavaScript chargé en page. Sur NeatFX, le bundle JS de la homepage passe de plusieurs centaines de kilo-octets à moins de 60 Ko — soit une réduction de plus de 85 %.

🖼️ Optimisation des images

• Conversion automatique de toutes les images produit au format WebP (30 à 50 % plus léger que JPEG à qualité équivalente)
• Attribut loading="lazy" sur toutes les images hors-viewport
• Attributs width et height explicites sur chaque image pour éviter le CLS (décalage de mise en page)
• Image principale de la fiche produit en LCP préchargé (<link rel="preload">) pour accélérer le Largest Contentful Paint
• Compression optimisée des images via le pipeline de génération d’images Magento configuré pour la qualité cible

⚡ Optimisation JavaScript & CSS

• Tailwind CSS purgé à la compilation : seules les classes effectivement utilisées dans les templates sont incluses dans le CSS final — résultat : moins de 20 Ko de CSS en production
• Defer et async sur tous les scripts non critiques (analytics, Hotjar, scripts tiers)
• Inline du CSS critique (above-the-fold) dans le <head> pour un premier affichage sans attente de fichier CSS externe
• Scripts tiers chargés en façade (ex : chat widget affiché uniquement après interaction utilisateur)
• Zéro jQuery sur les pages critiques grâce à Alpine.js

🖥️ Optimisation serveur & infrastructure

• Varnish Cache : mise en cache des pages full-page côté serveur, TTFB (Time To First Byte) inférieur à 100ms sur les pages cachées
• Redis pour le cache applicatif Magento (sessions, données de configuration, cache de blocs)
• PHP 8.2 avec OPcache optimisé : réduction drastique du temps d’exécution PHP
• CDN pour les assets statiques (images, CSS, JS) : délivrance depuis des serveurs géographiquement proches de l’utilisateur
• GZIP / Brotli activé sur tous les assets textuels
• HTTP/2 : multiplexage des requêtes pour réduire la latence
• SSL/TLS avec certificat HTTPS — prérequis de confiance et signal SEO

📊 Résultats PageSpeed obtenus

Phase 4 – SEO e-commerce : visibilité sur les requêtes techniques

Les performances PageSpeed ne sont qu’un des piliers du SEO. Pour NeatFX, dont les clients cherchent des produits très spécifiques (« station de relevage WC », « pompe vide-cave 400W », « poste de refoulement eaux chargées »), une architecture SEO e-commerce rigoureuse a été mise en place dès la conception.

🔍 Optimisations SEO réalisées

• Structure d’URL propre : hiérarchie catégories/sous-catégories/produits cohérente et lisible (/relevage-eaux-usees/stations-relevage/[slug-produit])
• Gestion des URL canoniques pour les pages de filtres et de pagination — évite le duplicate content Magento
• Balises title et meta description optimisées avec des patterns dynamiques intelligents sur les catégories et produits
• Données structurées Schema.org : Product (prix, disponibilité, avis), BreadcrumbList, Organization
• Sitemap XML Magento configuré et soumis à Google Search Console — produits, catégories, pages CMS
• Robots.txt finement configuré pour exclure les pages de compte, panier, checkout et les paramètres de filtres des robots
• Contenu sur les pages catégorie : textes optimisés sur les requêtes clés de chaque univers produit
• Pages marques : landing pages dédiées indexées sur les requêtes « [marque] + pompe/relevage »
• Core Web Vitals dans le vert : impact direct sur le classement Google depuis mai 2021

Le résultat : neatfx.fr, un e-commerce performant à tous les niveaux

Le site neatfx.fr est aujourd’hui une boutique e-commerce Magento 2 Hyvä qui combine expertise sectorielle, design professionnel et performances techniques de premier plan. Un site que Google aime — et que les acheteurs convertissent.

🔗 Visitez le site : neatfx.fr