Want to Improve UI Performance? Start by Understanding Your User

Darren Hebner

Ask yourself what the user is trying to accomplish when they visit a page. Once you know this, it helps identify the actions to improve UI performance.

Shopify

•

Darren Hebner

•11 min read•intermediate•

--

•View Original

GraphQLJavaScriptReactReact Router

Overview

The article discusses strategies for improving UI performance in the Shopify admin's Marketing section by focusing on user needs and optimizing loading times. Key insights include assessing current performance, prioritizing essential components, and enhancing perceived loading experiences.

What You'll Learn

1

How to assess current UI performance and identify areas for improvement

2

Why prioritizing essential components can enhance user experience

3

How to implement skeleton loading states to improve perceived performance

4

When to use memoization to optimize rendering performance in React

Prerequisites & Requirements

Understanding of UI performance metrics and React component lifecycle
Familiarity with Chrome Developer Tools for performance profiling(optional)

Key Questions Answered

How can testing on real-world devices improve UI performance?

Testing on real-world, low-end devices helps developers understand the actual user experience, ensuring the application performs well for users with less powerful hardware. This approach allows for identifying performance bottlenecks that may not be evident on high-end devices.

What strategies can be used to improve perceived loading performance?

Strategies include using skeleton screens to give users a sense of stability and progress, deferring non-essential components to reduce initial load times, and prioritizing the loading of critical components to make the page useful as quickly as possible.

What is the benefit of memoizing expensive tasks in React?

Memoizing expensive tasks reduces unnecessary re-computation, which can significantly improve rendering times. For example, optimizing date formatting by reusing a single Intl.DateTimeFormat object reduced the render time of a component from approximately 64.7 ms to 0.5 ms.

How does the Navigation Timing API help in performance tracking?

The Navigation Timing API provides detailed timing metrics for navigation events within single-page applications, allowing developers to measure performance more accurately than traditional metrics like time to first byte, especially in client-side rendered applications.

Key Statistics & Figures

Render time reduction for <StartEndDates /> component

from ~64.7 ms to ~0.5 ms

This improvement was achieved by memoizing repetitive date formatting tasks.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend

React

Used for building the user interface of the Shopify admin.

Backend

Graphql

Used for querying data required for rendering pages.

Frontend

Apollo

Used for managing GraphQL data in the React application.

Key Actionable Insights

1
Implement testing on low-end devices to better understand user experiences.
This practice helps identify performance issues that may not be visible on high-end devices, ensuring that all users have a quality experience regardless of their hardware.

2
Utilize skeleton loading states to enhance perceived performance.
Skeletons can provide users with a sense of progress and stability, making the application feel faster and more responsive while data is being fetched.

3
Prioritize loading essential components first to improve user experience.
By ensuring that critical functionalities are available as soon as possible, you can significantly reduce the time users spend waiting for the application to become usable.

4
Defer non-essential components and use async loading to optimize initial load times.
This strategy minimizes the amount of JavaScript loaded upfront, allowing for a quicker rendering of the essential parts of the application.

Common Pitfalls

1

Overloading the browser with non-essential tasks during initial render.

This can lead to delays in rendering critical components, frustrating users. To avoid this, prioritize loading essential components and defer non-critical tasks.