Optimización de Performance Web

Usa la librería web-vitals de JavaScript para recolectar métricas de usuarios reales: import { onLCP, onINP, onCLS, onTTFB, onFCP } from 'web-vitals';\nonLCP((metric) => sendToAnalytics('LCP', metric.value));\nonINP((metric) => sendToAnalytics('INP', metric.value));\nonCLS((metric) => sendToAnalytics('CLS', metric.value));. Envía data a tu backend de analytics: function sendToAnalytics(name, value) {\n navigator.sendBeacon('/api/vitals', JSON.stringify({ name, value, page: location.pathname }));\n}. Usa el reporte de Core Web Vitals de Google Search Console para field data en tu sitio. Configura alerts para regresiones: si LCP p75 excede 2.5s, triggera un alert. Usa Lighthouse CI en tu pipeline: lighthouse-ci --assertions.lcp=2.5 --assertions.cls=0.1 --assertions.inp=200. Recolecta métricas por page template, no solo promedios site-wide. Segmenta por device type (mobile, desktop, tablet) y connection type (4G, 3G, WiFi). Usa PerformanceObserver para custom metrics: new PerformanceObserver((list) => {\n for (const entry of list.getEntries()) {\n console.log(${entry.name}: ${entry.startTime}ms);\n }\n}).observe({ entryTypes: ['paint', 'largest-contentful-paint'] });.

Analiza tu bundle con webpack-bundle-analyzer o rollup-plugin-visualizer: import { visualizer } from 'rollup-plugin-visualizer';\nexport default {\n plugins: [visualizer({ open: true, filename: 'bundle-stats.html' })]\n};. Identifica dependencias grandes y reemplazalas con alternativas más ligeras: moment.js (280KB) → date-fns (20KB), lodash (70KB) → lodash-es con tree shaking. Usa tree shaking: import { debounce } from 'lodash-es'; en lugar de import _ from 'lodash';. Habilita gzip y brotli compression en tu server: gzip on;\ngzip_types text/css application/javascript; en nginx. Code-split por ruta: const About = lazy(() => import('./About')); para reducir el bundle inicial. Usa dynamic imports para features condicionales: if (supportsWebGL) {\n const { render3D } = await import('./3d-renderer');\n render3D();\n}. Audita paquetes de terceros: npm ls --production y remueve dependencias no usadas. Setea límites de bundle size en CI: maxSize: '150KB' para failear builds que exceden budgets. Usa la extensión import-cost de VS Code para ver tamaños de imports durante development. Considera module federation para micro-frontends para compartir dependencias across apps.

Usa font-display: swap para evitar texto invisible: @font-face {\n font-family: 'Inter';\n src: url('/fonts/inter.woff2') format('woff2');\n font-display: swap;\n}. Preload fonts críticos: <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>. Subset fonts para incluir solo caracteres usados: pyftsubset inter.ttf --text="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789" --output-file=inter-subset.woff2. Usa variable fonts para reducir file count: un variable font file reemplaza múltiples weight files. Self-host fonts en lugar de usar Google Fonts CDN para evitar overhead de third-party connection. Usa size-adjust en @font-face para matchear métricas de fallback font: @font-face {\n font-family: 'Inter-fallback';\n src: local('Arial');\n size-adjust: 100%;\n}. Monitorea font loading: document.fonts.ready.then(() => {\n console.log('All fonts loaded');\n});. Usa unicode-range para splitear fonts por script: @font-face {\n unicode-range: U+0000-00FF;\n src: url('/fonts/inter-latin.woff2');\n}.

