How to Triple Your Web App’s Speed: A Front‑End Performance Optimization Playbook

Background

When developers continuously add features, performance is often neglected, leading to slower sites as code accumulates. This article starts from that situation and aims to establish development habits that keep high performance without needing later retro‑optimisation.

Initial Performance Assessment

Using Chrome DevTools Lighthouse, the site scored 29/100 on Performance, with metrics such as LCP 6.2 s, TTI 10.1 s, Speed Index 5.6 s, TBT 820 ms, and 147 requests totaling 11 MB.

Key Lighthouse metrics explained: FCP, LCP, TTI, Speed Index, TBT.

Best‑practice and SEO audits also highlighted issues.

Identified Problems

Excessive unused JavaScript and CSS.

Large, unoptimized images (wrong format, missing dimensions, no alt).

Too many static resources with short cache lifetimes.

Scroll listeners without {passive:true}, causing main‑thread blockage.

Multiple duplicate npm packages and nested ESM dependencies.

Missing CSP, meta description, and other SEO basics.

Optimization Measures

1. Reduce Bundle Size

Compress JavaScript and CSS.

Analyze bundle with webpack-bundle-analyzer and split large npm packages into separate chunks.

Implement React.lazy + Suspense for route‑level component lazy‑loading, with skeleton placeholders.

Load utility libraries on demand via dynamic import('module').

Upload static JSON data to CDN and fetch on demand.

Remove unused resources and avoid duplicate package imports.

Prevent nested ESM dependencies that hinder on‑demand loading.

Create a dedicated npm package for icons to enable selective loading.

Result: bundle size reduced from ~11 MB to ~1.1 MB (≈10× reduction).

2. Image Optimization

Apply lazy loading to off‑screen images.

Set appropriate image dimensions.

Prefer modern formats such as WebP or AVIF.

3. Best‑Practice Improvements

Define a Content Security Policy (CSP).

Use proper image resolutions.

4. SEO Enhancements

Add meta description and keywords tags.

Provide alt attributes for all images.

Ensure a valid robots.txt.

Performance Monitoring

A custom front‑end monitoring platform “ZhuLong” was integrated to visualize performance metrics.

Load the CDN script:

<script defer src="https://h5static.m.jd.com/act/jd-jssdk/latest/jd-jssdk.min.js"></script>

Initialize the profiler in the entry file (React useEffect example shown).

View scores on the ZhuLong dashboard (performance score 96).

Configure alerts for performance regressions.

Result

After applying the above steps, Lighthouse Performance score rose from 29 to 81 (279 % increase). Key metrics improved dramatically: LCP from 6.2 s to 2.5 s, TTI from 10.1 s to 2.1 s, Speed Index from 5.6 s to 1.8 s, and TBT from 820 ms to 120 ms. The site now loads in seconds even after clearing cache, achieving roughly a three‑fold speed boost.

Conclusion

The article presents a step‑by‑step front‑end performance optimization workflow, covering measurement, problem identification, concrete code‑level improvements, image handling, security and SEO best practices, and continuous monitoring, enabling sustainable high‑performance web applications.