Optimization on Commentary of Takao

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.