E-commerce Performance: From Milliseconds to Millions

// Optimize initial page load with critical CSS
<style>
/* Critical above-the-fold styles inlined */
.header, .hero, .product-grid {
  /* Essential styles for immediate rendering */
}
</style>

<!-- Non-critical CSS loaded asynchronously -->
<link rel="preload" href="/css/main.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">

<!-- Preload critical resources -->
<link rel="preload" href="/fonts/product-sans.woff2" as="font"
      type="font/woff2" crossorigin>
<link rel="preload" href="/api/products/featured" as="fetch" crossorigin>

// Modern image serving with WebP and AVIF
<picture>
  <source srcset="hero-image.avif" type="image/avif">
  <source srcset="hero-image.webp" type="image/webp">
  <img src="hero-image.jpg" alt="Featured Product"
       loading="lazy" decoding="async">
</picture>

// Responsive images for different viewports
<img src="product-mobile.webp"
     srcset="product-mobile.webp 400w,
             product-tablet.webp 768w,
             product-desktop.webp 1200w"
     sizes="(max-width: 400px) 100vw,
            (max-width: 768px) 50vw,
            33vw"
     alt="Product Image">

// Implement virtual scrolling for large product catalogs
class VirtualProductGrid {
  constructor(container, items, itemHeight = 200) {
    this.container = container;
    this.items = items;
    this.itemHeight = itemHeight;
    this.visibleStart = 0;
    this.visibleEnd = 0;
    this.init();
  }

  init() {
    this.setupScrollListener();
    this.updateVisibleItems();
  }

  updateVisibleItems() {
    const scrollTop = this.container.scrollTop;
    const containerHeight = this.container.clientHeight;

    this.visibleStart = Math.floor(scrollTop / this.itemHeight);
    this.visibleEnd = Math.min(
      this.visibleStart + Math.ceil(containerHeight / this.itemHeight) + 1,
      this.items.length
    );

    this.renderVisibleItems();
  }

  renderVisibleItems() {
    const fragment = document.createDocumentFragment();

    for (let i = this.visibleStart; i < this.visibleEnd; i++) {
      const item = this.createProductItem(this.items[i]);
      fragment.appendChild(item);
    }

    // Use requestAnimationFrame for smooth updates
    requestAnimationFrame(() => {
      this.container.innerHTML = '';
      this.container.appendChild(fragment);
    });
  }
}

// Implement efficient pagination for product listings
public async Task<PagedResult<Product>> GetProductsAsync(
    int page, int pageSize, string category = null)
{
    var query = @"
        SELECT p.*, c.Name as CategoryName
        FROM (
            SELECT *
            FROM Products p
            WHERE (@category IS NULL OR p.CategoryId = (
                SELECT Id FROM Categories WHERE Name = @category
            ))
            AND p.IsActive = 1
            ORDER BY p.CreatedDate DESC
            OFFSET @offset ROWS
            FETCH NEXT @pageSize ROWS ONLY
        ) p
        LEFT JOIN Categories c ON p.CategoryId = c.Id";

    var countQuery = @"
        SELECT COUNT(*)
        FROM Products p
        WHERE (@category IS NULL OR p.CategoryId = (
            SELECT Id FROM Categories WHERE Name = @category
        ))
        AND p.IsActive = 1";

    var offset = (page - 1) * pageSize;

    var productsTask = connection.QueryAsync<Product>(query,
        new { category, offset, pageSize });
    var countTask = connection.QuerySingleAsync<int>(countQuery,
        new { category });

    await Task.WhenAll(productsTask, countTask);

    return new PagedResult<Product>
    {
        Items = productsTask.Result.ToList(),
        TotalCount = countTask.Result,
        Page = page,
        PageSize = pageSize
    };
}

// Multi-layer caching architecture
public class ProductService
{
    private readonly IMemoryCache _memoryCache;
    private readonly IDistributedCache _distributedCache;
    private readonly IProductRepository _repository;

    public async Task<Product> GetProductAsync(int productId)
    {
        // L1: Memory cache (fastest)
        var cacheKey = $"product:{productId}";
        if (_memoryCache.TryGetValue(cacheKey, out Product cachedProduct))
        {
            return cachedProduct;
        }

        // L2: Distributed cache (Redis)
        var distributedProduct = await _distributedCache.GetAsync<Product>(cacheKey);
        if (distributedProduct != null)
        {
            _memoryCache.Set(cacheKey, distributedProduct, TimeSpan.FromMinutes(5));
            return distributedProduct;
        }

        // L3: Database (slowest)
        var product = await _repository.GetByIdAsync(productId);
        if (product != null)
        {
            var cacheOptions = new MemoryCacheEntryOptions
            {
                AbsoluteExpirationRelativeToNow = TimeSpan.FromMinutes(5),
                SlidingExpiration = TimeSpan.FromMinutes(2)
            };

            _memoryCache.Set(cacheKey, product, cacheOptions);
            await _distributedCache.SetAsync(cacheKey, product, TimeSpan.FromHours(1));
        }

        return product;
    }
}

// Elasticsearch integration for fast product search
public class ProductSearchService
{
    private readonly IElasticClient _elasticClient;

    public async Task<SearchResult<Product>> SearchProductsAsync(
        string query, int page, int size, ProductFilters filters)
    {
        var searchRequest = new SearchRequest<ProductDocument>
        {
            Query = new BoolQuery
            {
                Must = new QueryContainer[]
                {
                    new MultiMatchQuery
                    {
                        Query = query,
                        Fields = new[] { "name^3", "description", "tags" },
                        Type = TextQueryType.BestFields,
                        Fuzziness = Fuzziness.Auto
                    }
                },
                Filter = BuildFilters(filters)
            },
            From = (page - 1) * size,
            Size = size,
            Sort = new List<ISort>
            {
                new FieldSort { Field = "_score", Order = SortOrder.Descending },
                new FieldSort { Field = "popularity", Order = SortOrder.Descending }
            },
            Aggregations = new AggregationDictionary
            {
                ["categories"] = new TermsAggregation("categories")
                {
                    Field = "category.keyword",
                    Size = 10
                },
                ["price_ranges"] = new RangeAggregation("price_ranges")
                {
                    Field = "price",
                    Ranges = new List<AggregationRange>
                    {
                        new AggregationRange { To = 50 },
                        new AggregationRange { From = 50, To = 100 },
                        new AggregationRange { From = 100, To = 200 },
                        new AggregationRange { From = 200 }
                    }
                }
            }
        };

        var response = await _elasticClient.SearchAsync<ProductDocument>(searchRequest);

        return new SearchResult<Product>
        {
            Products = response.Documents.Select(MapToProduct).ToList(),
            TotalCount = response.Total,
            Aggregations = MapAggregations(response.Aggregations)
        };
    }
}