faq-about-visual-page-performance-optimization

What are the common factors that affect visual application loading?

Visual application load time is driven by five main factors, listed from most to least impactful:

• Hardware — CPU performance, GPU capability, and available memory directly affect rendering speed.

• Network — network bandwidth and latency affect how fast page assets are downloaded.

• Static assets — large image files (especially GIFs), videos, and other static resources downloaded at page load.

• Data source response time and data volume — how fast each widget's data source responds and how much data it returns.

• Widget count, type, and version — the total number of widgets on the page, whether any are outdated, and whether unused widgets remain.

• Hardware and network have the greatest impact on load time, followed by static assets and data source response time.

• Custom widget dependencies — whether custom widgets bundle duplicate or oversized third-party libraries.

• The following diagram shows how hardware configuration affects load time.

How long is a normal load time for a visual application?

Load time depends on content complexity. Visual applications use many widgets to create rich displays, so they load inherently slower than standard web pages. Optimizing below 5 seconds is difficult regardless of which visualization product you use.

How do I troubleshoot slow page performance?

Start by verifying that your hardware and network meet the minimum requirements, then use browser developer tools to isolate the bottleneck.

• Prerequisites

  • Check your hardware. The recommended minimum is a CPU no lower than i5-6500, a GPU no lower than GTX 960, and at least 8 GB of RAM. The exact requirement depends on your application — for example, whether it uses the 3D City Builder widget and what screen resolution you are targeting.

  • Check your network speed. A connection of at least 100 Mb/s is recommended.

• Diagnostic steps

  • Network panel: Open the browser developer tools, go to the Network panel, and press Ctrl+R to force a full page reload. Review the load time of each resource and the total DOM rendering time.

    When data is fetched through the DataV server, the request appears as 0 in the preview page Network panel and as the visual application ID in the publish page Network panel.

    Note

    DataV server-initiated requests time out after 10 seconds. If a data source request takes 8–9 seconds, the widget's data source is responding too slowly and will likely time out. To identify the affected widget, open the request details in the Network panel, check whether a timeout error is shown, note the component ID in the response, and search for that ID in the layer list.

  • Performance panel: Open the browser developer tools, go to the Performance panel, and press Ctrl+E (or click the record/refresh icon) to capture a performance profile. Review the timeline to find where the most time is spent.

How do I optimize visual application performance?

Identify the bottleneck first, then apply the relevant optimization below.

• Use a machine that meets or exceeds the recommended hardware specifications, and connect over a high-speed network.

• Replace large image or video files with more efficient formats. Use WebP instead of GIF for images, and WebM instead of MP4 for video — WebM loads faster than MP4 at the same resolution. You can also serve assets through Object Storage Service (OSS) endpoints to improve delivery speed.

  Note

  To convert an existing MP4 file to WebM, use a video conversion tool before uploading to OSS.

• In Chrome, navigate to chrome://gpu and confirm that hardware acceleration is Active for the relevant graphics features.

• Check whether any widget's data source is responding slowly. Optimize slow queries at the source.

• Check whether any data source returns an unnecessarily large dataset. A large payload slows widget rendering. Apply conditional filtering to limit query results to only the data the widget needs.

• Remove unused or redundant widgets from the application.

• Set the Windows display scale to 100% in the Control Panel display settings.

• If the application uses custom widgets, make sure all instances use the same versions of their third-party library dependencies and minimize bundled JavaScript. For example, use echarts.min.js (Apache ECharts minified build) rather than the full echarts.js.

• Update all widgets to the latest version. Before updating, copy the visual application as a backup.

How does the browser load and render a page?