Want to Improve UI Performance? Start by Understanding Your User

Summary

Shopify’s team examined UI performance in the Marketing section of the Shopify admin, aiming to improve load time, perceived load time, and interactions after navigation. They tested the experience on a low-end Moto G3, profiled browser activity with Chrome Developer Tools and React DevTools, and used merchant workflows to reorder priorities. The work reduced unnecessary initial work by memoizing repeated date-formatting tasks, deferring the nonessential ImagePicker bundle, and prefetching that component and its data when a merchant hovered over its activator; memoization cut one component’s render time from about 64.7 ms to 0.5 ms. For loading states, the team recommends stable skeletons with static headings and immediately useful controls, such as the Create campaign button, so merchants can act before unrelated data arrives.

Context

The Marketing section had room for improvement despite route-based bundle splitting and avoiding large external dependencies. Profiling showed that nonessential components and data were delaying work that was more important to merchants, while loading states could leave pages unstable or less useful during navigation.

Approach / What changed

The team tested on a real low-end device, captured Chrome and React performance profiles, and optimized the merchant’s likely flow. Changes included memoizing repeated date-formatting work, asynchronously loading the ImagePicker, prefetching it on hover, and designing skeleton states with stable dimensions, static headings, and immediately available controls.

Takeaways

• Memoizing Intl.DateTimeFormat and two other date-formatting utilities reduced the StartEndDates component’s render time from approximately 64.7 ms to 0.5 ms.
• The ImagePicker was moved into an asynchronously loaded bundle because it is only needed after the merchant clicks Select image; hovering over that button triggers prefetching of the component and its data.
• Skeletons are more effective when they include static headings and closely match final content height, while always-rendered controls such as Create campaign can unblock merchants during loading.

Related reading