Rendimiento Web

Optimización de rendimiento, métricas y mejores prácticas

Preguntas de Entrevista sobre Rendimiento Web

Domina los conceptos de optimización de rendimiento web. Esta guía cubre métricas de rendimiento, técnicas de optimización, lazy loading, code splitting y mejores prácticas.

1. Core Web Vitals

Los Core Web Vitals de Google son métricas esenciales para medir la experiencia del usuario.

Tres Core Web Vitals:

LCP (Largest Contentful Paint): Tiempo para renderizar el elemento de contenido más grande (Meta: < 2.5s)
FID (First Input Delay): Tiempo desde la interacción del usuario hasta la respuesta del navegador (Meta: < 100ms)
CLS (Cumulative Layout Shift): Estabilidad visual, cambios de diseño inesperados (Meta: < 0.1)

2. Optimización de Imágenes

<!-- Formatos modernos con fallback -->
<picture>
  <source srcset="imagen.avif" type="image/avif">
  <source srcset="imagen.webp" type="image/webp">
  <img src="imagen.jpg" alt="Descripción" loading="lazy">
</picture>

<!-- Imágenes responsivas -->
<img 
  srcset="pequena.jpg 480w,
          mediana.jpg 800w,
          grande.jpg 1200w"
  sizes="(max-width: 480px) 100vw,
         (max-width: 800px) 50vw,
         33vw"
  src="mediana.jpg"
  alt="Imagen responsiva"
  loading="lazy"
>

3. Code Splitting y Lazy Loading

// React lazy loading
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<div>Cargando...</div>}>
      <Dashboard />
    </Suspense>
  );
}

// Dynamic imports
async function loadModule() {
  const module = await import('./heavy-module.js');
  module.doSomething();
}

Mejores Prácticas de Rendimiento

✓ Minimiza el JavaScript inicial
✓ Usa lazy loading para imágenes y componentes
✓ Implementa code splitting por rutas
✓ Optimiza imágenes (WebP, AVIF)
✓ Usa CDN para assets estáticos
✓ Implementa caching efectivo
✓ Minimiza y comprime recursos