Web Page Performance Metrics and Optimization Practices

In the internet era, page performance directly impacts user experience, market competitiveness, and company reputation, making objective and standardized measurement essential for effective optimization.

Key Metrics

First Contentful Paint (FCP) marks the time when the first piece of content is rendered, serving as a primary indicator of perceived load speed.

Largest Contentful Paint (LCP) measures the time until the largest visible element is rendered, reflecting the point at which users can meaningfully interact with the page.

Cumulative Layout Shift (CLS) quantifies unexpected layout movements throughout the page’s lifecycle, affecting visual stability.

For a full list of web‑vitals, see https://web.dev/metrics/.

Measuring the Metrics

Metrics can be collected in controlled lab environments using tools such as Chrome DevTools, Lighthouse, and WebPageTest, or in real‑world scenarios via user‑centric data collection.

Real‑world tools include the ftwo front‑end performance collector (built on web‑vitals) and the Chrome User Experience Report, which aggregates anonymized user data from Google.

It is recommended to use ftwo for online performance monitoring, aiming to keep the proportion of bad‑experience users (UV) below 25%.

Optimization Measures

Network‑level improvements: enable Gzip compression, adopt HTTP/2, and use a CDN with appropriate cache lifetimes for documents, static assets, and APIs.

Image optimization: apply lazy loading, reduce quality when acceptable, replace images with CSS where possible, set explicit dimensions, and use WebP format for better compression.

Code optimization: import third‑party libraries on demand, use dynamic components, and apply Vue router lazy loading to split code per route.

Example of Vue router lazy loading:

let router = createSimpleRouter({
    routes: [
        {
            path: `${URL_PREFIX}/index`,
            name: "index",
            component: () => import(/* webpackChunkName: "index" */ '../views/index/Index'),
            meta: meta
        },
        {
            path: `${URL_PREFIX}/cities`,
            name: "cities",
            component: () => import(/* webpackChunkName: "cities" */ '../views/cities/Index'),
            meta: {
                ...meta,
                subcategoryId: 11750,
            }
        },
        {
            path: `${URL_PREFIX}/success/:encryptedOrderId`,
            name: "success",
            component: () => import(/* webpackChunkName: "success" */ '../views/success/Index'),
            meta: {
                ...meta,
                subcategoryId: 14393,
            }
        }
    ]
});

Additional recommendations include removing unnecessary page redirects and automatic anchor jumps, and using custom directives (e.g., v-module-status) to control component rendering order and avoid CLS issues.

References: https://web.dev/metrics/, https://www.infoq.cn/article/HVyqFtlxgDao4vq5Durp.