Storefront Rendering Performance

5 posts · Aug 2020 – Jan 2024

What this trail covers

Shopify has extracted storefront traffic from the Rails monolith into a dedicated, single-purpose application to improve rendering performance. This involves designing on top of an active-active replication setup, reading from dedicated read replicas, and building on top of an active-active replication setup. The goal is to offer the fastest online shopping experience possible. This post details optimizations including MySQL multi-statement execution, a thin data mapping layer, book-keeping for Vitess integration, and the migration of the Shop app backend to Vitess for horizontal scaling of the MySQL database, enabling sharding and improved performance.

All Shopify trails

Jan 2024Horizontally scaling the Rails backend of Shop app with Vitess - ShopifyThis post details the migration of the Shop app's Rails backend from a monolithic MySQL database to Vitess for horizontal scaling. It covers the challenges of hockey stick growth, the limitations of incremental scaling, and the decision-making process for choosing Vitess. Key technical contributions include re-organizing the data model to include user_id columns, setting up query verifiers (Missing Sharding Key, Cross Database Transaction, Cross Shard Transaction, Cross Shard Write, Cross Keyspace Query) to ensure compatibility with Vitess, and the strategic choice of user_id as the sharding key for a 'users' keyspace, while keeping other data in an unsharded 'global' keyspace.
Nov 2021The Vitality of Core Web Vitals - ShopifyThis post details the Core Web Vitals (LCP, FID, CLS) and their importance for user experience and search engine ranking. It explains how to measure these metrics using lab and field data tools like Lighthouse and discusses strategies for improving them, such as optimizing image loading, reducing JavaScript execution time, and preventing unexpected layout shifts. While not directly describing a new system build, it provides crucial context and best practices for optimizing the performance of Shopify's storefronts, which is a core capability.
Apr 2021How Shopify Dynamically Routes Storefront Traffic - ShopifyThis post details the evolution of Shopify's storefront traffic routing strategy, specifically focusing on the dynamic routing mechanism implemented using nginx with OpenResty. It describes the transition from static routing rules in Lua files to a dynamic JSON-based rule system managed via a control plane and the 'Spy' chatbot. Key technical contributions include the configuration options for rules (rule_name, filters, shop_ids), traffic distribution rates (render_rate, verify_rate, reverse_verify_rate, self_verify_rate), and the implementation details within nginx's Lua module for rule evaluation and asynchronous verification requests. It also highlights how this dynamic routing system was leveraged for resilience testing and gradual rollouts.
Dec 2020Simplify, Batch, and Cache: How We Optimized Server-side Storefront Rendering - ShopifyThis post details specific optimizations for the new storefront rendering engine, including the use of MySQL's multi-statement feature to reduce database round trips, the implementation of a thin data mapping layer with plain old Ruby objects instead of a full ORM, a book-keeping mechanism for eager-loading frequently needed data, and multiple caching layers (in-memory, node-local Redis, full-page, and database query results). It also describes the Liquid object memoizer to ensure a single instance of an object is used throughout a request lifecycle.
Oct 2020How to Do an In-depth Liquid Render Analysis with Theme Inspector - ShopifyThis post introduces and details the use of the Shopify Theme Inspector tool for analyzing Liquid render performance. It explains how to interpret flame graphs generated by the tool to identify performance bottlenecks in Liquid code, such as inefficient loops and excessive global scope variable usage. The post provides specific examples of unoptimized Liquid patterns and their corresponding flame graphs, along with tips for developers to avoid these performance issues and achieve target rendering times.
Advertisement
Aug 2020How Shopify Reduced Storefront Response Times with a Rewrite - ShopifyThis post details the rewrite of Shopify's storefront rendering application, extracting it from the Rails monolith into a dedicated, high-performance service. It describes the architecture of the new implementation, which uses active-active replication and dedicated read replicas. A key technical contribution is the development of a verifier mechanism (Ruby service and Lua Nginx module) to compare the legacy and new implementations' outputs, and a dynamic routing module to gradually shift traffic to the new service based on verification results. The post also outlines the success criteria: feature parity, improved performance, and enhanced resilience.