Étude de cas e-commerce 翊珍香 : performances des images et administration des membres et des promotions

Contexte du problème

Les marques alimentaires traditionnelles ne veulent pas seulement une page d'accueil, mais une plateforme de commerce électronique complète capable de gérer les produits, les membres, les promotions et le contenu. Les défis sont les suivants : premièrement, le grand volume d'images de produits et d'événements ; si la gestion des images n'est pas effectuée à l'avance, le temps de chargement initial (LCP) sera affecté par les grandes images ; deuxièmement, les règles de promotion sont complexes : plusieurs événements simultanés, réductions basées sur les niveaux de membres, superposition de coupons – si ces règles sont codées dans le programme, chaque nouvel événement nécessite des modifications par les ingénieurs, ce qui entrave le rythme des opérations.

Méthode de mise en œuvre

• —Création d'une plateforme de commerce électronique de base à l'aide de Next.js, GraphQL, PostgreSQL et Redis : le front-end récupère les données de produits, de membres et de promotions via GraphQL, chacune étant modélisée séparément ; Redis gère le cache des requêtes les plus fréquentes, réduisant ainsi la charge de la base de données.
• —Priorisation de la gestion des images : les images originales téléchargées sont converties en formats modernes lors de l'exportation, et sont coupées en différentes tailles en fonction de la disposition ; le front-end charge les versions appropriées en fonction de l'appareil, au lieu de demander au navigateur de les agrandir à partir des images originales.
• —Vérifier la chaîne de chargement des ressources LCP : confirmer la priorité de chargement, le préchargement et les dimensions déclarées de l’image principale du premier écran. Fixer un objectif LCP inférieur ou égal à 2.5 secondes et le vérifier à la livraison.
• —Gestion des règles promotionnelles dans l’administration : combiner 19 types de campagnes, notamment les seuils de montant ou de quantité, les cadeaux et les remises à durée limitée, avec 5 niveaux de membres dans un modèle de règles configurables. L’équipe définit les conditions et les périodes dans l’administration ; lors du paiement, le backend calcule les montants selon ces règles. Ajouter une campagne ne nécessite aucune modification du code.

Portée réelle de Falcon

• Interface frontale de commerce électronique, pages de produits et de contenu
• Règles de gestion des membres, des événements et des coupons
• Intégration de l'API GraphQL, de la base de données et du cache
• Optimisation de la sortie d'images et des principaux chemins de chargement

Flux de données de commerce électronique et de gestion

1. 01Les clients accèdent au processus d'achat via les pages de produits ou d'événements, et les images des pages sont optimisées pour charger les versions appropriées en fonction de la taille de l'appareil.
2. 02Le front-end récupère les données de produits, de membres et de promotions via GraphQL, et les requêtes les plus fréquentes sont fournies par le cache Redis.
3. 03Lors de la finalisation de la commande, le back-end calcule le prix final en fonction du niveau de membre, des événements en cours et des règles de coupons ; si plusieurs règles sont appliquées simultanément, elles sont traitées dans l'ordre de priorité défini, sans calcul du prix sur le front-end.
4. 04Les responsables de la gestion peuvent maintenir les dates de produits, de contenu et d'événements dans la console, sans nécessiter de modifications du programme ou de nouvelles déploiements.

Limitations, échecs et alternatives

• —Les chiffres d'optimisation des images ne décrivent que les différences techniques, et ne permettent pas de déduire une croissance des revenus.
• —Les performances peuvent varier en fonction de la page, des images, des appareils, du réseau et des services tiers. Elles ne doivent pas être considérées comme des valeurs fixes.
• —Le nombre de membres et de fonctionnalités représente la portée du système, et ne correspond pas nécessairement à l'utilisation réelle ou aux résultats de vente.
• —Le montant des promotions est calculé côté serveur, et l'affichage côté client est uniquement à titre indicatif, afin d'éviter les incohérences de prix pendant les périodes de modification des règles.

Comment vérifier les preuves

• ✓Il est possible de vérifier les marques, les produits et l'interface de shopping principale sur un site web public.
• ✓88.8% représente la comparaison de la taille totale des fichiers avant et après l'optimisation des images, il s'agit d'une mesure technique ponctuelle. La mesure concerne les actifs d'image eux-mêmes, et non des données de surveillance continue.
• ✓Les objectifs LCP et la taille des fonctionnalités proviennent de documents publics existants.
• ✓Aucune donnée GA4, GSC, taux de conversion, commandes ou revenus n'est disponible publiquement.

Mesures et capacités disponibles