Achieving Near‑Native Speed: Extreme Front‑End Optimizations for a High‑Traffic H5 Page

This article, originally posted by the IMWeb team, describes how we optimized the performance of the Penguin Tutoring course detail page, a high‑traffic H5 page built with React, to achieve a near‑native experience.

Penguin Tutoring Course Detail Page

The course detail page is one of the most important and traffic‑heavy pages in the Penguin Tutoring app, so its load speed is critical.

Architecture Evolution

Pure Asynchronous Rendering

Typical SPA rendering waits for the entire page to load before the user sees anything; the gray area in the diagram represents the first‑screen time, often 1–2 seconds even with fast CGI.

Simple optimizations include caching static resources and pre‑loading CGI data by injecting a script during the Webpack build that maintains a CGI‑to‑DATA map.

Implement loading skeletons or placeholders in HTML.

Remove external CSS.

Use dynamic polyfills.

Split common code with SplitChunksPlugin.

Properly apply Webpack 4 tree‑shaking.

Use dynamic

import

to split page code and reduce first‑screen JS size.

Compile to ES2015+ for better runtime efficiency and smaller bundles.

Apply lazy‑load and placeholders to improve loading experience.

Direct Output (Server‑Side Rendering)

By caching offline packages (static resources stored in the app) we achieved roughly 1 second first‑screen rendering. To push performance further we adopted server‑side rendering, which reduced first‑screen time by about 25%.

After optimization the rendering time dropped from 262 ms to 16 ms in a local environment, and the first‑screen experience became comparable to native.

PWA Direct Output

We extended the direct‑output approach with PWA offline caching. By caching the rendered HTML in the Service Worker, the first‑screen render can be as fast as a few hundred milliseconds (≈400 ms), effectively matching native performance.

PWA Direct Output Details Optimization

Prevent Page Jank

Because static and dynamic data are separated, the static part is rendered on the server while dynamic data (e.g., remaining seats, price) is fetched client‑side, which can cause layout shifts. To avoid this we ensure container heights are present in the server‑rendered HTML and add environment‑specific CSS classes via an inline script before the

body

tag.

<code>var REGEXP_FUDAO_APP = /EducationApp/;
if (typeof navigator !== "undefined" && REGEXP_FUDAO_APP.test(navigator.userAgent)) {
  if (/Android/i.test(navigator.userAgent)) {
    document.body.classList.add("androidFudaoApp");
  } else if (/iPhone|iPad|iPod|iOS/i.test(navigator.userAgent)) {
    document.body.classList.add("iphoneXFudaoApp");
  } else {
    document.body.classList.add("iosFudaoApp");
  }
}
</code>

Cold‑Start Prefetch

To mitigate the slower first load on a fresh device, we prefetch likely‑to‑be‑visited pages when the app starts, storing the responses in the PWA cache.

<code>function prefetchCache(fetchUrl) {
  fetch("https://you preFetch Cgi")
    .then(data => data.json())
    .then(res => {
      const { courseInfo = [] } = res.result || {};
      courseInfo.forEach(item => {
        if (item.cid) {
          caches.open(cacheName).then(cache => {
            fetch(`${courseURL}?course_id=${item.cid}`)
              .then(networkResponse => {
                if (networkResponse.status === 200) {
                  cache.put(`${courseURL}?course_id=${item.cid}`, networkResponse.clone());
                }
              })
              .catch(err => {/* monitor err */});
          });
        }
      });
    })
    .catch(err => {/* monitor err */});
}
</code>

PWA Direct Output Remaining Issues

Compatibility

Most modern Android browsers support PWA features, while iOS requires version 11.3 or later. Service Worker compatibility varies across platforms.

iOS Rendering Issue

iOS WebView (UIWebView) delays rendering until scripts finish executing. To avoid blocking the first paint we add

async

or

defer

attributes to script tags, and upgrading to WKWebView resolves the problem.

Appendix

References

PWA Exploration and Best Practices – https://juejin.im/entry/5ae1861af265da0b886d1ea8

Front‑End Isomorphic Direct Output at Billion‑Scale Traffic – https://juejin.im/post/59c370d75188256bce40f1fb

React 16 Loading Performance Optimization Guide – https://zhuanlan.zhihu.com/p/37148975