Engineering lab

Frontend Performance Lab

Interactive demos that explain Core Web Vitals, optimization techniques, and how I think about slow LCP—without fabricating production Lighthouse scores.

All metrics on this page are demo / simulated teaching aids unless a future version wires live measurement APIs.

Core Web Vitals

Demo measurements

Illustrative vitals for teaching—not claimed production Lighthouse results.

01 — LCP
1.4s
Largest Contentful Paint
When the main content finishes painting.
02 — FCP
0.9s
First Contentful Paint
When the first text or image appears.
03 — CLS
0.04
Cumulative Layout Shift
Visual stability — lower is better.
04 — INP
120ms
Interaction to Next Paint
Responsiveness to user input.

Before vs After

Demo measurements

Simulated optimization outcomes across three key metrics. Values are teaching examples, not a live audit of this site.

LCP

Largest Contentful Paint

Before

3.8s

After

1.4s

-63%

FCP

First Contentful Paint

Before

2.1s

After

0.9s

-57%

Bundle Size

Total JavaScript payload

Before

545 KB

After

354 KB

-35%