Optimiza los Core Web Vitals (LCP, INP, CLS) para mejorar la experiencia de página y el posicionamiento en búsquedas.
en todo el repo
0–100, la ruta de este skill
último commit aquí
últimos 90 días
57 tok en reposo
19 KB
Funciona con cualquier agente que lea SKILL.md
npx -y skills add addyosmani/web-quality-skills --skill core-web-vitals --agent claude-codeSe instala solo en este repositorio.
Este skill makes network requests.
Di cualquiera de estas frases y el agente debería cargar este skill.
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 rendering
2. Render-blocking resources
<!-- ❌ 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
<!-- ❌ 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
// ❌ 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.
<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.- [ ] 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)
// 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
// ❌ 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
// ❌ 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
// ❌ 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)
// ❌ 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>
);
}
- [ ] 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
// 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
<!-- ❌ 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
<!-- ❌ 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
// ❌ 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
/* ❌ 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
/* ❌ 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);
}
- [ ] 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
// 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>import {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);
// 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
// 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
<!-- 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' }" />
Reproducido de addyosmani/web-quality-skills bajo licencia MIT. Leer esta página en markdown.
2 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.
Este repo incluye 6 skills. Si instalas uno, normalmente ya tienes los demás.
Auditoría de calidad web completa que cubre rendimiento, accesibilidad, SEO y buenas prácticas, con más de 150 verificaciones basadas en Lighthouse.
Audita y mejora la accesibilidad web siguiendo las pautas WCAG 2.2. Úsalo ante 'improve accessibility', 'a11y audit', 'WCAG compliance', 'screen reader support', 'keyboard navigation' o 'make accessible'.
Optimiza la visibilidad y el posicionamiento en buscadores. Úsalo para 'improve SEO', 'fix meta tags', 'add structured data' o 'sitemap optimization'.
Optimiza el rendimiento web para lograr cargas más rápidas y mejor experiencia de usuario, basado en auditorías de rendimiento de Lighthouse.
Aplica prácticas modernas de desarrollo web para seguridad, compatibilidad y calidad de código, siguiendo las auditorías de Lighthouse best practices.
Úsalo al completar tareas, implementar features mayores, o antes de mergear, para verificar que el trabajo cumple los requisitos.
Úsalo antes de afirmar que un trabajo está completo, corregido o pasando, antes de hacer commit o crear PRs: exige ejecutar comandos de verificación y confirmar la salida antes de cualquier afirmación de éxito.
Testea contratos inteligentes de forma exhaustiva con Hardhat y Foundry: tests unitarios, de integración y forking de mainnet.
