Case Study: How We Achieved 98% Performance Score

The Challenge

Our marketing site was struggling with performance. Initial Lighthouse scores were:

• Performance: 45
• Accessibility: 78
• Best Practices: 85
• SEO: 82

We needed to improve significantly without sacrificing features.

Analysis Phase

Identifying Bottlenecks

Using Chrome DevTools, we identified several issues:

1. Large JavaScript bundles (1.2MB)
2. Unoptimized images (5MB+ total)
3. Render-blocking resources
4. No caching strategy

Core Web Vitals

Our initial Core Web Vitals:

• LCP: 4.2s (poor)
• FID: 180ms (needs improvement)
• CLS: 0.25 (poor)

Solutions Implemented

1. Image Optimization

We implemented comprehensive image optimization:

---
import { Image } from "astro:assets";
import heroImage from "../assets/hero.jpg";
---

<Image
  src={heroImage}
  alt="Hero image"
  widths={[400, 800, 1200]}
  sizes="(max-width: 800px) 100vw, 800px"
  format="webp"
  quality={80}
/>

Result: 85% reduction in image payload

2. JavaScript Optimization

We switched to Astro’s islands architecture:

<!-- Only hydrate interactive components -->
<Header client:load />

<!-- Hydrate when visible -->
<Comments client:visible />

<!-- Static by default -->
<Footer />

Result: 90% reduction in JavaScript shipped

3. Font Loading Strategy

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
  rel="stylesheet"
/>

Added font-display: swap to prevent FOIT.

4. Critical CSS

Inlined critical CSS and deferred non-critical styles:

<style>
  /* Critical above-the-fold CSS */
  .hero { /* ... */ }
</style>
<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'" />

5. Caching Strategy

Implemented aggressive caching with Vercel:

{
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

6. Layout Shift Prevention

Reserved space for dynamic content:

.image-container {
  aspect-ratio: 16 / 9;
  background: #f0f0f0;
}

.ad-slot {
  min-height: 250px;
}

Results

After optimization, our scores improved dramatically:

Metric	Before	After
Performance	45	98
Accessibility	78	100
Best Practices	85	100
SEO	82	100

Core Web Vitals

• LCP: 4.2s → 0.8s
• FID: 180ms → 12ms
• CLS: 0.25 → 0.02

Key Takeaways

1. Measure first - Use real data to guide optimizations
2. Ship less JavaScript - Question every byte
3. Optimize images - Often the biggest win
4. Cache aggressively - Returning visitors benefit
5. Prevent layout shifts - Reserve space for dynamic content

Tools We Used

• Chrome DevTools
• Lighthouse
• WebPageTest
• Bundle Analyzer
• Core Web Vitals Chrome Extension

Conclusion

Performance optimization is an iterative process. Start with the biggest issues, measure the impact, and continue improving. Your users (and search rankings) will thank you.