AI Skill Report Card
Optimizing Core Web Vitals for Design
Core Web Vitals Design Optimization
Quick Start15 / 15
PERFORMANCE-DESIGN Pre-Sign-Off Checklist:
□ LCP: Hero image <500KB, WebP/AVIF, priority loading
□ CLS: All images have width/height, fonts preloaded
□ FID/INP: Animations use transform/opacity only
□ Fonts: WOFF2 format, subsetted, <50KB total
□ Images: WebP for photos, SVG for graphics
□ Lazy loading: Only below-the-fold content
Recommendation▾
Add specific file size targets and performance budgets (e.g., 'Total page weight <3MB', 'TTI <3s') to make optimization goals more concrete
Workflow15 / 15
Phase 1: LCP Optimization
- Identify largest contentful paint element (usually hero image/text)
- Optimize hero image: <500KB, appropriate format, correct dimensions
- Set
fetchpriority="high"for LCP image - Preload critical resources in HTML head
Phase 2: CLS Prevention
- Define explicit width/height for all images
- Use
font-display: swapwith preloaded fallbacks - Reserve space for dynamic content (ads, embeds)
- Test font loading on slow connections
Phase 3: FID/INP Optimization
- Limit animations to transform and opacity properties
- Use CSS containment for animated elements
- Avoid JavaScript-heavy interactions above fold
- Test touch responsiveness on mobile
Phase 4: Asset Optimization
- Subset fonts to required characters/weights
- Convert images: WebP for photos, SVG for icons
- Implement lazy loading below 800px viewport
- Compress and optimize all assets
Recommendation▾
Include a troubleshooting section with common Core Web Vitals failures and their design solutions
Examples17 / 20
Example 1: Hero Section Input: 2MB JPEG hero image, custom font, fade-in animation Output:
HTML<link rel="preload" href="hero.webp" as="image" fetchpriority="high"> <link rel="preload" href="font-subset.woff2" as="font" crossorigin> <img src="hero.webp" width="1200" height="600" alt="Hero">
- Image: 350KB WebP, explicit dimensions
- Font: Subsetted WOFF2, 25KB
- Animation: CSS transform only,
will-change: transform
Example 2: Product Gallery Input: 20 high-res product images, auto-layout grid Output:
HTML<img src="product-1.webp" width="400" height="300" loading="lazy" alt="Product">
- Images: WebP format, consistent aspect ratios
- Lazy loading: All except first 4 images
- Grid: Fixed dimensions to prevent layout shift
Recommendation▾
Add before/after performance metrics examples to show the impact of optimization decisions
Best Practices
Image Strategy:
- WebP for photos (fallback to JPEG)
- AVIF for cutting-edge performance (with WebP fallback)
- SVG for logos, icons, simple illustrations
- Define aspect ratios in CSS to prevent CLS
Font Strategy:
- Maximum 2-3 font families per site
- Subset to actual glyphs used (50-80% size reduction)
- Preload critical fonts, lazy load decorative ones
- Use system fonts as fallbacks with similar metrics
Animation Guidelines:
- GPU-accelerated properties only: transform, opacity, filter
- Use
will-changesparingly and remove after animation - 60fps target: animations under 16ms per frame
- Reduce motion for accessibility preferences
Loading Strategy:
- Above fold: Eager loading with high priority
- 800px+ below fold: Lazy loading
- Critical CSS inlined, non-critical deferred
- Progressive enhancement approach
Common Pitfalls
LCP Mistakes:
- Large hero images without optimization
- Missing fetchpriority on LCP elements
- Blocking resources delaying LCP
- Using background images for LCP content
CLS Mistakes:
- Images without dimensions causing layout jumps
- Web fonts loading without fallback metrics
- Dynamic content insertion without space reservation
- Sticky headers changing height on scroll
Performance Myths:
- "Users won't notice 100ms delays" - they do
- "Mobile users expect slower sites" - performance matters more
- "Beautiful design justifies poor performance" - it doesn't
- "We can fix performance later" - design decisions lock in constraints
Testing Oversights:
- Only testing on fast connections
- Ignoring mobile performance
- Not measuring real user metrics
- Skipping accessibility performance impact