Introduction: In addition to content display, commercial landing page also carries the capacity of service marketing, customer-user unicom and other capabilities. The loading performance of landing page is closely related to user experience and customer transformation. Performance optimization work must leave the data, we started from the data and analyzed the influence of the landing page load performance for the user experience, at the same time the construction of the large commercial landing page performance indicators, dismantling key loading paths, with data to guide the optimization direction, business end-to-end performance optimization are introduced the main technical means.

The full text contains 2,842 words and is expected to take 6 minutes to read.

First, the importance of landing page loading performance

The loading speed of mobile landing pages is an important factor affecting the user search experience, which directly affects the commercial conversion ability. When a user clicks on the search results and enters the mobile page, all the content is seen without swiping the screen, which is called the first screen. The loading time of the first screen has a particularly significant impact on user experience and transformation.

“Baidu mobile search landing page experience white paper” continues to pay attention to the impact of the first screen of the page on user behavior characteristics. White paper 4.0 research found that the first screen of the page loading time in “1.5 seconds” less than the site, will bring users smooth and fast speed experience. The whitepaper takes this experience issue a step further in version 5.0 to show that sites or small programs that take less than “1 second” to load on the first screen of a page will have a higher retention rate and more in line with users’ expectations for a fast search experience.

At the same time, the statistics of user conversion data on the business side showed that with the slow loading time of the first picture on the first screen of the advertisement landing page, the business conversion ability such as form submission, phone call and customer service consultation session decreased. The loading speed showed a significantly different degree of decline before and after 1 second:

  • Nearly a second ago, conversion rates were down about 5%;

  • After more than one second, the transformation data showed a decrease of 4%, and a relatively obvious inflection point appeared at about 1.3 seconds.

2. Performance measurement and critical path disassembly of commercial landing pages

In terms of traffic type, commercial advertising is mainly divided into search advertising, brand advertising, native information flow advertising and APP screen advertising. Under each traffic, there are different AD segments and different AD styles displayed. Click the advertisement to enter the commercial landing page, from the site channel, divided into hosting and non-hosting landing page: using the wooden fish produced hosting landing page, the third party of the advertiser set up landing page, the site in different forms.

In order to measure the complete end-to-end loading time of the landing page and cover all the above business traffic and page types, the business side cooperations with Shibadian and collects the time from the AD click to the page on the screen (the height of the rendered page content is greater than or equal to the screen height) through the APP kernel of Shibadian.

From the advertisement click to the page loading, the main experience is container initialization, page jump, page resources loading, page drawing several links. Disassemble the end-to-end time-consuming buried point data, and calculate the time proportion of each stage. The data situation is shown in the figure.

△ Ratio of time spent in each stage

For different advertising channels, there is a difference in the time, the most prominent is the APP screen advertising, due to the impact of APP startup resources, the container initialization takes a long time.

3. Core optimization means

Combined with the research on mobile user experience and the impact of speed on commercial conversion, we launched a special project to optimize the loading speed of the whole big commercial landing page. Targeted at the critical path of performance and time consumption, and the characteristics of each advertising channel/landing page, we conducted targeted optimization to create a good user experience and improve the conversion ability of landing page.

The main optimization idea is to find a way to solve various problems encountered in parallel to realize the task serial to parallel, can be done in advance as far as possible, can be implemented in the server side is not postponed to the client to do.

1. Optimize container initialization

In the early business development process, the rapid iteration was launched and the heap function was implemented. Only the optimal solution of its own business was considered, without fully considering the impact on the whole, and a lot of performance debt was buried. Container initialization time optimization, mainly for APP screen advertising, resource competition optimization:

  • Break down large tasks into small tasks, parallel initialization, and speed up the execution of key logic.

  • Post time-consuming tasks with low priorities to reduce unnecessary resource competition.

  • Pre-create the container in advance and prepare the container in advance after the other tasks complete and before the AD clicks.

2. Billing optimization

Before the user clicks on an advertisement, it needs to be charged first. After the billing is completed, the landing page starts to be loaded, which is executed in complete serial. In addition, due to the uncertainty of the objective conditions, sometimes the billing time is long, the user sees the white screen for a long time, and the loading of the landing page is affected, which hurts the user experience.

In this case, we began to explore parallel billing, where billing requests and landing page loads are initiated simultaneously and executed in parallel. Parallel accounting is also a dependency on being able to do end pre-render later.

In this process, it is necessary to supplement the Referer and so on for the landing page to ensure that the original processing logic of the landing page is not affected.

3. Optimize resource loading

