---
title: Point of Sale performance
description: >-
  This guide explains how to test and optimize POS UI extensions for
  performance.
source_url:
  html: 'https://shopify.dev/docs/apps/build/performance/point-of-sale'
  md: 'https://shopify.dev/docs/apps/build/performance/point-of-sale.md'
---

ExpandOn this page

* [Best practices for performance testing](https://shopify.dev/docs/apps/build/performance/point-of-sale.md#best-practices-for-performance-testing)
* [Optimizing for all devices](https://shopify.dev/docs/apps/build/performance/point-of-sale.md#optimizing-for-all-devices)
* [Optimize API calls and data fetching](https://shopify.dev/docs/apps/build/performance/point-of-sale.md#optimize-api-calls-and-data-fetching)
* [Optimize component lifecycle](https://shopify.dev/docs/apps/build/performance/point-of-sale.md#optimize-component-lifecycle)
* [Common performance issues and solutions](https://shopify.dev/docs/apps/build/performance/point-of-sale.md#common-performance-issues-and-solutions)
* [Testing on entry-level devices](https://shopify.dev/docs/apps/build/performance/point-of-sale.md#testing-on-entry-level-devices)

# Point of Sale performance

These guidelines apply to POS UI extensions.

Testing your POS UI extension across different devices and scenarios is crucial for delivering a reliable, high-quality experience to all merchants. By following these best practices, you can ensure your extension performs well in diverse retail environments, regardless of the hardware choices merchants make for their business.

This guide describes how to test and optimize your extensions for maximum performance and compatibility.

***

## Best practices for performance testing

### Test across multiple device types

To ensure that your extension works well for all merchants, test on a variety of devices:

* **Tablets**: Test on iOS and Android tablets, of different screen sizes.

* **Mobile phones**: Test on various models, including both high-end and entry-level devices.

* **Different hardware generations**: Test on older devices when possible.

  This approach ensures your extension provides a consistent experience, regardless of the hardware a merchant chooses for their business needs.

### Test with realistic data volumes

Extensions that perform well with small test stores may encounter issues in production environments with larger data sets. So, it's important to test realistic scenarios. For example:

* Set up test stores with realistic product catalogs.
* Include a substantial number of orders and inventory items.
* Test with complex product configurations (variants, options, etc.).
* Simulate operational workflows at ideal speed (aim for < 2 second response times even when processing complex operations).

### Test alongside other extensions

Merchants often use multiple extensions simultaneously. Your extension should perform well even when sharing resources with others. To test this, do the following things:

* Install other POS extensions alongside yours during testing.
* Test various combinations of extensions running simultaneously.
* Verify that your extension maintains performance when others are active.

### Monitor resource usage

To monitor your extension's resource consumption, use the development tools for the platform your testing.

#### i​OS testing

* Use Xcode's Instruments to monitor memory usage and performance.
* Pay attention to Memory Graph and Leaks instruments.
* Monitor CPU usage during different operations.

#### Android testing

* Use Android Studio's Profiler to monitor memory, CPU, and network usage.

* Check for memory leaks using the Memory Profiler.

* Monitor performance during different user interactions.

  One way to determine if your extension is approaching a device's memory limit is by opening the `chrome://inspect` and monitoring the Memory tab. When this tab is open, the DevTools will automatically pause extensions that approach the memory limit. If you encounter this pause, refactor your extension to lower its memory usage.

  **Note:** When monitoring memory usage in Chrome DevTools, watch for automatic pauses in your extension's execution, which indicate you're approaching memory limits. Look for memory-related warnings in the console and memory graph trends in the Memory tab.

***

## Optimizing for all devices

POS UI extensions need to perform well across various devices with different capabilities, from high-end tablets to entry-level mobile phones. The following optimization strategies will help ensure your extension delivers a smooth, responsive experience regardless of the hardware it runs on.

### Efficient resource management

Managing device resources efficiently is critical for ensuring your POS UI extension remains responsive and stable, especially on devices with limited capabilities. Implement these strategies to optimize resource usage:

* **Lazy load components** that aren't immediately visible.
* **Release resources** when they're no longer needed.
* **Minimize recurring operations** like intervals, subscriptions, and effect hooks that consume CPU and memory.
* **Optimize images** for size and resolution.

### Choose the right components for the job

Selecting appropriate components and implementation strategies can significantly impact your extension's performance, particularly on resource-constrained devices. Use these techniques to ensure optimal performance:

* The `List` component is significantly more memory-efficient than `ScrollView` for long lists on all platforms.

* `ScrollView` renders all items at once, while `List` only renders items currently visible.

* This difference is especially important on devices with limited memory.

  **Optimize expensive calculations**:

* Cache or memoize functions that perform complex calculations on data.

* Move expensive operations out of rendering logic.

### Responsive UI design

Creating a responsive UI that adapts to different screen sizes and device types ensures your extension provides a consistent and optimized experience across the diverse hardware used in retail environments. Follow these guidelines for responsive design:

* **Use the Figma UI kit** to design your extension: [Figma UI kit](https://www.figma.com/community/file/1493617217926107705).

* **Design for different screen sizes** from the start.

* **Use relative measurements** rather than fixed pixel values.

* **Test layouts** on both small and large screens.

* **Ensure touch targets** are appropriately sized on smaller screens.

  * Use a minimum size of 44×44 pixels for all interactive elements.
  * Maintain at least 8 pixels of space between touch targets.
  * Use the `Button` component for critical actions.

### Memory considerations

Efficient memory management is crucial for POS extensions, as excessive memory usage can lead to crashes, freezes, and poor performance on devices with limited RAM. Implement these strategies to optimize memory usage:

* **Implement pagination** for large data sets.
* **Clear cached data** when it's no longer needed.
* **Monitor memory usage** during development and testing.

### Best practices for POS Extension navigation

Proper navigation implementation is essential for maintaining performance and preventing memory issues in your POS UI extension. Follow these navigation best practices:

* **Use the Navigation API efficiently**

  * Leverage the POS UI extension's Navigation API for predictable screen management.
  * Understand the navigation lifecycle to prevent memory issues with screens that remain in memory.

* **Manage navigation state carefully**

  * Use the appropriate navigation method based on your use case.
  * Be mindful that each screen pushed to the stack consumes additional memory.
  * Consider component-based approaches for simple UI changes instead of new screens.

***

## Optimize API calls and data fetching

Efficient network operations are critical for maintaining responsive performance in POS environments where connectivity may vary. Implement these strategies to optimize your API interactions:

### Batch operations when possible

Combining multiple operations into a single request reduces network overhead and improves response times. Consider these approaches:

* Instead of making multiple sequential API calls, batch operations together.
* Use bulk operations APIs when available (e.g., `bulkSetLineItemDiscounts` instead of individual updates).
* Avoid chains of dependent network requests that block each other.
* Consider implementing a queue system for operations that must happen in sequence.

### Implement efficient data fetching patterns

Smart data fetching strategies can significantly improve perceived performance. Implement these patterns:

* Cache responses when appropriate to avoid redundant network requests.
* Use pagination when fetching large datasets.
* Consider implementing a stale-while-revalidate pattern for data that changes infrequently.

### Handle network operations gracefully

Robust error handling and user feedback are essential for a good experience in fluctuating network conditions:

* Implement proper loading states to provide feedback to users.
* Add comprehensive error handling for all network requests.
* Set appropriate timeouts to prevent hanging operations.
* Include fallback mechanisms when network operations fail.

***

## Optimize component lifecycle

Proper component lifecycle management prevents performance degradation over time and ensures consistent behavior:

### Manage subscriptions carefully

Data subscriptions can cause performance issues if not managed properly:

* Be cautious with data subscriptions that may trigger frequent UI updates.
* Consider implementing debouncing or throttling for subscription updates.
* Use appropriate caching techniques to prevent unnecessary recalculations.

### Minimize effect dependencies

Side effects can cascade and cause unexpected performance problems:

* Keep side effects tightly scoped to prevent cascade updates.
* Avoid complex state management patterns that trigger cascading effects.
* Consider using an appropriate state management approach for your framework.

### Prevent race conditions

Asynchronous operations can lead to race conditions that cause unexpected behavior and performance issues:

* Avoid using multiple state variables to track related asynchronous operations.
* Implement proper cancellation for asynchronous operations when components unmount.

***

## Common performance issues and solutions

Even with careful optimization, you may encounter specific performance challenges. Here are some common issues and their solutions:

### Slow initial load

If your extension takes too long to initialize:

* Defer non-essential initialization.
* Implement progressive loading.
* Minimize dependencies.

### UI lag during interaction

If your extension's UI feels sluggish:

* Move heavy processing off the main thread where possible.
* Optimize render cycles.
* Reduce unnecessary UI updates.
* Simplify complex UI elements.

### High memory usage

If your extension consumes excessive memory:

* Release unused resources.
* Use more efficient data structures.
* Consider implementing pagination.

***

## Testing on entry-level devices

Some retailers rely on entry-level devices or previous generation hardware. Testing on these devices ensures your extension is accessible to all merchants. For example:

* **Performance expectations**: Understand that processing speeds and memory may be more limited.

* **Resource efficiency**: Optimize your extension to use minimal resources.

* **Graceful degradation**: Ensure core functionality works well, even if some enhanced features are simplified.

* **Response time**: Pay special attention to maintaining responsive interactions.

  By testing on various device types you ensure your extension is accessible to the widest possible merchant base.

***

* [Best practices for performance testing](https://shopify.dev/docs/apps/build/performance/point-of-sale.md#best-practices-for-performance-testing)
* [Optimizing for all devices](https://shopify.dev/docs/apps/build/performance/point-of-sale.md#optimizing-for-all-devices)
* [Optimize API calls and data fetching](https://shopify.dev/docs/apps/build/performance/point-of-sale.md#optimize-api-calls-and-data-fetching)
* [Optimize component lifecycle](https://shopify.dev/docs/apps/build/performance/point-of-sale.md#optimize-component-lifecycle)
* [Common performance issues and solutions](https://shopify.dev/docs/apps/build/performance/point-of-sale.md#common-performance-issues-and-solutions)
* [Testing on entry-level devices](https://shopify.dev/docs/apps/build/performance/point-of-sale.md#testing-on-entry-level-devices)