Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".
| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | 72% | 0% |
| case-09 | ✗→✓ | ▲ Improved | 102% | 0% |
| case-20 | ✓→✓ | ＝ Same ✓ | 152% | 0% |
| case-02 | ✓→✓ | ＝ Same ✓ | 681% | 0% |
| case-03 | ✓→✓ | ＝ Same ✓ | 1092% | 0% |
Targeted optimization for the three Core Web Vitals metrics that affect Google Search ranking and user experience.
| Metric | Measures | Good | Needs work | Poor | |--------|----------|------|------------|------| | LCP | Loading | ≤ 2.5s | 2.5s – 4s | > 4s | | INP | Interactivity | ≤ 200ms | 200ms – 500ms | > 500ms | | CLS | Visual Stability | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
Google measures at the 75th percentile — 75% of page visits must meet "Good" thresholds.
LCP measures when the largest visible content element renders. Usually this is:
<svg> element1. Slow server response (TTFB > 800ms)
Fix: CDN, caching, optimized backend, edge rendering2. Render-blocking resources
html<!-- ❌ Blocks rendering --> <link rel="stylesheet" href="/all-styles.css"> <!-- ✅ Critical CSS inlined, rest deferred --> <style>/* Critical above-fold CSS */</style> <link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
3. Slow resource load times
html<!-- ❌ No hints, discovered late --> <img src="/hero.jpg" alt="Hero"> <!-- ✅ Preloaded with high priority --> <link rel="preload" href="/hero.webp" as="image" fetchpriority="high"> <img src="/hero.webp" alt="Hero" fetchpriority="high">
4. Client-side rendering delays
javascript// ❌ Content loads after JavaScript useEffect(() => { fetch('/api/hero-text').then(r => r.json()).then(setHeroText); }, []); // ✅ Server-side or static rendering // Use SSR, SSG, or streaming to send HTML with content export async function getServerSideProps() { const heroText = await fetchHeroText(); return { props: { heroText } }; }
5. Make navigations instant with the Speculation Rules API
For most sites, the LCP a user actually experiences is dominated by the next page they navigate to, not the one they landed on. Telling the browser to prerender likely-next pages on hover collapses that LCP to ~0ms.
html<script type="speculationrules"> { "prerender": [{ "where": { "href_matches": "/*" }, "eagerness": "moderate" }] } </script>
eagerness settings (cheapest → most aggressive): conservative (start on pointerdown), moderate (start after ~200ms hover), eager (start as soon as the link is in the viewport), immediate (start on page load). Start with moderate — it captures most navigations without prerendering pages users never visit.
Caveats:
where carefully (href_matches patterns, exclude logout/checkout) and avoid immediate outside small sites.prerenderingchange event or document.prerendering.markdown- [ ] TTFB < 800ms (use CDN, edge caching) - [ ] LCP image preloaded with fetchpriority="high" - [ ] LCP image optimized (WebP/AVIF, correct size) - [ ] Critical CSS inlined (< 14KB) - [ ] No render-blocking JavaScript in <head> - [ ] Fonts don't block text rendering (font-display: swap) - [ ] LCP element in initial HTML (not JS-rendered) - [ ] Speculation Rules added for likely-next navigations (moderate eagerness)
javascript// Find your LCP element new PerformanceObserver((list) => { const entries = list.getEntries(); const lastEntry = entries[entries.length - 1]; console.log('LCP element:', lastEntry.element); console.log('LCP time:', lastEntry.startTime); }).observe({ type: 'largest-contentful-paint', buffered: true });
INP measures responsiveness across ALL interactions (clicks, taps, key presses) during a page visit. It reports the worst interaction (at 98th percentile for high-traffic pages).
Total INP = Input Delay + Processing Time + Presentation Delay
| Phase | Target | Optimization | |-------|--------|--------------| | Input Delay | < 50ms | Reduce main thread blocking | | Processing | < 100ms | Optimize event handlers | | Presentation | < 50ms | Minimize rendering work |
1. Long tasks blocking main thread
javascript// ❌ Long synchronous task function processLargeArray(items) { items.forEach(item => expensiveOperation(item)); } // ✅ Break into chunks and yield to the scheduler. scheduler.yield() is the // recommended modern API — its continuation is queued at a boosted // priority so the rest of your work resumes ahead of unrelated tasks, // while still letting the browser handle pending input first. async function processLargeArray(items) { const CHUNK_SIZE = 100; for (let i = 0; i < items.length; i += CHUNK_SIZE) { items.slice(i, i + CHUNK_SIZE).forEach(expensiveOperation); if ('scheduler' in window && 'yield' in scheduler) { await scheduler.yield(); } else { // Fallback for browsers without scheduler.yield (Safari, older Firefox). // setTimeout(0) yields but loses priority — your continuation may run // after unrelated tasks the browser picked up in between. await new Promise(r => setTimeout(r, 0)); } } }
2. Heavy event handlers
javascript// ❌ All work in handler button.addEventListener('click', () => { // Heavy computation const result = calculateComplexThing(); // DOM updates updateUI(result); // Analytics trackEvent('click'); }); // ✅ Prioritize visual feedback, then yield before doing the heavy work button.addEventListener('click', async () => { // 1. Immediate visual feedback (cheap DOM update) button.classList.add('loading'); // 2. Yield so the browser can paint the loading state before we block if ('scheduler' in window && 'yield' in scheduler) { await scheduler.yield(); } // 3. Now do the heavy work — the user already saw the click register const result = calculateComplexThing(); updateUI(result); // 4. Lowest-priority work last, when the main thread is idle if ('requestIdleCallback' in window) { requestIdleCallback(() => trackEvent('click')); } else { setTimeout(() => trackEvent('click'), 0); } });
3. Third-party scripts
javascript// ❌ Eagerly loaded, blocks interactions <script src="https://heavy-widget.com/widget.js"></script> // ✅ Lazy loaded on interaction or visibility const loadWidget = () => { import('https://heavy-widget.com/widget.js') .then(widget => widget.init()); }; button.addEventListener('click', loadWidget, { once: true });
4. Excessive re-renders (React/Vue)
javascript// ❌ Re-renders entire tree function App() { const [count, setCount] = useState(0); return ( <div> <Counter count={count} /> <ExpensiveComponent /> {/* Re-renders on every count change */} </div> ); } // ✅ Memoized expensive components const MemoizedExpensive = React.memo(ExpensiveComponent); function App() { const [count, setCount] = useState(0); return ( <div> <Counter count={count} /> <MemoizedExpensive /> </div> ); }
markdown- [ ] No tasks > 50ms on main thread - [ ] Event handlers complete quickly (< 100ms) - [ ] Visual feedback provided immediately - [ ] Heavy work deferred with requestIdleCallback - [ ] Third-party scripts don't block interactions - [ ] Debounced input handlers where appropriate - [ ] Web Workers for CPU-intensive operations
javascript// Identify slow interactions. durationThreshold: 40 matches what the // web-vitals library uses — 16 (one frame) fires on nearly every interaction // and drowns the console; 40 surfaces interactions that are starting to feel // sluggish without spamming. new PerformanceObserver((list) => { for (const entry of list.getEntries()) { if (entry.duration > 200) { console.warn('Slow interaction:', { type: entry.name, duration: entry.duration, processingStart: entry.processingStart, processingEnd: entry.processingEnd, target: entry.target }); } } }).observe({ type: 'event', buffered: true, durationThreshold: 40 });
For field debugging across real users, prefer the web-vitals/attribution build of the web-vitals library — onINP() from that build attaches a LoAF (Long Animation Frame) breakdown identifying the longest script and the input/processing/presentation phase that ate the budget.
CLS measures unexpected layout shifts. A shift occurs when a visible element changes position between frames without user interaction.
CLS Formula: impact fraction × distance fraction
1. Images without dimensions
html<!-- ❌ Causes layout shift when loaded --> <img src="photo.jpg" alt="Photo"> <!-- ✅ Space reserved --> <img src="photo.jpg" alt="Photo" width="800" height="600"> <!-- ✅ Or use aspect-ratio --> <img src="photo.jpg" alt="Photo" style="aspect-ratio: 4/3; width: 100%;">
2. Ads, embeds, and iframes
html<!-- ❌ Unknown size until loaded --> <iframe src="https://ad-network.com/ad"></iframe> <!-- ✅ Reserve space with min-height --> <div style="min-height: 250px;"> <iframe src="https://ad-network.com/ad" height="250"></iframe> </div> <!-- ✅ Or use aspect-ratio container --> <div style="aspect-ratio: 16/9;"> <iframe src="https://youtube.com/embed/..." style="width: 100%; height: 100%;"></iframe> </div>
3. Dynamically injected content
javascript// ❌ Inserts content above viewport notifications.prepend(newNotification); // ✅ Insert below viewport or use transform const insertBelow = viewport.bottom < newNotification.top; if (insertBelow) { notifications.prepend(newNotification); } else { // Animate in without shifting newNotification.style.transform = 'translateY(-100%)'; notifications.prepend(newNotification); requestAnimationFrame(() => { newNotification.style.transform = ''; }); }
4. Web fonts causing FOUT
css/* ❌ Font swap shifts text */ @font-face { font-family: 'Custom'; src: url('custom.woff2') format('woff2'); } /* ✅ Optional font (no shift if slow) */ @font-face { font-family: 'Custom'; src: url('custom.woff2') format('woff2'); font-display: optional; } /* ✅ Or match fallback metrics */ @font-face { font-family: 'Custom'; src: url('custom.woff2') format('woff2'); font-display: swap; size-adjust: 105%; /* Match fallback size */ ascent-override: 95%; descent-override: 20%; }
5. Animations triggering layout
css/* ❌ Animates layout properties */ .animate { transition: height 0.3s, width 0.3s; } /* ✅ Use transform instead */ .animate { transition: transform 0.3s; } .animate.expanded { transform: scale(1.2); }
markdown- [ ] All images have width/height or aspect-ratio - [ ] All videos/embeds have reserved space - [ ] Ads have min-height containers - [ ] Fonts use font-display: optional or matched metrics - [ ] Dynamic content inserted below viewport - [ ] Animations use transform/opacity only - [ ] No content injected above existing content
javascript// Track layout shifts new PerformanceObserver((list) => { for (const entry of list.getEntries()) { if (!entry.hadRecentInput) { console.log('Layout shift:', entry.value); entry.sources?.forEach(source => { console.log(' Shifted element:', source.node); console.log(' Previous rect:', source.previousRect); console.log(' Current rect:', source.currentRect); }); } } }).observe({ type: 'layout-shift', buffered: true });
npx lighthouse <url>javascriptimport {onLCP, onINP, onCLS} from 'web-vitals'; function sendToAnalytics({name, value, rating}) { gtag('event', name, { event_category: 'Web Vitals', value: Math.round(name === 'CLS' ? value * 1000 : value), event_label: rating }); } onLCP(sendToAnalytics); onINP(sendToAnalytics); onCLS(sendToAnalytics);
jsx// LCP: Use next/image with priority import Image from 'next/image'; <Image src="/hero.jpg" priority fill alt="Hero" /> // INP: Use dynamic imports const HeavyComponent = dynamic(() => import('./Heavy'), { ssr: false }); // CLS: Image component handles dimensions automatically
jsx// LCP: Preload in head <link rel="preload" href="/hero.jpg" as="image" fetchpriority="high" /> // INP: Memoize and useTransition const [isPending, startTransition] = useTransition(); startTransition(() => setExpensiveState(newValue)); // CLS: Always specify dimensions in img tags
vue<!-- LCP: Use nuxt/image with preload --> <NuxtImg src="/hero.jpg" preload loading="eager" /> <!-- INP: Use async components --> <component :is="() => import('./Heavy.vue')" /> <!-- CLS: Use aspect-ratio CSS --> <img :style="{ aspectRatio: '16/9' }" />
Other measured skills in the registry, with their headline benchmark lift.