# Core Web Vitals Performance Test
Test the page at <url> and generate a Core Web Vitals report.
Instructions


Navigate to the page:

Use mcp__chrome-devtools__new_page or mcp__chrome-devtools__navigate_page to go to <url>



Apply network throttling:

Use mcp__chrome-devtools__emulate_network with “Slow 4G” throttling to simulate real-world conditions



Run performance trace:

Use mcp__chrome-devtools__performance_start_trace with reload: true and autoStop: true
This will measure LCP, CLS, and other performance metrics



Take a screenshot:

Use mcp__chrome-devtools__take_screenshot with fullPage: true to capture the page
Save it to the reports/ folder using the filePath parameter
Name it using the pattern: screenshot-{domain}-{timestamp}.png



Test interactions (for INP):

Use mcp__chrome-devtools__take_snapshot to identify interactive elements
Click on buttons/links using mcp__chrome-devtools__click to test interaction responsiveness



Analyze results:

Review the performance trace data
Identify LCP, CLS, INP scores
Look for performance insights and warnings



Generate report:

Create a markdown file in the reports/ folder
Name it using the pattern: core-vitals-{domain}-{timestamp}.md
Include all findings, metrics, and actionable recommendations



Clean up:

Use mcp__chrome-devtools__close_page to close the browser tab after testing is complete
This ensures proper cleanup and prevents memory leaks



Report Format
The report should be concise and easy to read, including:

Test Conditions: Network throttling, URL tested
Core Web Vitals Scores: LCP, CLS, INP with brief breakdowns
Additional Performance Insights: Key findings from Chrome DevTools
Critical Problems Summary: Top issues prioritized
Optimization Opportunities: High-impact and medium-impact recommendations with estimated improvements

Keep the report focused and actionable. Avoid excessive detail or lengthy code examples.

Example Report
🔴 Core Web Vitals Report: /products Page
Test Conditions:

Network: Slow 4G throttling
URL: https://example.com/products
Test Date: 2025-01-29 10:30:00 UTC


Core Web Vitals Scores
1. LCP (Largest Contentful Paint): 3,245ms 🔴
Status: Poor (Target: < 2,500ms for “Good”)
LCP Element: Hero banner image
Breakdown:

TTFB (Time to First Byte): 850ms ⚠️
Load Delay: 1,200ms 🔴 (37% of LCP - time before image starts loading)
Load Duration: 450ms ⚠️ (actual download time)
Render Delay: 745ms ⚠️ (23% of LCP - time after download before paint)

Key Issues:

Hero image is not discoverable immediately from HTML
No preload hint for critical image
Image served at 4MB uncompressed (3000x2000px)
No modern image format (WebP/AVIF)


2. CLS (Cumulative Layout Shift): 0.25 🔴
Status: Poor (Target: < 0.1)
Major Shifts:

Hero image load: 0.15 shift (no width/height attributes)
Ad insertion: 0.08 shift (dynamic content injection)
Web font loading: 0.02 shift (FOUT)

Key Issues:

Images missing explicit dimensions
Dynamic content inserted without reserved space
Fonts loaded asynchronously causing text reflow


3. INP (Interaction to Next Paint): 580ms 🔴
Tested Interaction: “Add to Cart” button click
Status: Poor (Target: < 200ms)
Key Issues:

Heavy synchronous JavaScript execution on click (450ms)
Main thread blocked during state update
No visual feedback during processing
Long tasks preventing quick response


Additional Performance Insights
Render Blocking Resources

3 CSS files blocking render (total 245KB)
2 JavaScript bundles blocking initial paint (total 890KB)
Estimated savings: 1,200ms on LCP

Network Dependency Chain

Long chain of sequential resource requests (5 levels deep)
Hero image depends on CSS → JS → API call

Third-Party Impact

Google Analytics: 180ms execution time
Facebook Pixel: 220ms execution time


Critical Problems Summary


LCP Problem (3,245ms):

1,200ms load delay + 745ms render delay = 1,945ms of preventable delay
Image optimization and preloading are critical



CLS Problem (0.25):

Missing image dimensions causing major layout shifts
Dynamic content injection without space reservation



INP Problem (580ms):

Synchronous blocking operation prevents quick interaction response
Violates the 200ms INP threshold for good user experience




Optimization Opportunities
High Impact:

Convert hero image to WebP/AVIF and compress to < 200KB
Add fetchpriority="high" and preload hint to hero image
Add explicit width/height to all images
Use non-blocking state updates for button interactions
Estimated LCP improvement: < 1,500ms (54% faster)
Estimated CLS improvement: < 0.05 (80% better)
Estimated INP improvement: < 180ms (69% faster)

Medium Impact:

Implement code splitting for JavaScript bundles
Defer non-critical third-party scripts
Reserve space for dynamic content (ads, widgets)
Optimize font loading strategy
Enable Brotli/Gzip compression


