Skip to main content
The optimization page helps identify the root causes of browser performance issues based on real user traffic data. Use browser metrics (such as Core Web Vitals and Flashduty custom loading time metrics) to troubleshoot slow page loading. These metrics can evaluate complete page load time from the user’s perspective. For deeper analysis, the optimization page provides detailed breakdowns of Core Web Vitals by user demographics (such as browser, region, and app version). You can use this information to track performance trends, understand the most affected user groups, and optimize precisely.

​
Diagnosis and Optimization Workflow

You can navigate to the optimization page, located under the Performance Monitoring menu, and select the metric you want to analyze. You can also jump to this feature by viewing corresponding performance data in the analytics dashboard.
1

Metric Selection

After selecting a page and metric, you can start performance data analysis:
  1. Click on a metric card to select the metric to analyze
  2. Select a group in “Show Filter Breakdown”
  3. Evaluate metrics at different percentiles (e.g., p75 represents the 75th percentile value)
The metric cards adapt to the application’s platform, so they always show the metrics that platform actually reports:
The platform is determined by the application’s own type, so no manual switching is required. first_render, onload_to_onshow, and onshow_to_onready come from the WeChat Mini Program SDK: first_render is the time to first render, while onload_to_onshow and onshow_to_onready correspond to the two segments of the mini program page lifecycle and help you troubleshoot slow cold starts. After you switch applications, the metric cards refresh to the new platform’s metric set, and the tree map (metric view) metric dropdown likewise lists only the metrics available for the current application platform.
2

Data Viewing

You can view the data performance of the metric under different conditions by adjusting the data aggregation method or modifying filter conditions, thereby advancing diagnosis and optimization work.
Data Viewing
3

Problem Diagnosis

In the problem diagnosis section, you can see resources and errors that users encountered on the page that may affect metric performance.
Problem Diagnosis
For example, for Largest Contentful Paint (LCP), you can view resources loaded before LCP was triggered. Since LCP is a metric for the time it takes for the largest element to load on the page, you can diagnose problems from both resource loading and error resolution perspectives.
4

View Event Samples

If you cannot locate key information more accurately during the resource analysis phase, you can select appropriate event samples in the event samples section for more detailed contextual analysis.
Event Samples

​
Optimization Directions

The resource loading analysis panel displays detailed loading information for all resources under the current view, helping you identify performance bottlenecks.You can switch between two tabs to control the viewing scope:
  • All Resources: Shows all resources loaded in the view
  • Blocking Resources: Shows only resources marked as blocking render-blocking resources, which delay the page’s first render
The resource list contains the following fields:
Hover over the duration color bar to view the specific timing values for each phase. When one phase accounts for 50% or more of the duration, the card explains the dominant phase and suggests optimizations (TLS is nested inside connection establishment and never becomes the dominant phase alone), helping you determine whether slow loading is caused by network connection, server response, or resource size. If Link Integration - Built-in Tracing is configured and the resource carries a trace_id, you can drill down to the corresponding trace. When the browser does not expose phase timings (commonly caused by cross-origin responses missing the Timing-Allow-Origin header), the bar area shows an “phase timings unavailable” hint.