Frontend Performance Optimization: From Lighthouse 50 to 100

The Bottom Line: Performance Is an Investment, Not a Cost

This site did not reach Lighthouse 100/100/100 through one magical optimization — it was a series of small steps, each with a low cost, that accumulated into significant results.

This article covers nine concrete things I did on this site, each with before/after data.

---

1. Image Format: PNG → WebP

The highest ROI optimization. Converting all images:

Image	PNG	WebP	Reduction
OG default	154 KB	10 KB	93%
Logo	172 KB	14 KB	92%
WeChat QR	156 KB	30 KB	81%
Apple icon	32 KB	4.5 KB	86%

Total: 514 KB → 58 KB, an 89% reduction. WebP is natively supported in all modern browsers.

If you do only one thing, do this.

---

2. Build Analysis

Check what goes into the build output:

dist/
  _astro/
    index.12345.js    87 KB
    style.67890.css   23 KB

87 KB of JS for a content site is too much. Fixes:

• Dynamic imports for page-specific components
• Inline SVG icons (no icon library)
• Remove unused CSS (Tailwind purge should be verified)

Results: JS → 0 KB (homepage needs no JS), CSS → 12 KB.

---

3. Zero JavaScript by Default

This site is built with Astro. The default behavior is “ship zero JS to the client.” Astro renders all pages to static HTML at build time — the browser sees the complete content without executing any JavaScript.

Benefits:

• LCP 1.7s
• TBT 0ms (no JS to execute)
• CLS 0 (all elements have explicit dimensions in HTML)

For content-focused sites, choosing a zero-JS-default framework is the most effective optimization.

---

4. Font Loading

Using Inter font with font-display: swap:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
  font-weight: 400 600;
}

The browser renders text with the system font first, then swaps to the web font when it loads. Users see a brief FOUT (flash of unstyled text) instead of a FOIT (flash of invisible text).

---

5. CSS Strategy

Tailwind’s CSS file size grows with your template count. To keep it small:

• Use only utility classes, minimal custom CSS
• Verify Tailwind purge includes all template files
• Separate global styles from component styles

Result: 12 KB CSS, cached after first load.

---

6. Preload Critical Resources

Use <link rel="preload"> for above-the-fold resources:

<link rel="preload" href="/logo-512.webp" as="image" />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />

Non-critical images use loading="lazy" for deferred loading.

---

7. Minimize External Dependencies

This site’s dependency list:

astro, @astrojs/sitemap, tailwindcss

Three packages. No UI library, no icon library, no animation library. Icons are inline SVG in Astro components.

---

8. Caching Strategy

# Fonts and images: cache 30 days
location ~* \.(webp|png|svg|woff2)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}
# HTML: no cache
location ~* \.html$ {
    expires -1;
}

---

9. Continuous Monitoring

Performance is not a one-time fix. Practice:

• Run Lighthouse after every build (via lighthouse-ci)
• Set a threshold alert: fail if Performance < 95
• Check Core Web Vitals monthly in Google Search Console

---

Summary

Optimization	Effect	Effort
WebP images	89% size reduction	1 hour
Build analysis	JS 87KB → 0KB	2 hours
Zero-JS framework	LCP 1.7s, TBT 0ms	Selection phase
Font loading	Eliminate FOIT	10 min
CSS strategy	23KB → 12KB	30 min
Preload	LCP -200ms	10 min
Reduce deps	Build time halved	Ongoing
Caching	Repeat visits < 1s	30 min
Monitoring	Prevent regression	One-time setup

The goal of performance optimization is not a perfect score — it is the maximum user experience improvement per unit of effort. Image format conversion alone: 1 hour of work for 89% size reduction, far better ROI than spending a week optimizing 0.1s of LCP.

Need frontend performance optimization or website development? Contact us — tell us your tech stack and performance bottlenecks, feasibility within 24 hours.

Related reading

• Astro vs Next.js for Static Sites — how framework choice affects your performance baseline
• GEO in Practice: Making Your Website Discoverable by AI Assistants — performance optimization is part of GEO infrastructure