Optimizing the page performance of Dewu Technology under the construction of the venue

All h5 projects in Dewu App are opened through webview. The general impression on the performance of webview is that the opening speed is slower than native.

For SPA applications, a user needs to go through the following process to open webveiw to access h5:

1. Click on the App entrance (such as banner, etc.)
2. A new page is reached, the page is blank.
3. The basic frame of the page appears (skeleton screen), but there is no data, and the page is in the loading state.
4. All the data appears and the page is fully rendered.

From the perspective of program execution, let's look at an unoptimized webview loading h5 process:

Compressing the time of each stage is the key point of performance optimization.

WEBVIEW

Combined with the webview of the App, we adopted two optimization methods:

• Built-in static resources: static resources such as js and css are built-in in the App. App directly returns local files by intercepting the request, which of course involves a series of strategies for refreshing the cache. The hit rate of offline files is now more than 40%.

• HTML preloading: App cold start will actively pull the html of the key entry for caching.

As shown in the figure below, the second opening rate has been improved by 15%.

H5 optimization

SPA and SSR

The entire process of page rendering in the SPA venue:

The whole process of page rendering under SSR venue:

The performance of SPA and SSR on FMP, the groove in the middle is the situation where the SPA is cut from the line. It can be seen that the SSR has an average 15% improvement for the second opening.

Load timing optimization

Analyzing the html of the page, we found that some js scripts blocked the loading of html.

Reduce the script loading of three blocks.

Resource volume

Picture optimization

webp

The importance of webp can reach 90% compression rate is self-evident.

The components directly exported from the existing scheme in ssr do not have the capability of webp. Even if the webp is supported on the terminal, jpg or png images are loaded, resulting in too much resources. After ios 14 version, ios has the ability to support webp. I consulted IOS students, and the 14 version accounted for at least 70 or 80%.

Program

All pictures straight out of the node are webp. Do a webp check on the terminal, and downgrade to the original jpg or png if it is not supported.

effect

Mobile phones that do not support webp: pay attention to the header image.

Lossless compression service

To solve the problem of excessively large pictures from the source of the picture, the open source solution imagemin/imagemin is used.
The uploading of pictures at the conference site will be closed and interactive, avoiding the situation of uploading the same picture multiple times. The average compression rate is 60%.

Package volume

• Deletion of useless custom components-33k
• On-demand lodash size-24K
• Shence SDK creates script loading through JS. And solve the pre-access to the namespace of the Shence SDK. 76 k
• Dependency of koa-router. -21 k
• The components are loaded on demand.

Total resource optimization data

Optimize data on the first day after going online

Lighthouse scoring dimension analysis conclusion

Lighthouse overall score

Before optimization

After the first phase of optimization

Conclusion: Lighthouse has increased by 20%+ accordingly.

Browser resource dimension data analysis conclusion

Data before optimization:

After the first phase of optimization:

Conclusion: Transferred increased by 20%.

Comprehensive analysis conclusion

The first phase of optimization is based on various data aggregation, and the overall performance is improved by 10%.

Special optimization of SSR component experience

status quo

Some components are not straight out on the node side and do not have the ability to lazily load images.

Program

The node side is straight out of the component, and the picture outside the screen uses the lazy loading function.

effect

Involving components such as one-click coupon collection, entrance of branch venues, etc.
before:

Rear:

FMP total effect

After a series of efforts, App end optimization and h5 end optimization. We have increased the second opening rate of the page to about 40%.

Text | Ask en

Pay attention to Dewu Technology, and work hand in hand to the cloud of technology