TechPrufer
Sign inGet started

Blogs›Shopify›Storefront Rendering Performance

Storefront Rendering Performance

Storefront Rendering Performance

4
posts
2020–2021

This feature thread tracks the development and enhancement of Shopify's storefront rendering performance. Initial efforts focused on rewriting the critical software that powers all online storefronts to offer the fastest online shopping experience possible. This involved extracting storefront traffic from the Rails monolith into a dedicated, single-purpose application. Key strategies included designing on top of an active-active replication setup, reading from dedicated read replicas, and building on top of an active-active replication setup. This post details the use of the Shopify Theme Inspector to analyze Liquid render performance, interpret flame graphs, and identify common performance bottlenecks such as heavy loops, nested loops, and excessive use of global scope variables. It provides guidance on what constitutes acceptable rendering times and how to optimize Liquid code for better performance.

2021

How Shopify Dynamically Routes Storefront Traffic - Shopify

4/9/2021

This 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.

2020

Simplify, Batch, and Cache: How We Optimized Server-side Storefront Rendering - Shopify

12/10/2020

This post details the technical implementation of Shopify's new storefront rendering engine, focusing on performance optimizations. It introduces the use of MySQL's multi-statement feature to batch queries, a thin data mapping layer with plain old Ruby objects instead of a full ORM, and a query book-keeping mechanism for eager-loading data. It also elaborates on multiple caching layers: in-memory cache, node-local shared caching (Redis), full-page caching, database query results caching, and a Liquid object memoizer. Performance metrics for the new engine are provided.

How to Do an In-depth Liquid Render Analysis with Theme Inspector - Shopify

10/20/2020

This 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.

How Shopify Reduced Storefront Response Times with a Rewrite - Shopify

8/20/2020

This post details the rewrite of Shopify's storefront rendering system to improve performance and resilience. It describes the architectural shift from a monolithic Rails application to a dedicated storefront renderer, the implementation of an active-active replication setup for read replicas, and the creation of a verifier mechanism using Ruby and Lua on OpenResty. This mechanism compares responses from the legacy and new implementations and dynamically routes traffic to the new system based on verification results, ensuring feature parity and minimizing downtime during the transition.