How to Triple Your Website’s Speed: Front‑End Performance Optimization Case Study

Background

When developers focus on feature delivery, website performance often gets ignored, leading to slower pages as code accumulates. After a systematic optimization, Lighthouse Performance score increased by 279%.

Performance Gains

Metric

Before

After

Improvement

Lighthouse Performance Score

29

81

279%

FCP

0.7s

0.7s

-

LCP

6.2s

2.5s

248%

TTI

10.1s

2.1s

480%

Speed Index

5.6s

1.8s

311%

TBT

820ms

120ms

683%

Before‑after visual comparison:

1. Pre‑Optimization Analysis

Understand performance metrics and measurement tools.

Analyze the parts that need improvement.

1.1 Understanding Tools and Metrics

Chrome DevTools’ built‑in Lighthouse runs automated audits (performance, accessibility, best practices, SEO, PWA) on various device sizes and network conditions.

Key performance metrics:

FCP – Time until the first piece of DOM content is rendered.

LCP – Time when the largest contentful element becomes visible.

TTI – Time until the page is fully interactive.

Speed Index – Visual progress of page loading.

TBT – Total time main thread is blocked from responding to user input.

2. Identified Issues

Lighthouse highlighted several problems:

Excessive resources: 147 requests totaling 11 MB.

Static resources cached for only 1 hour.

Scroll listeners without {passive:true}, causing jank.

Images missing explicit width/height.

Too many JS files and long‑running tasks.

3. Optimization Measures

3.1 Reducing Bundle Size

Compress unused JavaScript.

Adopt modern image formats (WebP, AVIF).

Lazy‑load off‑screen images.

Minify JavaScript.

Resize images appropriately.

Remove unused CSS.

3.1.1 Code Compression

Check for remaining compression opportunities and uncompressed libraries.

3.1.2 Code Splitting

Use webpack-bundle-analyzer to split large npm packages and create a separate runtime chunk.

3.1.3 Component Lazy Loading

Wrap components with React.lazy + Suspense, use skeleton screens as fallbacks, and pre‑load on hover.

3.1.4 Library On‑Demand Loading

Load utilities via import('module').then(...) only when needed.

3.1.5 CDN for Static Assets

Upload JSON data files to a CDN and fetch them lazily.

3.1.6 Remove Unused Resources

Delete unused micro‑frontend (mf) and npm packages.

3.1.7 Avoid Duplicate npm Packages

Ensure the component library is imported only once, not both via mf and npm.

3.1.8 Avoid Nested ESM Dependencies

Prevent deep dependency trees that hinder effective on‑demand loading.

3.1.9 Icon On‑Demand Loading

Create a dedicated npm package for icons to avoid loading the entire icon set.

3.1.10 Result

Bundle size reduced from 11.7 MB to 1.1 MB (≈10.6× reduction).

3.2 Image Optimization

Lazy‑load non‑critical images.

Set appropriate image dimensions.

Prefer WebP format.

4. Best Practices

Set a strict CSP policy.

Use proper image resolution.

5. SEO Improvements

Add meaningful meta description and keywords.

Provide alt attributes for all images.

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

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

6. Before‑After Comparison

After optimization, even with a cleared cache the site loads in seconds.

Overall performance increased by roughly 270%.

7. Performance Monitoring

To maintain high performance, an internal front‑end monitoring platform “ZhuLong” was introduced.

Step 1: Load CDN Plugin

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

Step 2: Initialize in Entry File

useEffect(() => {
  // Initialize profiling component, toggle reporting options
  if (IS_PROD) {
    // @ts-ignore
    jmfe.profilerInit({
      flag: xxx, // Application ID from ZhuLong
      autoReport: true,
      autoAddStaticReport: true,
      autoAddApiReport: true,
      autoAddImageReport: false, // Disable for many images
      performanceReportTime: 8000,
      profilingRate: 1,
    })
  }
}, [])

Step 3: View Monitoring Data

The platform shows a performance score of 96.

Step 4: Set Alerts

Configure alerts for performance anomalies to detect regressions early.

Conclusion

This article detailed a comprehensive front‑end optimization process—from problem analysis to concrete measures such as bundle reduction, image handling, SEO fixes, and continuous monitoring—resulting in nearly a three‑fold speed increase and a visual performance dashboard.