Report generated: 2025-01-29 10:30:00 UTC

Usage
Replace &lt;url&gt; with the actual URL to test:
Test the page at http://localhost:3000/unoptimized and generate a comprehensive Core Web Vitals report.

# Optimize Code for Core Web Vitals
Read the Core Web Vitals report at <path> and implement the recommended optimizations to improve performance.
Instructions


Read the report:

Use the Read tool to load the report file at <path>
Identify all issues and recommendations
Prioritize high-impact optimizations first



Analyze the page:

Identify the files that need to be modified
Use Glob and Grep tools to find relevant code
Read the current implementation



Implement optimizations:

Start with high-impact fixes (LCP, then CLS, then INP)
Make code changes using the Edit tool
Add clear comments explaining each optimization
Follow the recommendations from the report



Common optimizations to implement:
For LCP Issues:

Convert <img> tags to Next.js Image component
Add priority={true} to hero/above-fold images
Add explicit width and height props
Set appropriate quality (e.g., 75 instead of 100)
Add responsive sizes attribute

For CLS Issues:

Add explicit dimensions to all images
Add aspect-ratio CSS or container dimensions
Reserve space for dynamic content
Optimize font loading with font-display

For INP Issues:

Replace blocking operations with async/non-blocking code
Use React’s useTransition for state updates
Add loading states for immediate user feedback
Move heavy computations to Web Workers or defer them

General Optimizations:

Add lazy loading (loading="lazy") to below-fold images
Implement code splitting where appropriate
Defer non-critical scripts
Add preload hints for critical resources



Document changes:

Create a summary document in reports/
Name it: optimization-summary-{timestamp}.md
List all files modified
Describe each change made
Include expected performance impact



Verify changes:

Ensure no syntax errors were introduced
Check that imports are correct
Verify that the code follows best practices



Optimization Guidelines

Be precise: Only modify the code that needs optimization
Add comments: Explain why each optimization was made
Follow patterns: Use existing code style and conventions
Test safety: Don’t break existing functionality
High impact first: Prioritize optimizations with the biggest performance gains

Example Usage
Read the Core Web Vitals report at reports/core-vitals-localhost-1738166400.md and implement the recommended optimizations to improve performance.

Example Optimization Summary
Core Web Vitals Optimization Summary
Date: 2025-01-29 14:30:00 UTC
Report Used: reports/core-vitals-example-1738166400.md
Page Optimized: /products

Issues Identified from Report
Based on the report analysis, the following high-priority issues were found:

LCP (3,245ms): Hero image not optimized, no preload hints
CLS (0.25): Missing image dimensions, dynamic content shifts
INP (580ms): Blocking JavaScript execution on button click


Changes Made
1. LCP Optimization - Hero Image
File: app/products/page.tsx (lines 45-52)
Issue from report:

Hero image served at 4MB uncompressed
No preload hint for critical image
Image not discoverable from HTML immediately

Changes applied:

[Specific changes based on report recommendations]
[Added necessary props/attributes]
[Modified relevant code sections]

Expected Impact: -1,200ms on LCP

2. CLS Optimization - Image Dimensions
File: app/products/page.tsx (lines 78-120)
Issue from report:

Images missing explicit dimensions causing 0.15 shift
Dynamic ad insertion causing 0.08 shift

Changes applied:

[Specific changes based on report recommendations]
[Added dimension specifications]
[Reserved space for dynamic content]

Expected Impact: -0.23 CLS (from 0.25 to 0.02)

3. INP Optimization - Button Interactions
File: app/products/page.tsx (lines 156-168)
Issue from report:

Heavy synchronous JavaScript execution (450ms)
Main thread blocked during state update

Changes applied:

[Specific changes based on report recommendations]
[Refactored blocking code]
[Added non-blocking patterns]

Expected Impact: -400ms on INP (from 580ms to ~180ms)

Files Modified

app/products/page.tsx - Optimized images and interactions
[Additional files if needed]


Expected Performance Results
Before Optimization (from report):

LCP: 3,245ms 🔴
CLS: 0.25 🔴
INP: 580ms 🔴

After Optimization (estimated):

LCP: ~2,045ms ⚠️ (37% improvement)
CLS: ~0.02 ✅ (92% improvement)
INP: ~180ms ✅ (69% improvement)

Note: Run a new performance test to verify actual improvements.

Optimization completed: 2025-01-29 14:30:00 UTC

Important Notes

Always read the entire report before making changes
Focus on high-impact optimizations first (those with largest expected improvements)
Test after each major change to ensure nothing broke
Keep the original unoptimized version for comparison
Add detailed comments to explain each optimization
If the report mentions issues that don’t apply to the current code, skip them
Don’t over-optimize - focus on the specific issues identified in the report