# First-screen rendering optimization
Optimization of the page's first screen rendering, with the goal of making the "home page rendering complete" (Page.onReady) as early as possible.But in many cases "home page rendering done" may still be a blank page, so it is more important to let the user see the page content earlier (First Paint or First Contentful Paint).
# 1. Use " injection on demand " and " injection on time "
In addition to optimizing code injection time, on-demand injection and time injection can also reduce the number of components that need to be initialized, reduce the time spent on actual page rendering, and get the homepage rendering done earlier.
When on-demand injection is enabled, some component code injections are delayed to the front page rendering phase, causing phase time to rise, but overall time to fall.
# 2. Enable " Initial Render Cache "
As of base library version 2.11.1, Weixin Mini Program supports enabling initial rendering cache .After being turned on, it can be activated when is not the first The view layer does not need to wait for the logical layer to be initialized, but shows the page rendering results to the user in advance, which can make the "homepage rendering complete" and the page visible to the user much earlier.
# 3. Avoid referring to unused custom components
When a page is rendered, the custom components referenced byusing Componentsare initialized in the current page configuration and global configuration, as well as other custom components on which the component depends.Unused custom components can affect rendering time.
When components are not in use, they should be removed fromusingComponents.
# 4. Streamline your first screen data
The time spent on the front page rendering is related to the complexity of the page. For complex pages, you can choose to render progressively, prioritize critical parts of the page according to the content of the page, and delay updates for non-critical or invisible parts.
In addition, data that has nothing to do with the rendering of the visual layer should not be placed in data to avoid affecting the rendering time of the page.
# 5. Request an early first screen data request
A lot of Weixin Mini Program in the rendering of the home page, need to rely on the interface data (such as the list of goods, etc.), this time the home page of the Mini Program may be blank or skeleton screen.
Because network requests take a relatively long time, we recommend that developers initiate a network request atPage.onLoador earlier, rather than waiting forPage to be ready.
To further advance the timing of requests, Weixin Mini Program provides developers with the following capabilities:
- Pre-pulling of data : It is possible to pull business data from a third-party server ahead of time by a WeChat client through the WeChat backend when the Weixin Mini Program cold start is finished, and when the code package is loaded, the page can be rendered faster, reducing user wait time.
- Periodic update : When the user does not open Weixin Mini Program-END]], data can also be pulled from the server in advance, rendering the page faster when the user opens the Mini Program, reducing the user's wait time.
# 6. Caching request data
Weixin Mini Program provides wx.setStorage , wx.getStorage With the ability to read and write the local cache, the data stored locally will return faster than the network request. If developers are unable to use pre-pull and periodic updates for some reason, we recommend taking data from the cache first to render the view and waiting for the network request to return to update.
# 7. Skeleton screen
A skeleton screen is often used to outline the outline of a page through some gray blocks before it is fully rendered, and replace it with the real content when the data is loaded.
Developers are advised to avoid displaying blank pages when the page data is not ready (for example, when it needs to be obtained over the web), instead displaying the rough structure of the page through the skeleton screen and requesting the data back before updating the page. To boost users' willingness to wait.
Developer tools provide the ability to generate skeletons to help developers maintain skeletons more easily.
