Build-time Pre-rendering for Front-end Performance Optimization

This article is based on a talk by Meituan senior R&D engineer Han Yang at Meituan Tech Salon #40, titled "Front-end Meets Black Technology: Creating a New UI Experience and Efficiency". It introduces how to use build-time pre‑rendering to optimize the first‑frame white‑screen problem on mobile.

Since the birth of JavaScript, front‑end technology has evolved rapidly. Mobile white‑screen optimization is a crucial aspect of user experience. Traditional rendering approaches such as SSR, CSR, and pre‑rendering are compared, and the trade‑offs of using a Node middle‑layer in a hybrid architecture are discussed.

Why does the first screen turn white? The browser rendering pipeline includes HTML parsing, DOM construction, CSSOM construction, JavaScript parsing, layout, and painting. Delays in fetching the HTML document, loading resources, and executing JavaScript cause a prolonged gray/white screen, which negatively impacts user perception.

Statistics from the "Global Web Performance Matters for e‑commerce" report show that:

57% of users care whether a page loads within 3 seconds.

52% say page speed affects their loyalty.

Each additional second reduces page views by 11% and satisfaction by 16%.

Nearly half of mobile users abandon a page that hasn't loaded within 10 seconds.

In the context of Meituan Pay, a slow page can lead to complaints and financial loss.

Optimization ideas focus on four user‑centric performance metrics (FP, FCP, FMP, etc.) and aim to deliver a meaningful visual structure as early as possible.

By pre‑rendering the HTML at the <script src="http://cdn.com/index.js"></script> stage (mounted hook in Vue), the first‑contentful paint (FCP) can be shown instantly, reducing perceived latency, especially on weak networks.

Build-time Pre-rendering Workflow

The workflow consists of three main steps:

Configuration reading : Define which routes need pre‑rendering in a config file.

Triggering the build : Use a TypeScript decorator to invoke the pre‑rendering hook with a single line of code.

Build compilation : Run a headless browser (PhantomJS) to generate the final HTML files.

Because the project predates Headless Chrome and Puppeteer, PhantomJS‑prebuilt is used to fetch the rendered HTML.

Example of obtaining HTML via PhantomJS:

To improve build efficiency, multiple routes are pre‑rendered in parallel, completing within 5 seconds.

Solution Optimization

During production, a problem arose: the pre‑rendering step could not fetch CDN assets because the site had not been deployed yet. The <script src="http://cdn.com/index.js"></script> reference would fail.

Request hijacking is used to intercept CDN requests and serve local copies, allowing the pre‑rendering process to succeed.

Sample code for request hijacking (illustrated in the original image):

Results

After integrating build‑time pre‑rendering, the FCP time decreased by 75%, dramatically improving the perceived loading speed.

Author Bio

Han Yang, senior R&D engineer at Meituan, with many years of front‑end experience, responsible for Meituan Pay wallet team and front‑end infrastructure.

He invites readers to join the Meituan front‑end technical community via WeChat (ID: MTDPtech01).