How to Boost Front‑End Performance by 279%: A Step‑by‑Step Optimization Guide

1. Background

When we are busy developing feature after feature, we often forget about website performance; as code accumulates, the site becomes slower. This article starts from that background, optimizes front‑end performance, and proposes a set of development habits to maintain high performance without repeated retroactive fixes.

Lighthouse Performance score improved by 279% after optimization.

2. Pre‑Optimization

Before optimization we needed to:

Understand performance metrics and measurement tools.

Analyze the parts that need improvement.

2.1 Understanding Metrics and Tools

Lighthouse, an open‑source automated tool built into Chrome DevTools, runs a series of tests (different device sizes, network speeds) and checks accessibility, best practices, SEO, and PWA. It provides a report covering five aspects, including performance statistics such as FCP, LCP, TTI, Speed Index, and TBT.

Performance Metrics

FCP : Time until the first DOM content is rendered (e.g., <canvas> and SVG are counted as DOM content; iframes are excluded).

LCP : Time when the largest contentful element in the viewport becomes visible.

TTI : Time until the page becomes fully interactive, calculated by finding a quiet window of at least 5 seconds without long tasks.

Speed Index : Visual speed of content rendering, measured from a video of the page load.

TBT : Total time the main thread is blocked from responding to user input, summing all long tasks (> 50 ms).

2.2 Analyzing Problem Areas

Lighthouse highlighted the following issues:

Too many and too large resources (147 requests, total 11 MB).

Static resources cached for only 1 hour.

Scroll events without {passive:true} causing delays.

Images without explicit width/height.

Excessive JavaScript files and long execution time.

3. Performance Optimization

Key factors affecting performance were large bundle size (11 MB) and oversized images.

3.1 Bundle Size Reduction

Compress code where possible.

Analyze bundle with webpack-bundle-analyzer and split large npm packages and runtimeChunk.

Implement component lazy loading using React.lazy + Suspense, with skeleton screens and pre‑loading on hover.

Load utility libraries on demand via dynamic import().

Upload static JSON data to CDN and fetch on demand.

Remove unused resources and duplicate npm packages.

Avoid nested ESM dependencies for better tree‑shaking.

Introduce an icon‑only npm package for on‑demand icon loading.

Result: bundle size reduced from 11.7 MB to 1.1 MB (≈10.6× reduction).

3.2 Image Optimization

Apply lazy loading to non‑above‑the‑fold images.

Set appropriate image dimensions.

Prefer WebP format over older formats.

4. Best‑Practice Optimizations

Configure a Content Security Policy (CSP) to improve security.

Use proper image resolution to balance quality and size.

5. SEO Enhancements

Add meaningful meta description and keywords tags.

Provide alt attributes for all images.

Ensure a valid robots.txt file.

<meta name="keywords" content="xx" />
<meta name="description" content="xx" />

<img src="smiley.gif" alt="Smiley face" />

6. Before‑After Comparison

Before optimization the perceived white‑screen time was long; after optimization the site loads in seconds even with a cleared cache, achieving an overall performance increase of about 270%.

7. Performance Monitoring

To maintain high performance during future iterations, an internal front‑end monitoring platform (named “ZhuLong”) is introduced. Steps include loading the CDN plugin, initializing it in the entry file, viewing monitoring data (score 96), and setting up alerts for performance anomalies.

Conclusion

The article details a comprehensive front‑end optimization process: from problem analysis to concrete measures (bundle reduction, image handling, CSP, SEO) and finally to performance monitoring, resulting in nearly three‑fold speed improvement and continuous observability.