Performance on Commentary of Takao

Herramientas de monitoreo de rendimiento web 2026

Wed, 08 Jul 2026 10:00:00 +0900

El monitoreo de rendimiento web (RUM) captura datos reales de usuarios. Combinado con laboratorio (Lighthouse), da una visión completa del rendimiento.

RUM (Real User Monitoring)

Mide usuarios reales. Captura Core Web Vitals (LCP, INP, CLS), TTFB, FCP, TBT. Library web-vitals para envío a Analytics.

Herramientas

CrUX (Chrome UX Report): datos de campo agregados. Lighthouse: laboratorio. PageSpeed Insights: combina ambos. WebPageTest: análisis detallado.

Monitoreo continuo

Alertas cuando las métricas superan umbrales. Dashboard con tendencias. Presupuesto de rendimiento en CI. Regresión = build fallido.

CSS Containment: Aislamiento de renderizado para rendimiento

Mon, 15 Jun 2026 00:00:00 +0900

La propiedad CSS contain permite aislar subárboles del DOM para que el navegador pueda optimizar el renderizado independientemente del resto de la página.

Valores de contain

layout: el layout interno no afecta al exterior. style: los estilos no se escapan. paint: el elemento pinta dentro de sus bounds. size: el elemento necesita dimensiones explícitas.

content-visibility

content-visibility: auto combina containment con lazy rendering. Los elementos fuera de pantalla no se renderizan hasta que se acercan al viewport. Mejora drásticamente LCP en páginas largas.

DNS-prefetch y Preconnect: Optimización de conexiones de red

Wed, 15 Apr 2026 00:00:00 +0900

DNS-prefetch y preconnect reducen la latencia de conexiones a orígenes externos resolviendo DNS y estableciendo conexiones TCP/SSL antes de que se necesiten.

DNS-prefetch

Resuelve DNS de dominios externos antes de que el navegador los solicite. Útil para recursos en CDNs, APIs y fuentes.

Preconnect

Además de DNS, establece la conexión TCP y el handshake TLS. Más costoso pero más efectivo. Usar solo para los orígenes más críticos (3-4 máximo).

Implementación

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Cuándo usar cuál

DNS-prefetch: recursos de terceros que no son críticos. Preconnect: orígenes que se usan en los primeros segundos de carga. Preconnect sin crossorigin puede filtrar datos.

Optimización de carga de fuentes web

Sun, 15 Mar 2026 00:00:00 +0900

Las fuentes web pueden causar FOIT (Flash of Invisible Text) o FOUT (Flash of Unstyled Text). Optimizar su carga mejora LCP y la experiencia de lectura.

font-display

font-display: swap: muestra texto con fuente del sistema mientras carga. font-display: optional: no descarga si la red es lenta. font-display: block: período de bloqueo corto.

Subset de fuentes

Incluye solo los caracteres necesarios (latino básico, no todos los glifos). Herramientas: glyphhanger, fonttools. Reduce drásticamente el tamaño de archivos.

Optimizaciones del Critical Rendering Path

Sat, 20 Dec 2025 00:00:00 +0900

El Critical Rendering Path (CRP) es la secuencia de pasos que el navegador sigue para renderizar la página inicial. Optimizarlo mejora LCP y First Paint.

Bloqueo de renderizado

CSS bloquea el renderizado. JavaScript bloquea el parsing de HTML. Reduce el CSS crítico e inlinealo. Difiere JS no crítico con defer o async.

CSS crítico

Extrae el CSS necesario para el contenido above-the-fold. Inlinealo en <head>. Carga el resto asíncronamente. Herramientas: Critical, Penthouse.

Optimizaciones con requestIdleCallback

Fri, 25 Jul 2025 00:00:00 +0900

requestIdleCallback programa tareas no urgentes para cuando el navegador está inactivo. Mejora la capacidad de respuesta de la página.

Cómo funciona

El navegador ejecuta callbacks en los tiempos muertos entre frames. requestIdleCallback(callback, { timeout: 2000 }). IdleDeadline.timeRemaining() indica el tiempo disponible.

Casos de uso

Análisis (analytics), logging, precarga de datos no críticos, cleanups, procesamiento diferido, renderizado de contenido secundario.

Alternativas

setTimeout con 0: menos eficiente. Scheduler.postTask (experimental) con prioridades. requestAnimationFrame para animaciones. Elige según la urgencia.

Lazy loading de iframes para rendimiento web

Sun, 20 Jul 2025 00:00:00 +0900

Los iframes cargan documentos completos (HTML, CSS, JS) que pueden pesar varios MB. El lazy loading nativo y técnicas avanzadas mejoran el rendimiento.

loading=lazy nativo

<iframe loading="lazy" src="..."> difiere la carga hasta que el iframe está cerca del viewport. Soporte universal en navegadores modernos.

Intersection Observer

Carga el iframe solo cuando es visible. Control granular: margen de precarga, umbral de visibilidad. Ideal para integraciones complejas.

Alternativas a iframes

Embed con JavaScript ligero (widget API). Web Components. Contenido precargado y mostrado bajo demanda. Prefiere APIs sobre iframes.

Optimización de imágenes para rendimiento web

Tue, 15 Jul 2025 00:00:00 +0900

Las imágenes son el recurso más pesado y común en la web. Optimizarlas correctamente mejora LCP, CLS y la experiencia general.

Formatos modernos

