¿Cómo optimiza el rendimiento del sitio web?

• Optimización de imágenes:
  • Uso de formatos modernos como WebP.
  • Compresión de imágenes sin pérdida de calidad.
  • Lazy loading para imágenes fuera de la vista.
  • Imágenes adaptativas usando <picture> o srcset.
• Minificación y compresión de recursos:
  • Minificación de HTML, CSS y JavaScript.
  • Compresión Gzip o Brotli para recursos de texto.
• Caché:
  • Caché del navegador usando encabezados HTTP (Cache-Control, Expires).
  • Caché en el lado del servidor.
  • Uso de Service Workers para acceso offline y caché avanzado.
• Optimización del camino crítico de renderizado:
  • Carga diferida de CSS y JavaScript no críticos.
  • Carga asíncrona de scripts (async, defer).
  • CSS crítico en línea.
• Reducción de solicitudes HTTP:
  • Agrupación de archivos CSS y JavaScript (con precaución en HTTP/2).
  • Uso de sprites para iconos pequeños.
  • Incrustación de recursos pequeños (como fuentes o SVGs) en CSS usando data URIs.
• Optimización de fuentes:
  • Uso de formatos modernos de fuentes (WOFF2).
  • Colocación de fuentes localmente.
  • Pre-carga de fuentes (preload).
  • Uso de font-display para gestionar la visualización de fuentes durante la carga.
• Rendimiento de JavaScript:
  • Optimización de algoritmos y estructuras de datos.
  • Reducción de operaciones DOM.
  • Uso de delegación de eventos.
  • División de código (code splitting).
• Optimización del renderizado y pintura:
  • Evitar estilos CSS costosos.
  • Uso de will-change.
  • Optimización de animaciones y transiciones.
• Uso de CDN (Content Delivery Network).
• Optimización del lado del servidor:
  • Respuesta rápida del servidor.
  • Optimización de consultas a la base de datos.

// Ejemplo de carga diferida de imagen
const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      delete img.dataset.src;
      observer.unobserve(img);
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

<!-- Ejemplo de uso de async y defer para scripts -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* Ejemplo de uso de font-display */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Permite que el navegador use una fuente de reserva mientras la principal se carga */
}