Front-End Performance Metrics and Optimization Strategies

This article explains the differences between SPA (client‑side rendering, also called CSR) and SSR (server‑side rendering) and introduces related terminology such as Lighthouse, viewport, content elements, and second‑open rate.

It then describes user‑perceived performance metrics: FCP (First Contentful Paint), LCP (Largest Contentful Paint) and FMP (First Meaningful Paint). The relationships among these metrics and their typical order (FCP ≤ LCP ≤ FMP) are discussed, as well as how they relate to DCL and load events in different rendering modes.

The core of the article is the definition and calculation of a custom FMP metric. Important elements are selected based on weighted area (element area in viewport × unit weight). Unit weights are higher for videos > images > text, and larger elements receive higher weight. The calculation uses MutationObserver to track DOM changes, performance.mark to record timestamps, and performance.getEntriesByType('resource') to obtain resource load times. The maximum render time among important elements is taken as the final FMP value.

Performance analysis is performed at two levels: business‑domain analysis (identifying pages with the worst metrics) and page‑level analysis (finding heavy static resources and slow API calls). The article outlines steps for finding optimization targets, such as sorting pages by PV, examining resource size, transfer time, and CDN coverage.

Several optimization techniques are presented:

WebView improvements: pre‑loading HTML, reducing script‑blocking resources, and compressing assets.

Image optimization: converting images to WebP, achieving up to 90% compression, with fallback to JPEG/PNG for unsupported devices.

Bundle size reduction: removing unused components, on‑demand loading of lodash, shrinking analytics SDK, trimming router dependencies, and applying component‑level lazy loading.

SSR component enhancements: server‑side output of components, lazy loading of off‑screen images, and eliminating unnecessary client‑side scripts.

After applying these measures, Lighthouse scores improved by over 20%, transferred data decreased by ~20%, and overall page performance increased by roughly 10%.