UI Performance Optimization

9 posts · May 2017 – Sep 2022

What this trail covers

Shopify has developed and enhanced its UI performance across its admin interfaces. Initial efforts focused on understanding user flows and identifying performance bottlenecks through profiling. Key strategies include prioritizing the loading of components and data, memoizing expensive tasks, deferring non-essential components, prefetching resources based on user hints, and improving loading states with skeletons and stable content presentation. This post details the development of the Polaris Video component, which leverages the preload attribute to improve font loading times, reducing time-to-text-paint by 50% and eliminating FOIT.

All Shopify trails

Sep 2022Lessons From Building iOS Widgets - ShopifyThis post details the development of iOS widgets for Shopify, focusing on technical challenges and solutions. It covers the decision to use native SwiftUI over React Native due to memory limitations and WidgetKit's architecture. It explains the strategy for fetching data independently from the main app, using a short-lived cache to avoid redundant network calls and session kick-outs, and implementing a flexible decoder strategy for handling various metric shapes. The post also discusses building a single UI view to support multiple widget sizes and the use of Reportify and ShopifyQL for querying business analytics data.
Aug 2022Instant Performance Upgrade: From FlatList to FlashList - ShopifyIntroduced FlashList, a performant React Native list component, as a drop-in replacement for FlatList. FlashList addresses performance issues like frame drops and blank cells by recycling views and optimizing memory utilization. It also adds new features such as `getItemType`, flexible column spans, and performance metrics for developers.
Jun 2022Building a Form with Polaris - ShopifyThis post introduces the use of the Polaris design system for building forms within the Shopify admin. It details how to leverage specific Polaris React components (Form, FormLayout, TextField, Page, Card) to construct a functional form with input fields and navigation. It also addresses the essential requirement of wrapping the application with the AppProvider component for Polaris to function correctly and provides insights into the generated HTML and React component structure.
Mar 2022Creating a React Library for Consistent Data Visualization - ShopifyThis post details the creation of the Polaris Viz React library to address inconsistencies in data visualization across Shopify's internal teams. It introduces a theming system with default light and dark themes, a `PolarisVizProvider` for centralized theme management, and `createTheme`/`createThemes` functions to ensure complete and consistent theme definitions. The library also allows for overwriting default themes and defining multiple custom themes. Additionally, it enhances data series coloring by allowing optional colors to be passed directly to data series, enabling dynamic color adjustments based on data.
Nov 2021The Vitality of Core Web Vitals - ShopifyThis post introduces and explains Google's Core Web Vitals (LCP, FID, CLS) as critical metrics for user experience and search engine ranking. It details the definitions, measurement thresholds, and implications of each metric, and discusses the difference between lab and field data collection for performance analysis.
Advertisement
Sep 20205 Ways to Improve Your React Native Styling Workflow - ShopifyIntroduced the Restyle library, an open-source React Native styling system built with TypeScript. Detailed best practices for styling workflows including creating a design system (spacing, color, typography), defining a theme object, using React's Context API for dynamic theming, creating reusable Box and Text components that map properties to theme values, implementing responsive style properties based on breakpoints, and enforcing type safety with TypeScript.
Sep 2019Want to Improve UI Performance? Start by Understanding Your User - ShopifyThis post details strategies for improving UI performance in the Shopify admin, specifically within the Marketing section. It emphasizes understanding user flows to prioritize critical components and data loading. Techniques discussed include assessing the current situation using real-world devices and performance profiling tools (Chrome DevTools, React Profiler), prioritizing essential components by memoizing expensive tasks (e.g., date formatting) and deferring non-essential ones (e.g., ImagePicker modal), and improving the loading experience with skeleton content and prefetching. The post highlights the use of React, GraphQL, and Apollo, and provides actionable advice for optimizing UI performance.
Oct 2018Building a Data Table Component in React - ShopifyThis post details the technical implementation of a responsive, readable, contextual, and accessible data table component in React. It addresses challenges with horizontal scrolling by introducing a scroll container, maintains context by fixing the first column using absolute positioning, and solves the resulting cell height misalignment by implementing state management for cell heights, using refs to access DOM elements, calculating maximum cell heights per row, and dynamically applying these heights. It also includes handling window resize events to ensure dynamic height adjustments.
May 2017How 17 Lines of Code Improved Shopify.com Loading by 50% - ShopifyIntroduced the use of the `<link rel="preload">` HTML attribute to instruct the browser to download font resources concurrently with CSS files, thereby reducing the time to render text on the screen and eliminating the Flash of Invisible Text (FOIT). This optimization was applied to Shopify.com and resulted in a 50% improvement in time-to-text-paint.