¿Qué enfoques de optimización de páginas web conoces?

Optimización del camino crítico de renderizado (CRP): Reducción del tiempo de carga, renderizado y visualización del contenido "por encima de la línea" mediante la priorización de recursos críticos (CSS, JavaScript).

Minimización de solicitudes HTTP: Agrupación y minificación de archivos CSS, JavaScript, uso de sprites para imágenes.

Carga diferida (Lazy Loading): Carga retrasada de recursos (imágenes, videos) hasta que sean visibles para el usuario.

Optimización de imágenes: Compresión sin pérdida de calidad, uso de formatos modernos (WebP), imágenes responsivas (srcset, sizes).

Caché: Uso de caché del navegador y caché del servidor para reducir la carga y acelerar las recargas.

Uso de CDN (Red de entrega de contenido): Distribución del contenido en servidores distribuidos geográficamente para reducir la latencia.

Carga asíncrona y diferida de scripts: Uso de atributos async y defer para <script>.

<script src="script.js" async></script>
<script src="another-script.js" defer></script>

Optimización de fuentes: Uso de font-display: swap para prevenir FOUC (Flash Of Unstyled Content), carga solo los conjuntos de caracteres necesarios.

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Previene texto invisible */
}

Eliminación de CSS y JavaScript no utilizados: Herramientas de análisis (por ejemplo, Coverage en Chrome DevTools) y empaquetadores (Webpack, Parcel) ayudan a identificar y eliminar código no utilizado.

SSR (Renderizado del lado del servidor) o pre-renderizado: Renderizado parcial o completo de la página en el servidor para mejorar el rendimiento y SEO, especialmente para SPA (Aplicaciones de página única).

Web Workers: Ejecución de tareas JavaScript intensivas en segundo plano, sin bloquear el hilo principal de la interfaz de usuario.

// Creación de un Web Worker
const worker = new Worker('worker.js');

// Envío de datos al worker
worker.postMessage({ data: 'some data' });

// Manejo de mensajes del worker
worker.onmessage = (event) => {
  console.log('Recibido del worker:', event.data);
};

PWA (Aplicaciones web progresivas): Uso de service workers para caché y acceso sin conexión.

Análisis de rendimiento: Uso regular de herramientas como Lighthouse, PageSpeed Insights, WebPageTest, pestaña de rendimiento de Chrome DevTools.