How we target 95+ Lighthouse ratings on every build

Performance is not a decoration you add before launch. It is a core engineering requirement that must be budgeted and monitored from the very first line of code. When we built the YCN Labs studio site, we established strict performance thresholds: LCP under 1.5s, CLS under 0.05, and a 95+ Lighthouse performance target. Here is the exact technical breakdown of how we enforce it.

1. Getting Rid of JavaScript Bloat

The single biggest reason modern websites are slow is the excessive loading of third-party JavaScript libraries. In our Next.js App Router setup, we restricted the dependencies to React, Tailwind CSS, Lucide icons, and Framer Motion. We avoided heavy libraries for UI interactions, opting instead for pure CSS transitions and vanilla browser APIs where possible. As a result, we target a first-load JS budget of <120kB, allowing immediate parsing and rendering by browser engines.

2. Asset Budgeting and the next/image Component

Unoptimized images destroy Largest Contentful Paint (LCP) speeds. We follow strict guidelines:

• Format conversions: All raster images are served in modern WebP or AVIF formats.
• Responsive sizing: We use Next.js's <Image> component, explicitly setting sizes to avoid serving high-res desktop images to mobile screens.
• Priority loading: Hero images above the fold are flagged with the priority attribute, preloading them early in the network request queue.

3. Layout Shift Prevention (CLS Budget: <0.05)

A layout shift occurs when elements load asynchronously and push already-rendered components down. To prevent this, we reserve dimensions for dynamic content:

• All media elements have explicit width and height aspect ratios set in CSS.
• For third-party embeds (like the Cal.com scheduler iframe), we set fixed container heights and lazy-load them inside intersection observers, ensuring they do not trigger shifts during load.

4. CSS-First Optimization with Tailwind v4

Tailwind CSS v4 introduces compile-time optimizations that compile utility classes directly into a single, optimized CSS sheet. It leverages native CSS variables and avoids loading unused styles. This targets a CSS budget of <15kB gzipped (<80kB uncompressed), eliminating blocking style fetches before document render.

Conclusion

Targeting 95+ Lighthouse ratings requires discipline, not magic. By setting budgets, avoiding bloated dependencies, optimizing images, and scoping layout containers, we maintain our performance rules in service of our <1.5s LCP production budget.