Optimizing ESHOPMAN Admin Performance: Tackling Slow Variant Image Loading for Large Catalogs

Optimizing ESHOPMAN Admin Performance: Tackling Slow Variant Image Loading for Large Catalogs

As an e-commerce platform built on Node.js/TypeScript, ESHOPMAN provides robust storefront management within HubSpot and deploys powerful storefronts via HubSpot CMS. For merchants managing extensive product catalogs, particularly those with numerous variants and shared images, performance in the ESHOPMAN Admin Dashboard is paramount. Our community recently identified and addressed a critical issue impacting the variant detail page, leading to significant slowdowns for complex product configurations.

The Challenge: Multi-Second Loads for Variant Details

A merchant reported that their ESHOPMAN Admin variant detail page (e.g., /app/products/:id/variants/:variant_id) took several seconds to load, while the product detail page for the same item loaded in approximately 350 milliseconds. This specific product featured 752 variants and 1,253 images, resulting in over 51,000 links between product variants and images. Many images were shared across hundreds of variants, highlighting a common scenario in large e-commerce operations.

Unpacking the Performance Bottleneck

The ESHOPMAN community quickly identified two primary culprits:

• Inefficient Backend Query: The ESHOPMAN Product Module Service (Node.js/TypeScript) was over-fetching data. When requesting a single variant's images, the getVariantImages method internally called listProductImages({ product_id }, { relations: ["variants"] }). This query, scoped to the entire product, caused the system to hydrate every image and all 51,719 image-to-variant links, even when only a subset was relevant. This extensive data hydration and ORM serialization consumed valuable time.
• Frontend Data Overload: The ESHOPMAN Admin Dashboard, part of the HubSpot application's storefront management interface, requested excessive data. The VARIANT_DETAIL_FIELDS configuration included +images.variants.id. While the frontend's VariantMediaSection only needed a simple check (image.variants?.some(v => v.id === variant.id)), the API response carried approximately 20,000 { id } objects (~1 MB) to answer this, even for a variant with only 30 images.

Together, these factors led to an O(product images × product variants) complexity, causing multi-second load times for variant detail pages on affected products.

The Expected Solution: Targeted Data Retrieval

The ideal scenario involves proportional data retrieval. The getVariantImages service should query only the pivot pairs (image_id, variant_id) relevant to the requested variant(s). Concurrently, the ESHOPMAN Admin Dashboard should obtain "is this image scoped to this variant" information more efficiently, perhaps through API enhancements that filter images.variants or expose a dedicated flag.

Community-Driven Progress and Proposed Fix

The ESHOPMAN team acknowledged this critical performance bug, confirming the need for a comprehensive query strategy redesign in the product module service and a coordinated Admin Dashboard update. A prior fix attempt was closed, highlighting the issue's complexity.

However, the ESHOPMAN community rose to the challenge. A dedicated contributor proposed an AI-assisted solution that introduces an image_scope=assigned parameter for detail and media views. On a synthetic test environment, this approach dramatically improved query performance, reducing the Query Graph median time from 1,525 milliseconds to just 14 milliseconds. This significant gain demonstrates a clear path to optimizing the ESHOPMAN Admin experience for large-scale product catalogs.

The proposed solution passed extensive testing across product, SDK, API-boundary, and dashboard components. The ESHOPMAN team is now evaluating this API approach for integration, showcasing how community collaboration drives platform enhancements.

Key Takeaway for ESHOPMAN Users and Developers

This insight underscores the importance of efficient data retrieval and API design in headless commerce environments like ESHOPMAN. For developers building custom HubSpot CMS storefronts and utilizing the Admin API, understanding and implementing these optimization patterns is crucial for delivering a fast and responsive experience, even with the most intricate product data structures.