First Screen Rendering Optimization
Optimizing the first screen rendering of a page aims to ensure that the "Page.onReady" event occurs as early as possible. However, in many cases, the "Page.onReady" event may still result in a blank page. Therefore, it's more important to allow users to see page content as early as possible (such as First Paint or First Contentful Paint).
1. Avoid Referencing Unused Custom Components
During page rendering, custom components referenced in the current page configuration through "usingComponents" will be initialized, as well as other custom components that these components depend on. Unused custom components will affect rendering time.
Unused components should be promptly removed from "usingComponents".
2. Simplify First Screen Data
The time it takes to render the homepage is directly related to the complexity of the page. For complex pages, progressive rendering can be chosen. Based on the priority of page content, critical parts of the page should be displayed first, while non-critical or invisible parts can be deferred for later updates.
Additionally, data unrelated to view layer rendering should be avoided in the "data" object to prevent affecting page rendering time.
3. Preload First Screen Data
Many mini-programs rely on server-side API data (such as product lists) when rendering the homepage. During this time, the mini-program's homepage may appear blank or as a skeleton screen.
Since network requests may take a relatively long time, developers are advised to initiate network requests in "Page.onLoad" or even earlier, rather than waiting until after "Page.onReady".
4. Cache Requested Data
Mini-programs provide the ability to read and write local caches using dlt.setStorage and dlt.getStorage. Data stored locally returns faster than network requests. If network requests are slow for some reason, it is recommended to prioritize retrieving data from the cache for rendering views and update them after the network request returns.
5. Skeleton Screen
Skeleton screens are typically used to roughly outline the structure of a page with gray blocks before the page is fully rendered. Once the data is loaded, the skeleton screen is replaced with real content.
Developers are encouraged to avoid displaying a blank page when page data is not ready (e.g., when it needs to be fetched over the network). Instead, a skeleton screen should be used to outline the page structure until the data is returned, improving user willingness to wait.