Learn how we just made Shopify's Admin 30% faster while setting it up for AI superpowers. We overhauled admin.shopify.com, transforming the system that supports 67 million daily page views and empowers merchants in managing their businesses.
Overview
The article discusses how Shopify's Admin was optimized to be 30% faster and prepared for AI integration by transforming its architecture. Key improvements included implementing Remix for predictable data flow, standardizing loading experiences, and enhancing performance through intelligent prefetching.
What You'll Learn
1
How to implement Remix loaders for improved data fetching
2
Why standardizing loading experiences enhances user satisfaction
3
How to utilize route manifests for better route management
4
When to apply intelligent prefetching to optimize performance
Prerequisites & Requirements
- Understanding of web standards and data flow concepts
- Familiarity with Remix and Vite(optional)
Key Questions Answered
How did Shopify improve the performance of its Admin?
Shopify improved its Admin's performance by 30% through architectural changes, including the implementation of Remix loaders for faster data fetching, standardizing loading experiences across routes, and utilizing intelligent prefetching techniques. These changes collectively enhanced the user experience and reduced load times.
What are route manifests and how do they help in managing routes?
Route manifests are TypeScript files that contain metadata about each route, allowing for a single source of truth. They enable better management of routes by ensuring that all systems have up-to-date information, which reduces inconsistencies and improves collaboration among teams.
What benefits do Remix loaders provide for page loading?
Remix loaders allow for immediate data fetching as soon as a small loader file is fetched, rather than waiting for the entire component code to load. This parallel loading significantly reduces the perceived load time for users, enhancing the overall responsiveness of the Admin.
How does intelligent prefetching work in the new architecture?
Intelligent prefetching works by identifying commonly visited links and prefetching their loaders during idle browser time. This ensures that when a user clicks on a link, the necessary data is already available, allowing for instant page rendering without waiting for API calls.
Key Statistics & Figures
Daily page views
67 million
This statistic highlights the scale at which Shopify's Admin operates, underscoring the need for performance optimizations.
Performance improvement
30%
This percentage reflects the overall enhancement in load times achieved through the architectural changes implemented in the Admin.
Total files in the codebase
620,730
This number indicates the complexity and size of Shopify's TypeScript codebase, which necessitated the recent optimizations.
Lines of TypeScript
3,184,248
This statistic emphasizes the extensive amount of code that developers manage, highlighting the challenges faced in maintaining performance.
Total routes
1,017
This number represents the clear ownership and purpose established through the implementation of route manifests.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
Remix
Used for predictable data flow and improved page loading performance.
Build System
Vite
Integrated with Remix to enhance the build process for the Admin.
Backend
Apollo
Used for caching and optimizing data fetching in the Admin.
Programming Language
Typescript
The primary language used for the Shopify Admin codebase.
Key Actionable Insights
1Implement Remix loaders in your applications to enhance data fetching efficiency.By using Remix loaders, you can reduce the time users wait for data to load, leading to a smoother experience. This is particularly beneficial for applications with heavy data dependencies.
2Standardize loading indicators across your application to improve user experience.A consistent loading experience helps users understand what to expect during page transitions, reducing confusion and improving overall satisfaction.
3Utilize route manifests to maintain a clear and organized routing structure.Having a single source of truth for routes can significantly reduce merge conflicts and improve collaboration among development teams, especially in large codebases.
4Incorporate intelligent prefetching techniques to optimize performance.Prefetching can drastically improve perceived load times, especially for frequently visited pages, making your application feel more responsive.
Common Pitfalls
1
Failing to maintain a single source of truth for routes can lead to inconsistencies and merge conflicts.
Without a clear and centralized routing structure, different teams may create conflicting routes or loading patterns, complicating development and reducing overall efficiency.
Related Concepts
Web Standards And Their Importance In Modern Web Development
Performance Optimization Techniques In Web Applications
The Role Of AI In Enhancing User Experience