AVIF: mejor compresión pero codificación lenta. WebP: equilibrio calidad/velocidad. JPEG XL: prometedor pero soporte limitado. Proporciona múltiples formatos con <picture>.

Carga responsive

srcset con diferentes tamaños. sizes para indicar el espacio que ocupa la imagen. El navegador selecciona la imagen óptima.

Lazy loading

loading="lazy" nativo para imágenes fuera del viewport. fetchpriority="high" para la LCP image. Intersection Observer para control granular.

INP: Interaction to Next Paint - La nueva métrica de interactividad

Sat, 15 Mar 2025 00:00:00 +0900

Interaction to Next Paint (INP) reemplaza First Input Delay (FID) como métrica de interactividad en Core Web Vitals. Mide la latencia de todas las interacciones, no solo la primera.

Cómo se mide INP

Registra el tiempo desde que el usuario interactúa (click, tap, teclado) hasta el siguiente frame pintado. Considera las interacciones más lentas. Objetivo: < 200ms (bueno), < 500ms (mejorable).

Causas de INP alto

JavaScript síncrono pesado, re-renderizados grandes sin optimizar, tareas largas en el hilo principal (> 50ms), listeners complejos en eventos frecuentes.

Estrategias de caché en CDN

Mon, 30 Dec 2024 00:00:00 +0900

Las CDN almacenan contenido en servidores edge cercanos al usuario. Las estrategias de caché determinan qué, cuándo y cómo se almacena.

Cache-Control

public, max-age=31536000, immutable para recursos versionados. no-cache para validar con el origen. no-store para datos sensibles.

Invalidación de caché

Por URL (nuevo hash en nombre de archivo). Por purga (API de CDN). Por TTL (cacheo por tiempo). Por tags (purga por etiqueta).

Estrategias híbridas

Assets estáticos: caché larga con versionado. HTML: TTL corto o sin caché. APIs: caché por URL con stale-while-revalidate.

Rendimiento móvil: Optimización para dispositivos con recursos limitados

Thu, 26 Dec 2024 00:00:00 +0900

Los dispositivos móviles tienen CPUs más lentas, menos memoria y redes más lentas. La optimización móvil requiere estrategias específicas.

Redes lentas

Minimiza el peso total de la página (< 1MB ideal). Usa la API Network Information para detectar conexiones lentas. Prioriza contenido crítico con lazy loading para el resto.

Memoria limitada

Evita fugas de memoria con correcta limpieza de event listeners y observadores. Libera referencias a grandes buffers. Usa performance.memory para monitoreo.

Scripts de terceros: Impacto en rendimiento y privacidad

Tue, 19 Nov 2024 00:00:00 +0900

Los scripts de terceros (analytics, ads, widgets, chatbots) afectan el rendimiento y la privacidad. Gestionarlos correctamente es esencial para Core Web Vitals.

Impacto en rendimiento

Los scripts de terceros bloquean el renderizado, añaden requests, y ejecutan código no optimizado. Pueden añadir segundos al tiempo de carga.

Carga diferida

async o defer para scripts no críticos. Carga bajo demanda (interacción del usuario). Posterga analytics con requestIdleCallback.

Privacidad

Los scripts de terceros pueden rastrear usuarios. Consent Mode (GDPR). Alternativas: Cloudflare Zaraz, Plausible, Fathom (sin cookies).

Optimización del tamaño del bundle en aplicaciones web

Tue, 22 Oct 2024 00:00:00 +0900

Reducir el tamaño del bundle mejora los tiempos de carga y la experiencia del usuario. Las técnicas van desde análisis hasta code splitting y tree shaking.

Análisis del bundle

Usa vite-bundle-visualizer o webpack-bundle-analyzer para identificar módulos grandes. Busca bibliotecas duplicadas, importaciones completas de lo que solo necesita partes, y dependencias sobredimensionadas.

Tree Shaking

Asegura imports específicos en lugar de namespace imports: import { map } from 'lodash-es' en vez de import _ from 'lodash'. Usa librerías tree-shakeable (ESM).

Optimización de imágenes en 2024: Formatos, carga y mejores prácticas

Tue, 02 Jul 2024 00:00:00 +0900

Las imágenes son el recurso más pesado en la mayoría de sitios web. Optimizarlas mejora drásticamente LCP y la experiencia general.

Formatos modernos

WebP: soporte universal, compresión 30% mejor que JPEG. AVIF: hasta 50% mejor que JPEG, pero mayor coste de codificación. JPEG XL: prometedor pero soporte limitado.

Imágenes responsive

<picture> con <source> para formatos múltiples. srcset y sizes para diferentes resoluciones. El navegador selecciona la imagen óptima según la pantalla.

Core Web Vitals: Métricas esenciales de rendimiento web

Mon, 15 Jan 2024 00:00:00 +0900

Core Web Vitals son tres métricas que Google usa para evaluar la experiencia de usuario. Impactan directamente en SEO y ranking de búsqueda.

LCP (Largest Contentful Paint)

Mide el tiempo de renderizado del elemento visible más grande. Objetivo: menos de 2.5s. Estrategias: optimizar imágenes, precargar recursos críticos, minimizar bloqueo de renderizado.

INP (Interaction to Next Paint)

Reemplaza FID como métrica de interactividad. Mide la latencia desde la interacción del usuario hasta el siguiente pintado. Objetivo: menos de 200ms.