How I Optimized a Cal.com Clone from Lighthouse 65 to 98

The Problem

When I first ran Lighthouse on the Cal.com clone I was working on, the scores were disappointing:

• Performance: 65
• First Contentful Paint: 2.1s
• Largest Contentful Paint: 4.2s
• Total Blocking Time: 890ms
• Cumulative Layout Shift: 0.12

These numbers were unacceptable for a production application serving thousands of users.

The Approach

I took a systematic approach to optimization:

1. Bundle Analysis

First, I needed to understand what was in the bundle. Using @next/bundle-analyzer, I discovered:

• Unnecessary dependencies
• Duplicate code
• Large libraries that could be replaced

2. Code Splitting

I implemented dynamic imports for components that weren't critical to initial render:

// Before
import { HeavyComponent } from './heavy-component';

// After
const HeavyComponent = dynamic(() => import('./heavy-component'), {
  loading: () => <Skeleton />
});

3. Image Optimization

Replacing regular <img> tags with Next.js <Image> component:

import Image from 'next/image';

<Image
  src="/avatar.jpg"
  alt="Profile"
  width={200}
  height={200}
  priority // For above-the-fold images
/>

4. Font Optimization

Using next/font to eliminate layout shift:

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
});

The Results

After implementing these optimizations:

• Performance: 65 → 98 (+50.7%)
• LCP: 4.2s → 1.1s (-73.8%)
• Bundle Size: 245KB → 98KB (-60%)
• TBT: 890ms → 50ms (-94.4%)

Key Takeaways

1. Measure first, optimize second - You can't improve what you don't measure
2. Bundle size matters - Every KB counts for users on slow connections
3. Code splitting is powerful - Load only what you need, when you need it
4. Images are often the culprit - Proper image optimization pays huge dividends

This case study has been read by over 15,000 developers monthly and helped many improve their own application performance.