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.

React Compiler: Di adiós a la memoización manual

Sat, 10 Jan 2026 00:00:00 +0900

Introducción

El React Compiler (antes React Forget) es una herramienta de compilación que memoiza automáticamente componentes, hooks y valores de React analizando dependencias reactivas en tiempo de compilación.

El problema de la memoización manual

useMemo, useCallback, React.memo son verbosos, propensos a errores y fáciles de olvidar. Un useMemo faltante causa re-renderizados innecesarios; un array de dependencias incorrecto causa closures obsoletas.

Cómo funciona

Detección de valores reactivos (AST). 2. Construcción de grafo de dependencias. 3. Generación de código optimizado con caché integrada.

Lo que puedes eliminar

Con el React Compiler activado ya no necesitas: useMemo(), useCallback(), React.memo(), ni arrays de dependencias manuales.

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.

Previniendo el Cumulative Layout Shift con CSS aspect-ratio

Wed, 10 Dec 2025 00:00:00 +0900

Entendiendo Cumulative Layout Shift

CLS es una métrica de Core Web Vitals que mide la estabilidad visual. Un CLS alto daña la experiencia de usuario y el SEO. La causa principal son elementos multimedia que cargan sin espacio reservado.

Cómo funciona aspect-ratio

aspect-ratio declara la proporción ancho/alto de un elemento. El navegador reserva espacio, evitando saltos de layout.

.responsive-video { aspect-ratio: 16 / 9; width: 100%; height: auto; }

Uso con imágenes

Reemplaza el viejo truco de padding-bottom. Combina con max-width y object-fit para resultados óptimos.

Caché de build en Docker: Acelerar compilaciones

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

Docker aprovecha la caché de capas para acelerar builds. Entender el orden de las capas y la invalidación de caché es clave para builds rápidos.

Orden de capas

Coloca las capas que cambian con menos frecuencia al inicio: dependencias del sistema, luego dependencias de la aplicación, luego código fuente.

COPY vs ADD

COPY invalida la caché si el contenido del archivo fuente cambia. Usa .dockerignore para excluir archivos innecesarios (node_modules, .git).

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.

useMemo y useCallback: Optimización de rendimiento en React

Fri, 20 Jun 2025 00:00:00 +0900

useMemo memoiza valores calculados, useCallback memoiza funciones. Ambos evitan trabajo innecesario en re-renderizados.

useMemo

Solo recalcula el valor cuando cambian sus dependencias. Útil para cálculos costosos o para mantener referencias estables entre renderizados.

const sorted = useMemo(() => items.sort(), [items]);

useCallback

Devuelve la misma función a menos que cambien las dependencias. Esencial para pasar callbacks a componentes hijos memoizados.

const handleClick = useCallback(() => doSomething(id), [id]);

Cuándo usarlos

No optimices prematuramente. Solo usa estos hooks cuando perfiles muestren un problema real. Con el React Compiler, estos hooks serán innecesarios.

Indexación de bases de datos: Fundamentos para desarrolladores

Sun, 25 May 2025 00:00:00 +0900

Los índices de base de datos aceleran las consultas a costa de espacio y rendimiento de escritura. Entenderlos es esencial para aplicaciones escalables.

Cómo funcionan

Estructura de datos (B-tree, Hash, GiST) que mapea valores a ubicaciones. Sin índice: full table scan (O(n)). Con índice: búsqueda logarítmica (O(log n)).

Tipos de índices

Índice primario (clave primaria). Índice único (valores únicos). Índice compuesto (múltiples columnas). Índice parcial (WHERE). Índice de texto completo.

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.

Rendimiento en Node.js: Optimización y profiling

Wed, 18 Dec 2024 00:00:00 +0900

Node.js puede manejar alto rendimiento si se optimizan correctamente el bucle de eventos, la memoria y las operaciones asíncronas.

Bucle de eventos

No bloquees el event loop con operaciones síncronas pesadas. Usa setImmediate(), nextTick() y Worker Threads para descargar trabajo.

Profiling

--inspect + Chrome DevTools para CPU profiling. --prof para logs de V8. clinic.js (Doctor, Bubbleprof, Flame) para diagnóstico visual.

Gestión de memoria

Evita fugas con correcta limpieza de listeners y referencias. Usa heapdump o v8.writeHeapSnapshot(). Monitorea con process.memoryUsage().

React Concurrent: Guía de renderizado concurrente

Fri, 06 Dec 2024 00:00:00 +0900

El renderizado concurrente de React permite que React interrumpa el trabajo de renderizado para manejar eventos de mayor prioridad. Con React 18+, startTransition y useDeferredValue permiten actualizaciones no urgentes sin bloquear la UI.

startTransition

Marca una actualización de estado como transición. React puede interrumpirla para manejar eventos urgentes como entrada de teclado.

startTransition(() => { setSearchQuery(input); });

useDeferredValue

Aplaza un valor para que React pueda mostrar contenido antiguo mientras carga el nuevo. Útil para búsquedas en listas grandes.

WebAssembly (WASM): Aplicaciones nativas en el navegador

Sat, 30 Nov 2024 00:00:00 +0900

WebAssembly (WASM) ejecuta código compilado (C, C++, Rust, Go) en el navegador a velocidad casi nativa. Abre nuevas posibilidades para aplicaciones web.

Rendimiento

WASM es 10-40% más lento que código nativo pero mucho más rápido que JavaScript para cálculos intensivos. Compilado a binario, parseado en microsegundos.

Ecosistema

Rust + wasm-pack: el más popular. C/C++ con Emscripten. Go, Zig, Kotlin también compilan a WASM. WASI para WASM fuera del navegador.

Casos de uso

Procesamiento de imagen/video, juegos, simulaciones, compiladores, ofimática, cifrado. Figma, AutoCAD, Google Earth usan WASM.

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.

Worker Threads en Node.js: Paralelismo real

Tue, 23 Apr 2024 00:00:00 +0900

Worker Threads permite ejecutar JavaScript en múltiples hilos, descargando tareas CPU-intensive del event loop principal.

Cuándo usar workers

Cálculos matemáticos pesados, procesamiento de imágenes, parsing de archivos grandes, compresión, cifrado. No para operaciones I/O (ya son asíncronas).

API básica

const { Worker } = require('worker_threads');
const worker = new Worker('./worker.js', { workerData: data });
worker.on('message', result => {});

Comunicación

postMessage: copia estructurada (serializable). SharedArrayBuffer: memoria compartida. parentPort.postMessage desde el worker. Atomics para sincronización.

Pool de workers

Crear workers por tarea tiene overhead. Usa workerpool o piscina para pooling. Mantén un número fijo de workers (CPU cores - 1).

Optimización de imágenes con Next.js Image

Tue, 26 Mar 2024 00:00:00 +0900

Next.js Image component optimiza imágenes automáticamente: formatos modernos (WebP, AVIF), lazy loading, y dimensiones responsive.

next/image

import Image from 'next/image';
<Image src="/hero.jpg" width={1200} height={600} alt="Hero" />

Optimización en tiempo de build o bajo demanda (servidor de optimización).

Formatos y calidad

Next.js sirve WebP o AVIF si el navegador lo soporta. quality (1-100, default 75). sizes para imágenes responsive. priority para LCP.

Remote patterns

Configura remotePatterns en next.config.js para permitir imágenes de dominios externos. Protege contra abusos del optimizador.

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.