← Voltar aos diagramas

Web Performance & Core Web Vitals

Core Web Vitals, bundle optimization, caching, rendering patterns e monitoramento de performance

Core Web Vitals (Google — impacta ranking SEO)🖼️LCP< 2.5s👆INP< 200ms📏CLS< 0.1Good: verde | Needs improvement: amarelo | Poor: vermelhoMedido no p75 de usuários reais (CrUX — Chrome UX Report)LCP — Largest Contentful PaintElementos candidatos:<img>, <video poster>, background-imageBlock-level text elements (h1, p)Otimizações:preload hero image, AVIF/WebP, CDNSSR/SSG, critical CSS, fetchpriority=high< 2.5s GOODINP — Interaction to Next PaintComposição do INP:Input delay + Processing + PresentationLong tasks (> 50ms) bloqueiam respostaOtimizações:Break long tasks (yield to main thread)requestAnimationFrame, Web Workers< 200ms GOODCLS — Cumulative Layout ShiftCausas comuns:Imagens sem width/heightAds/iframes injetados dinamicamenteWeb fonts (FOUT/FOIT)Fixes:aspect-ratio, font-display:optionalPlaceholder/skeleton antes de carregar< 0.1 GOODBundle Optimization🌳Tree ShakingDead code elimination✂️Code SplitDynamic import()🗜️MinifyTerser / esbuild📊AnalyzeBundle visualizerINITIAL < 100KBCaching Strategy📦Cache-ControlImmutable assets⚙️Service WorkerOffline + Cache🔄SWR PatternStale-While-Rev🏷️ETag304 Not ModifiedRuntime Performance🐢Long Tasks> 50ms → jank👷Web WorkersOff main thread🎬rAF / rICFrame scheduling📜VirtualizationWindowing60 FPS = 16.6ms/FRAMERendering Patterns📱CSRClient-Side🖥️SSRServer-Side📄SSGStatic Gen🔄ISRIncremental🌊StreamingRSC + SuspenseResource HintspreloadASAP downloadprefetchNext pagepreconnectDNS+TCP+TLSdns-prefetchDNS onlyfetchpriorityhigh/low/autoPerformance Monitoring📊RUMweb-vitals lib🔦LighthouseSynthetic📈CrUXChrome UX Report⚙️Perf APIPerformanceObserver

Core Web Vitals: 3 métricas do Google que impactam SEO e UX — LCP, INP, CLS

0/9