iQiyi H5 special page to create native experience optimization practice

Wuhan Yuan Chuanghui Returns, Let’s Talk About Large Models on April 20th”

Background of the project

H5 special topics and event pages have always been an important way to promote the company's dramas and attract new users to the app. They play a vital role in various business fields. At the same time, there are also some shortcomings that have been widely criticized. For example, the page opens slowly, the white screen phenomenon occurs, the title bar at the top of the H5 terminal is separated from the page content, etc. We have in-depth cooperation with the webview team on these issues, communicated and tried various solutions, focusing on optimizing user experience and page performance. We have made some progress so far, and now share some practical experience with everyone for your reference.

Performance optimization

The loading and rendering process of the fun H5 special page is roughly as follows:

We have explored and optimized every link, and some of them have achieved good results.

1. Offline caching of public resources

A user may visit H5 pages built by multiple fun platforms. There are many identical codes in pages with different content. Many of them are static resources with high reusability, low frequency of changes, and controllable total volume. Such as JSSDK, React, Vue, our runtime, and even some highly reusable components. This part of the fun is nearly 500k (before gzip). These codes are ideal for long-term storage on the user's phone to avoid repeated loading.

We adopted the offline caching solution provided by the webview team, which has many advantages:

Supports pre-delivery, users can use the local cache when accessing H5 for the first time, instead of the traditional need to enter the cache a second time;
There are complete update mechanisms and tools, and operation and maintenance are convenient;
It has experienced a large number of online project verifications and has high reliability.

Comparison before optimization (left) and after optimization (right):

经验证，优化后性能有显著提高，而且网络越不好首屏提速越明显。

Webview offline caching principle diagram

Offline cache management background

2. Template pre-rendering

Template pre-rendering is a breakthrough in our cooperation with the webview team . The fun H5 special page is abstracted into the form of page template + data bundle. After starting the app, the webview is initialized to load the template. When there is a fun specific domain name + a specific logo (pr=1) Template pre-rendering mode will be used, requesting the page data bundle.js according to specific rules, executing the js to integrate the data with the template and then rendering the page. If there are no specific parameters, the normal offline solution will be adopted.

At present, this solution has been put into use on both ends, and the overall performance has been improved by about 60%, and the optimization effect is obvious.

	Prerender hit rate	First screen time is reduced
Iphone	55%	57%
Gphone	51%	60%

This solution is still being optimized, such as further improving the pre-rendering hit rate.

3.H5 embedded native player

This is another important breakthrough in our cooperation with the webview team. Through technologies such as same-layer rendering, the iQiyi native player is embedded into the H5 page, making our playback experience aligned with native while ensuring that the native player is inside the H5 page. Smooth displacement and content switching also support more image quality experiences such as 4K and frame-quality movies. It is now online on both ends.

4. Split screen loading

The fun H5 topic is an operational page, which is composed of business components. Generally speaking, the components shown above the fold are the most important.

Therefore, we implemented a split-screen loading solution. The runtime starts loading other components after loading the first-screen components. To a certain extent, this is artificially giving up Internet speed to high-quality content.

Optimization effect:

Based on the above statistics, assuming that there is not much difference in the amount of resources of each component, we can roughly conclude that split-screen loading reduces the component loading on the first screen by about 60%.

5. Business interface pre-simplification

In addition to reducing the number of components loaded, the add-ons within the components must also be optimized. The dependency distribution of statistical fun components is as shown below:

After tracking and analysis, the data returned by the business interface also has optimization points. For example, for the most commonly used resource bits, the data returned by an interface is about 30k, but the front end only needs 5k of it. Not only the resource bit interface, but also a large number of general interfaces are in a similar situation.

Therefore, we streamlined the interface at the node layer and eliminated fields that are not used by the client while ensuring versatility.

Here is a list of condensed functions that are part of it.

Effect: After optimization, the size of a single component can be reduced by 25k. Based on 10 components on a normal page, the total page size is reduced by about 250k.

6. webp optimize images

The penetration rate of webp is already quite high, and the optimization effect is also obvious. However, operational H5 pages are different from traditional manually developed pages. Most of these images are uploaded by operational students themselves and cannot be compressed in advance in the project. We cannot require them to compress images before uploading, nor is it suitable to automatically compress images to webp when uploading. Because some old models do not support webp. Therefore, we dynamically determine in the browser that those that support webp will go to the webp version requested by CDN.

