---
title: Performance and Experience
docType: default
---

# Performance and Experience

## Why Optimize Performance

Miniapp performance is closely tied to user experience. During use, users may encounter the following issues:

- **Slow startup**: Long wait time after opening the miniapp
- **Page lag**: Frame drops when scrolling lists or interacting
- **Response delay**: Buttons don't respond promptly
- **Long blank screen**: Page content takes too long to appear

These issues seriously affect user willingness to use the miniapp and lead to churn. As features iterate and pages grow, performance problems become more prominent. Developers should invest in performance optimization alongside feature development to ensure a good user experience.

## Two Main Themes of Performance Optimization

Miniapp performance optimization primarily covers two directions: startup performance and runtime performance.

### Startup Performance

Startup performance focuses on the time from when a user opens the miniapp to when the first screen content is visible. The shorter the startup time, the faster users enter the miniapp and the lower the churn rate.

Startup performance optimization includes:

- [Launch Process](/en/miniapp/develop/ray/guide/optimization/startup/launch-process) - Understand each phase of miniapp startup
- [Package Size Optimization](/en/miniapp/develop/ray/guide/optimization/startup/package-size) - Reduce package size for faster download
- [Code Injection Optimization](/en/miniapp/develop/ray/guide/optimization/startup/code-injection) - Optimize code execution efficiency
- [First Screen Render Optimization](/en/miniapp/develop/ray/guide/optimization/startup/first-render) - Speed up first screen display

### Runtime Performance

Runtime performance focuses on smoothness during miniapp use. Good runtime performance means smooth scrolling, responsive interactions, and fluid animations.

Runtime performance optimization includes:

- [Using setData Wisely](/en/miniapp/develop/ray/guide/optimization/runtime/setdata) - Optimize data update patterns
- [Render Performance Optimization](/en/miniapp/develop/ray/guide/optimization/runtime/render) - Reduce rendering overhead for nodes, lists, and animations
- [Resource Loading Optimization](/en/miniapp/develop/ray/guide/optimization/runtime/resource) - Image lazy loading, format and size optimization
- [Memory Optimization](/en/miniapp/develop/ray/guide/optimization/runtime/memory) - Avoid memory leaks and overflow

## User Experience Optimization

Beyond performance, the following also affects overall user experience:

- [Multi-device Adaptation](/en/miniapp/develop/ray/guide/optimization/experience/adaptation) - Notch screen, safe area, and other adaptation strategies
- [Skeleton Screen](/en/miniapp/develop/ray/guide/optimization/experience/skeleton) - Reduce perceived loading time

## How to Start Optimizing

### 1. Use Analysis Tools to Locate Issues

Before optimizing, understand the current performance status of your miniapp. Start with [Startup Performance Analysis](/en/miniapp/develop/ray/guide/optimization/analysis-tools/startup-performance) and [FPS Performance Analysis](/en/miniapp/develop/ray/guide/optimization/analysis-tools/fps) to locate bottlenecks in the startup and runtime phases, then use [Experience Score](/en/miniapp/develop/ray/guide/optimization/analysis-tools/experience-score) for an overall experience check.

### 2. Optimize by Priority

Recommended optimization priority:

| Priority | Direction | Reason |
| -------- | --------- | ------ |
| High | Startup performance | Directly affects user willingness to enter the miniapp |
| High | setData optimization | The most common source of performance issues |
| Medium | First screen render | Affects how quickly users see content |
| Medium | Memory optimization | Prevents the miniapp from being reclaimed by the system |

### 3. Monitor Continuously

Performance optimization is an ongoing process. After each version iteration, use analysis tools to check performance metrics and ensure new features haven't introduced performance regressions.

## Performance Metrics Reference

| Metric | Recommended Value | Description |
| ------ | ----------------- | ----------- |
| Startup time (first launch) | < 3s | Includes package download time |
| Startup time (subsequent) | < 1.5s | Using locally cached package |
| FMP (First Meaningful Paint) | < 2s | Time until users can start interacting |
| FPS (frame rate) | >= 30 | Below 30 causes noticeable lag |
| setData payload | < 100KB | Data size per single setData call |
| Package size | < 2MB | Use subpackages if exceeded |
| Experience score | >= 85 | Comprehensive performance and experience rating |