Saltar al contenido
AKOS
Todos los packs
StableRendimientocore-web-vitals

Core Web Vitals

Operationalizes Core Web Vitals — LCP, INP, CLS — as measurable, actionable targets for perceived loading speed, interactivity, and visual stability, with the specific engineering levers that move each metric.

performancelcpinpclsweb-vitalsloading

Principios

  • · CW1 — Identify the actual LCP element (usually via DevTools/field data) before optimizing blindly; different pages have different LCP elements.
  • · CW2 — Server response time (TTFB) is the first lever: fast backend responses, CDN/edge caching, and minimal redirect chains shorten the whole downstream chain.
  • · CW3 — The LCP resource (hero image, font, critical CSS) is discoverable early in the HTML (not injected late via JS) and preloaded if it's not naturally early.
  • · CW4 — Render-blocking resources (synchronous CSS/JS in <head>) are minimized; critical CSS is inlined, non-critical CSS/JS deferred.
  • · CW5 — Long tasks (>50ms of uninterrupted main-thread work) are broken up (yielding to the browser between chunks) so interactions can be processed promptly.

Patrones

  • · Long-task hunting: open DevTools Performance panel, interact with the page, look for yellow/red blocks >50ms on the main thread during/after the interaction — each is an INP suspect.
  • · CLS visual scan: load the page on a throttled connection and watch — does anything visibly jump? Late-loading ads, web fonts, and async-injected banners are the usual suspects.
  • · Dimension audit: grep for <img>/<video> tags without explicit width/height or CSS aspect-ratio — each is a CLS risk.

Riesgos

  • · Ver anti-patrones específicos del dominio en el pack.

Checklist

  • [ ] LCP element resource present in initial HTML or preloaded, not exclusively client-JS-injected. (CV1)
  • [ ] Server response time (TTFB) measured and within budget. (CV2)
  • [ ] Hero/LCP images use fetchpriority="high", never loading="lazy". (CV3)
  • [ ] Third-party scripts loaded async/defer by default. (CV6)
  • [ ] All images/video/embeds have explicit dimensions or aspect-ratio reserved. (CV7)
  • [ ] Animations use transform/opacity only, never layout-triggering properties. (CV9)

Fuentes

En la bibliografía AKOS

Este pack cita las siguientes fuentes registradas en el índice bibliográfico:

Explorar todas las fuentes →