Glosario de Performance Web

Largest Contentful Paint: Tiempo que tarda en cargarse el elemento de contenido más grande visible en viewport. Umbral óptimo: ≤ 2.5 segundos.

Interaction to Next Paint: Mide la responsividad de la página a las interacciones del usuario. Umbral óptimo: ≤ 200 milisegundos. Reemplaza a FID.

Cumulative Layout Shift: Mide la estabilidad visual de una página. Umbral óptimo: ≤ 0.1. Componentes: Impact Fraction + Distance Fraction.

First Contentful Paint: Tiempo hasta que aparece el primer contenido visible. Umbral óptimo: ≤ 1.8 segundos. Optimización: critical CSS, remove render-blocking resources.

Time To First Byte: Tiempo entre solicitud y primer byte de respuesta. Umbral óptimo: ≤ 600 milisegundos. Optimización: CDN, server optimization, caching.

Total Blocking Time: Tiempo total que el main thread está bloqueado. Umbral óptimo: ≤ 200 milisegundos. Optimización: code splitting, remove unused JavaScript.

Velocidad de carga visual del contenido de la página. Umbral óptimo: ≤ 3.4 segundos. Herramientas: Lighthouse, WebPageTest.

Carga diferida de imágenes fuera del viewport. Implementación: loading="lazy" attribute. Beneficio: reduce initial page weight, improve LCP.

Formato de imagen moderno con compresión superior a JPEG/WebP. Status: Baseline Newly Available (Jan 2024). Fallback: progressive enhancement con WebP/JPEG.

Formato de imagen 25-30% más pequeño que JPEG. Soporte: todos los navegadores modernos. Implementación: elemento <picture> para fallbacks.

Técnicas: srcset, sizes attributes. Formatos: AVIF, WebP, JPEG, PNG. Optimización: serve appropriate sizes for device.

CSS necesario para renderizar contenido above-the-fold. Técnica: inline critical styles, defer non-critical CSS. Herramientas: Critical (npm), Lighthouse audits.

Problema: CSS blocks page rendering. Solución: media queries, critical CSS extraction. Técnica: <link rel="preload" as="style">.

Detección: Chrome DevTools Coverage tab. Optimización: remove unused styles, code splitting. Herramientas: PurgeCSS, UnCSS.

Divide JavaScript en chunks más pequeños. Beneficio: reduce main thread blocking time. Implementación: dynamic imports, webpack splitting.

Proceso: eliminate dead code from bundles. Beneficio: smaller bundle sizes. Herramientas: webpack, Rollup, esbuild.

Problema: long tasks block user interactions. Solución: break up long tasks, use web workers. Medición: TBT (Total Blocking Time).

Load critical resources early. Critical resources: fonts, LCP images, important CSS/JS. Implementación: <link rel="preload">. Beneficio: faster resource availability.

Anticipatory loading: next page resources. Implementación: <link rel="prefetch">. Use case: user likely to visit next page.

Establish connections early. Beneficio: reduce connection establishment time. Implementación: <link rel="preconnect">.

Resolve domain names early. Beneficio: faster DNS resolution. Implementación: <link rel="dns-prefetch">.

Valores: auto, block, swap, fallback, optional. Recomendado: font-display: swap. Beneficio: avoid invisible text during font load.

Flash of Unstyled Text: text shows with fallback font first. Solución: font-display: swap, font preloading.

Flash of Invisible Text: text hidden while font loads. Duración: 3 seconds (Chrome/Firefox), indefinite (Safari).

Headers: Cache-Control, ETag, Last-Modified. Estrategias: cache busting, versioning. Beneficio: avoid redundant downloads.

Back/Forward Cache: instant page loads from browser history. Requisitos: avoid unload events, minimize cache-blocking factors.

Capabilities: offline functionality, background sync. Performance: precaching, runtime caching. Implementation: Workbox library.

Content Delivery Network: serve content from geographically closer servers. Optimización: edge caching, reduced TTFB.

Auditorías: Performance, Accessibility, Best Practices, SEO. Métricas: Core Web Vitals, additional performance metrics. Disponible en: Chrome DevTools, web.dev, CLI.

Features: multi-location testing, filmstrip view. Advanced: connection throttling, custom metrics. Benefits: detailed waterfall analysis.

Source: Google's official tool. Data: real user data (CrUX) + lab data. Integration: Core Web Vitals reporting.

Chrome User Experience Report: real user metrics from Chrome users. Metrics: Core Web Vitals field data. Access: BigQuery, PageSpeed Insights API.

Static Site Generation: pre-build pages at build time. Benefits: fastest possible loading, excellent caching. Tools: Next.js, Gatsby, Nuxt.js.

Server-Side Rendering: Server generates HTML before sending to browser. Performance: SSR generally better for initial load vs CSR.

Progressive Web Apps: app-like experience, offline functionality. Performance: Service Worker caching, app shell pattern. Installation: add to home screen.

Pattern: JavaScript, APIs, Markup (pre-built). Benefits: excellent performance, scalability. Tools: Gatsby, Next.js, Nuxt.js.

Text compression algorithm. Text resources: HTML, CSS, JavaScript. Benefit: reduce transfer size by 60-80%. Implementation: server configuration.

Benefits: improved connection establishment, multiplexing. Performance: reduced latency, better mobile performance. Adoption: increasing server support.

Technique: proactively send critical resources. Caution: can hurt performance if misused. Alternative: preload headers.

Real User Monitoring: actual user experience metrics. Implementation: analytics tools, custom beacons. Benefits: field data vs lab data insights.

Process: automated testing from controlled environments. Benefits: consistent baseline measurements. Tools: WebPageTest, Lighthouse CI, Pingdom.

Metrics: page weight, load times, Core Web Vitals. Implementation: automated testing, CI/CD integration. Tools: Lighthouse CI, SpeedCurve, Calibre.