Comprehensive Guide to H5 Page Load Performance Optimization

1. Background

In March, a key online H5 project required sub‑second launch, prompting a systematic investigation of how to improve the 1.5 s launch rate through H5 page optimizations.

2. Why Optimize

From the user perspective, faster loading and more responsive interactions improve experience and reduce churn. The "Global Web Performance Matters for ecommerce" report highlights this importance.

From the business side, fewer requests and lower bandwidth usage cut resource costs and increase conversion revenue.

3. Optimization Goals

The target is to reach a 98 % launch rate; current metrics show many domains below 90 % and the best around 96 %.

4. H5 Performance Analysis

Analysis Tools

Lighthouse

Chrome DevTools

gtmetrix (https://gtmetrix.com/)

WebView Loading Process

WebView initialization.

Network request, download of HTML/CSS/JS, white screen.

HTML skeleton appears, JS requests data, page stays in loading state.

Data arrives, full rendering, user interaction becomes possible.

Visual diagram of the H5 startup process.

Shortening each stage is the key to H5 performance improvement.

5. Optimization Solutions

Loading strategy optimization

Skeleton screen implementation

Resource request optimization (static assets, WebP, lazy‑load, on‑demand component loading)

Bundle resource optimization

CDN & caching

(1) Loading Strategy Optimization

Four typical script loading behaviors:

Default: HTML parsing is paused when a script tag is encountered; the script executes, then parsing resumes.

defer: HTML and JS load in parallel; the script runs after the DOM is fully parsed, preserving order.

async: HTML and JS load in parallel; each script executes as soon as it finishes downloading, order is not guaranteed.

module: Similar to defer but supports multiple module files via .

Project examples (screenshots omitted) illustrate the practical use of these strategies.

(2) Preload & Prefetch

preload loads a resource early in the page lifecycle and guarantees it will be available before rendering starts.

Example markup:

<script rel="prefetch" as="script" href="index.js" />
<script rel="preload" as="script" href="index.js" />

prefetch hints the browser to download resources that might be needed on a future navigation; it runs with low priority during idle time.

Note: place preload immediately after <title> for earliest execution.

dns‑prefetch & preconnect

dns‑prefetch resolves domain names early, reducing latency especially on mobile networks.

<link rel="dns-prefetch" href="//*.com">

preconnect goes further by establishing TCP and TLS connections after DNS resolution.

<link rel="preconnect" href="//*.com.cn" />

(3) Skeleton Screen

Skeleton screens display a lightweight layout while real content loads, eliminating white‑screen flashes and improving First Contentful Paint (FCP).

First‑screen: hand‑written skeleton HTML in index.html .

Other pages: use SVG skeletons provided by UI.

SPA route changes: use react-content-loader or vue-content-loader components.

Ensure no network requests before the skeleton (HTML < 4 KB).

Our project injects a fixed SVG skeleton via the private @auto/vite-plugin-cdn plugin.

(4) Resource Request Optimization

Image compression & WebP

Uncompressed UI assets are recompressed; images larger than 500 KB are split. Tools such as docsmall batch‑compress images.

WebP offers superior compression with lossless/lossy, alpha, and animation support. Our front‑end acceleration service automatically generates WebP versions; the @auto/img-crop package handles dynamic conversion and caching.

(5) Bundle Resource Optimization

Third‑party library extraction

Using Webpack's DllPlugin (or Vite equivalents) to bundle stable libraries separately, preserving their hash and improving cache hit rates.

Example Vite configuration (excerpt):

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import legacy from '@vitejs/plugin-legacy';
import createExternal from 'rollup-plugin-external-globals';
import cdn from '@auto/vite-plugin-cdn';

export default ({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
  const isProduction = process.env.NODE_ENV === 'production';
  const plugins = [];
  if (isProduction) {
    plugins.push(
      createExternal({
        react: 'React',
        'react-dom': 'ReactDOM',
        history: 'HistoryLibrary',
        'react-router': 'ReactRouter',
        'react-router-dom': 'ReactRouterDOM',
        immer: 'immer',
        axios: 'axios',
        'js-cookie': 'Cookies',
      })
    );
    plugins.push(cdn({ enableModule: true }));
  }
  return defineConfig({
    plugins: [legacy({ targets: ['> 0.05%', 'not dead', 'not op_mini all'] }), ...plugins],
    build: {
      rollupOptions: {
        external: ['react', 'react-dom', 'history', 'react-router', 'react-router-dom', 'axios', 'js-cookie'],
      },
    },
  });
};

Performance warnings are set to keep individual assets under 300 KB (Webpack) or chunk size warnings under 300 KB (Vite).

6. Summary

After applying the above optimizations, launch rates rose above 95 % and approached the 98 % target for most projects. Asset count dropped from 295 to 214, total size from 1.63 MB to 439.88 KB (≈‑74 %). Continuous monitoring and iteration remain necessary.

For further details, refer to the linked guides, PPT videos, and the author’s contact information.