Example of requesting a webp version of an image (add caplist=webp after the URL):

Code example:

Effect: After comparison, a commonly used 500k image in operations only costs 130k for webp with the same quality. Even in the case of fast network, the speed of rendering images on the first screen is still very obvious.

Experience optimization

1. Set the title bar

When you open a traditional in-end H5 page, you will see a white or black native title bar at the top. This seems incompatible with the theme color of the H5 page and has a strong sense of fragmentation. We use the setToolColor method provided by webview to set the text and background color of the title bar in the terminal. This is how to achieve a complete visual look and feel.

Rendering:

In the picture on the left, if the title bar is not set, the top of the ios is white, but on the Android side, it will be black, which is separated from the page; in the picture on the right, after setting the title bar, the entire page will have a more immersive experience.

Hide title bar:

When the business party needs to create personalized title navigation or does not need a title bar when implementing an H5 page, the title bar can be directly hidden by appending the parameter qyc-title-hide=1 or hideNav=1 to the URL. Inside the H5 page Implement your own title bar. Make the page presentation more integrated.

Example: http://pages.iqiyi.com/m/qt/63x0bbnx.html?qyc-title-hide=1

Rendering:

On the right is the top navigation implemented inside H5 after removing the native title bar, making the page more three-dimensional and complete.

2. Support pull-down refresh effect

In the past, if our H5 page wanted to refresh the page data in the terminal, we usually could only add buttons to the page, or go back and re-enter the page. Now we can add the parameter qyc-support-refresh=1 after the page URL to achieve the pull-down refresh effect. The user does not have to leave, achieving a native pull-down interactive experience.

Example: https://pages.iqiyi.com/m/zy/63x0bdru.html?qyc-pr=1&qyc-body-bgc=007bc2&qyc-support-refresh=1

3. Set the page drop-down background color

The traditional webview page has a white background after being pulled down, which has a poor look and feel. We can set the page background color through the update_titlebar_style method provided by webview. When the user pulls down the page, the white background will not be displayed. The page is more immersive.

Rendering:

After pulling down on the left side, the page and navigation appear to be very separated. After setting the webview background color on the right side, the page becomes more complete after pulling down.

4. Set the default background color of webview

The white screen has always been one of the main reasons why product operators reject H5. It allows users to escape from the native experience at a glance. In the past, it was too late to set the background color through js after the page was opened. In order to solve this problem, we By appending the qyc-body-bgc parameter after the H5url and matching the page background color value, such as: qyc-body-bgc=5671c8 ; this can advance the background color setting time until the webview starts. This eliminates the white screen display and further improves the page experience.

Example: https://pages.iqiyi.com/m/xj/wswj.html?qyc-pr=1&qyc-body-bgc=7071a9

Rendering:

You can see that when you first scan the QR code to enter the page, there is a white screen on the right side, while the background color on the left side has been preset to make the user experience better.

5. Pre-occupancy optimization

H5网页在加载过程中，会频发触发relayout。而传统APP进去时，页面结构布局已经确定，不会频繁变化。

对此，我们会提前保存图片宽高，从而避免后期图片加载时导致布局频繁变化。

示例：

6.图片加载体验

内容图片加载时增加背景色，同时封面图片增加淡入动画。这样能提高整个页面的品质感，和传统H5的印象区别开来。

效果图：

最终效果展示

经过性能和体验双重优化，H5页面最终效果如下：

右侧为优化后效果，初期没有白屏，整体呈现更流畅快速。

总结

我们通过一系列关键技术的研究与实践，包括资源离线化、模板预渲染、内嵌本地播放器，以及对原生控件，如标题栏的精细控制和H5控制webview背景等手段，持续进行深度优化。使得专题页不仅在感官体验上实现了显著的提升，同时在性能指标方面也取得了较好成果。同时，我们也认识到，仍然存在进一步优化的空间，以及更多新的方法等待我们不断探索。我们将持续与webview团队深度协作，积极尝试更多前沿可能性，以进一步提升用户体验并推动创新。