Usa formatos modernos: WebP (30% más pequeño que JPEG) y AVIF (50% más pequeño que JPEG). Sirve imágenes responsive con srcset: <img\n src="hero-800.webp"\n srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"\n sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"\n alt="Hero"\n fetchpriority="high"\n>. Usa <picture> para format negotiation: <picture>\n <source type="image/avif" srcset="hero.avif">\n <source type="image/webp" srcset="hero.webp">\n <img src="hero.jpg" alt="Hero">\n</picture>. Comprime imágenes: cwebp -q 80 input.jpg -o output.webp para lossy, cwebp -lossless input.png -o output.webp para lossless. Usa blur placeholders para imágenes above-fold: genera una versión tiny blurred (20px wide) y escalala con CSS filter: blur(20px) hasta que la imagen completa carga. Lazy-load imágenes below-fold: <img loading="lazy" src="...">. Setea width y height explícitos para prevenir CLS. Usa CDN image transformation: https://cdn.example.com/image.jpg?w=800&format=webp para servir versiones optimizadas on the fly. Evita usar imágenes para texto — usa CSS en su lugar. Usa SVG para iconos y logos: <img src="logo.svg" alt="Logo">.

Reserva espacio para imágenes, ads y embeds: <img width="800" height="400" src="..."> previene que el browser reflowee cuando la imagen carga. Usa CSS aspect-ratio: .video-container {\n aspect-ratio: 16 / 9;\n}. Evita inyectir contenido above contenido existente: banner ads deberían reservar espacio antes de cargar. Usa min-height para áreas de contenido dinámico: .comments {\n min-height: 200px;\n}. Preconnect a origins de terceros: <link rel="preconnect" href="https://cdn.example.com"> para evitar late resource discovery. Usa font-display: optional para fonts no críticos para prevenir font-swap layout shifts. Evita display: none toggling en contenido above-fold. Usa transform y opacity para animaciones en lugar de top, left, width, height — estos no triggerean layout. Setea dimensiones explícitas en iframes: <iframe width="560" height="315" src="...">. Usa content-visibility: auto con contain-intrinsic-size: .card {\n content-visibility: auto;\n contain-intrinsic-size: 200px;\n}.