The static resources in the landing page mainly include the MAIN HTML document, JS, CSS, and the pictures contained in the landing page, etc. The loading of these resources is related to the user’s network environment, resource size and server response status, which directly affects the rendering speed of the floor page.

In order to reduce the influencing factors when loading the landing page, we carried out resource preloading for the advertising landing page. In the stage of advertisement display, the key resources of the landing page should be properly loaded, and the browser cache should be used to realize that there is no need to interact with the server when the advertisement is clicked, so as to shorten the screen time of the landing page perceived by the user.

When pulling resources, you should also be careful to handle parameters such as headers to ensure that business logic is not affected. For third-party landing pages, resource preloading requires the server to handle more traffic and may have an impact on business statistical logic. The current priority is to implement this solution on commercially hosted landing page traffic.

4. Page drawing optimization

Base wooden fish hosting landing page, in the complex marketing appeal, business iteration fast, JS business logic complex, page drawing time is longer than ordinary static page. The managed side combined its own capabilities and the capabilities of the end, the server side pre-rendering, the end pre-rendering optimization.

4.1 Server Pre-rendering

Base wooden fish page relies heavily on JS performs to the page mapped, the service side pre-rendered in advance to find a way to remove the dom and style of the page, write the page source, and control to display the layer pre-rendered content, under this layer content JS map page according to the original logic, upon the underlying page rendering to remove the pre-rendered content.

Server-side pre-rendering changes the page from dynamic to static, and then faces update problems: JS logic is updated, DOM nodes and styles need to change synchronously. In the complex business scenario of advertising landing page, on the one hand, the business upgrade frequency of advertising hosting landing page is very high, and the business upgrade is released every week; On the other hand, advertising hosting landing page creation is very large, page order of magnitude more than ten million. The principle of server-side pre-rendering requires the use of a headless browser to open the page, and the speed is limited. After each upgrade of JS, tens of millions of pages are updated, which poses great challenges. Therefore, server pre-rendering is carried out for hot pages to take into account the page loading performance except for the long tail and the more frequent update demand. At the same time, after the server pre-render, the automated test of the page is built to compare the consistency of the server pre-render and the original page.

Ultimately, this ensures that the user can see the first screen as early as possible after pulling the server’s pre-rendered master document, improving the user experience.

4.2 Pre-render

In order to achieve a faster page loading experience, click on the AD to be able to open in seconds, the joint side tried to end pre-rendering scheme: when the AD display, create a hidden WebView to load the page in advance, block the video play, page dot and other operations, click on the AD, display and activate the page. When exiting the page, the page will be cut to the background. If you click the same advertisement twice, the page will be cut out again for display.

Under the terminal pre-rendering scheme, the loading experience of floor page is the best. The bearing capacity of the long tail low-end machine should also be considered. The equipment that can carry out terminal pre-rendering should be evaluated by evaluating the machine’s lag condition. At the same time, the accompanying research and development, regression testing costs are also high. Android, iOS dual-terminal, landing page and its associated SDK, all need to customize the pre-rendering logic in the stage of advertisement display, click and background cutting.

Four,

There are many factors affecting the loading speed of the end-to-end floor page. The benefits of the above optimization methods are obvious, but they all belong to horizontal optimization, covering all product lines, and need to be compatible with the existing commercial business logic. The cost and cycle are high, especially the landing cost of server-side pre-rendering and server-side pre-rendering is the highest. In the future, we will further optimize the internal logic of the landing page, and build a routine mechanism to continuously guarantee the performance level.

This author | Yuan Ruijin, baidu business platform for the research and development department – senior r&d engineers At present is mainly responsible for business performance of the landing page optimization, focus on improve the end-to-end landing page loading speed.

Recruitment information

The R&D department of Baidu Business Platform is mainly responsible for the platform construction of Baidu business products, including advertising, landing page hosting, whole-domain data insight and other core business directions. It is committed to making customers and ecological partners continue to grow with platforming technical services, and becoming the most dependent business service platform for customers.

Whether you are back end, front end, or algorithm, there are a number of positions waiting for you, welcome to submit your resume, [contact information with the same name of the public account Baidu Geek said, input the push], Baidu Business platform RESEARCH and development department is looking forward to you to join!

Read the original

End-to-end performance optimization practices for commercial landing pages

Recommended reading

Baidu C++ engineers of those extreme optimization (memory)

Support 700 million users search Baidu image processing included in the center

———- END ———-

Baidu said Geek

Baidu official technology public number online!

Technical dry goods · Industry information · online salon · Industry conference

Recruitment information · Internal promotion information · Technical books · Around Baidu

Welcome your attention