INP mide responsividad a interacciones de usuario. Break long tasks: function processItems(items) {\n // Process in chunks of 50ms\n const chunk = items.slice(0, 50);\n // ... process chunk\n if (items.length > 50) {\n setTimeout(() => processItems(items.slice(50)), 0);\n }\n}. Usa requestIdleCallback para work no urgente: requestIdleCallback(() => {\n // Analytics, reporting, etc.\n});. Debounce scroll y resize handlers: const handleResize = debounce(() => {\n // Expensive layout calculation\n}, 150);\nwindow.addEventListener('resize', handleResize);. Usa scheduler.yield() cuando esté disponible: async function processQueue() {\n for (const item of queue) {\n processItem(item);\n await scheduler.yield(); // Yield to main thread\n }\n}. Evita synchronous layout reads: // Bad: forces layout\nfor (let i = 0; i < items.length; i++) {\n items[i].style.left = ${items[i].offsetLeft + 10}px;\n}\n// Good: batch reads and writes\nconst positions = items.map(item => item.offsetLeft);\nitems.forEach((item, i) => {\n item.style.left = ${positions[i] + 10}px;\n});. Usa Web Workers para CPU-intensive tasks: const worker = new Worker('compute.js');\nworker.postMessage(data);\nworker.onmessage = (e) => updateUI(e.data);. Minimiza JavaScript de terceros que bloquea el main thread. Usa requestAnimationFrame para visual updates: function animate() {\n // Update DOM\n requestAnimationFrame(animate);\n}.

Usa preload para recursos críticos en la página actual: <link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>. Usa prefetch para recursos necesarios en la próxima página: <link rel="prefetch" href="/next-page.js">. Usa preconnect para establecer conexiones tempranas: <link rel="preconnect" href="https://api.example.com">. Usa dns-prefetch para optimización solo de DNS: <link rel="dns-prefetch" href="//cdn.example.com">. Usa modulepreload para JavaScript modules: <link rel="modulepreload" href="/app.js">. Prioriza con fetchpriority: <img src="hero.webp" fetchpriority="high"> para above-fold, <img src="below.webp" fetchpriority="low"> para below-fold. Evita overusar preload — cada hint consume bandwidth. Testea con Network tab en DevTools para verificar que los hints funcionan. Usa Speculation Rules API para predictive prefetching: <script type="speculationrules">\n{ "prefetch": [{ "source": "list", "urls": ["/about", "/contact"] }] }\n</script>.

Registra el Service Worker: if ('serviceWorker' in navigator) {\n navigator.serviceWorker.register('/sw.js');\n}. Cachea static assets con estrategia cache-first: const CACHE = 'static-v1';\nconst ASSETS = ['/index.html', '/styles.css', '/app.js'];\nself.addEventListener('install', (e) => {\n e.waitUntil(caches.open(CACHE).then(cache => cache.addAll(ASSETS)));\n});\nself.addEventListener('fetch', (e) => {\n e.respondWith(\n caches.match(e.request).then(response => response || fetch(e.request))\n );\n});. Usa network-first para contenido dinámico: self.addEventListener('fetch', (e) => {\n e.respondWith(\n fetch(e.request).catch(() => caches.match(e.request))\n );\n});. Usa stale-while-revalidate para API responses: self.addEventListener('fetch', (e) => {\n e.respondWith(\n caches.open('api-cache').then(cache =>\n cache.match(e.request).then(cached => {\n const fetchPromise = fetch(e.request).then(response => {\n cache.put(e.request, response.clone());\n return response;\n });\n return cached || fetchPromise;\n })\n )\n );\n});. Limpia caches viejos: self.addEventListener('activate', (e) => {\n e.waitUntil(\n caches.keys().then(keys =>\n Promise.all(keys.filter(k => k !== CACHE).map(k => caches.delete(k)))\n )\n );\n});. Usa Workbox para manejo más fácil de Service Workers: import { registerRoute } from 'workbox-routing';\nimport { CacheFirst } from 'workbox-strategies';\nregisterRoute(/\.(?:css|js)$/, new CacheFirst());.

Carga scripts de terceros asíncronamente: <script src="https://analytics.example.com/js" async></script>. Defer scripts no críticos: <script src="https://widget.example.com/js" defer></script>. Usa loading="lazy" para iframes: <iframe src="https://widget.example.com" loading="lazy">. Self-host scripts de terceros cuando sea posible para evitar DNS lookups adicionales. Usa la librería Partytown para correr scripts de terceros en un Web Worker: <script type="text/partytown" src="https://analytics.example.com/js"></script>. Audita el impacto de terceros con Lighthouse: checkea el audit "Reduce third-party usage". Setea un timeout para scripts de terceros: const script = document.createElement('script');\nscript.src = 'https://widget.example.com/js';\nscript.async = true;\nsetTimeout(() => {\n if (!window.widgetLoaded) {\n script.remove(); // Remove if not loaded in 3s\n }\n}, 3000);. Usa resource hints para dominios de terceros: <link rel="preconnect" href="https://analytics.example.com">. Monitorea execution time de scripts de terceros con Performance Observer: new PerformanceObserver((list) => {\n for (const entry of list.getEntries()) {\n if (entry.name.includes('third-party.com')) {\n console.log(Third-party: ${entry.name} took ${entry.duration}ms);\n }\n }\n}).observe({ entryTypes: ['resource'] });.

Define budgets en webpack.config.js: performance: {\n hints: 'warning',\n maxAssetSize: 150000, // 150KB\n maxEntrypointSize: 200000 // 200KB\n}. Usa Lighthouse CI budgets: // lighthouserc.js\nmodule.exports = {\n ci: {\n assert: {\n assertions: {\n 'resource-summary:script:size': ['<', 150000],\n 'resource-summary:stylesheet:size': ['<', 50000],\n 'resource-summary:image:size': ['<', 250000]\n }\n }\n }\n};. Usa size-limit para library bundles: // package.json\n"size-limit": [\n { "path": "dist/index.js", "limit": "10KB" }\n]. Monitorea budgets en CI: npx size-limit failea el build si se excede. Trackea budgets over time con Bundlephobia o Bundle Analyzer. Setea budgets por ruta, no solo site-wide. Incluye scripts de terceros en budgets. Revisa budgets trimestralmente y ajusta según sea necesario.