¿Qué métodos puedes usar para acelerar la carga de un sitio web?

Minimización y agrupación de archivos CSS y JavaScript. Compresión de imágenes y uso de formatos modernos como WebP. Uso de carga diferida (lazy loading) para imágenes y videos. Caché de recursos en el lado del cliente y del servidor. Compresión GZIP para recursos de texto. Minimización de solicitudes HTTP. Uso de CDN (Red de Distribución de Contenido). Optimización del camino crítico de renderizado. Eliminación de código no utilizado. Uso de Service Workers para acceso sin conexión y caché.

// Ejemplo de carga diferida de una 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;
      observer.unobserve(img);
    }
  });
});

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

Comparación de formatos de imagen:

Formato	Uso típico	Características
JPEG	Fotografías	Compresión con pérdida, amplio rango de colores
PNG	Gráficos con transparencia, logotipos	Compresión sin pérdida, soporte para transparencia
GIF	Imágenes animadas	Compresión sin pérdida, soporte para animación
WebP	Fotografías y gráficos	Compresión más eficiente (con y sin pérdida), soporte para transparencia y animación

/* Ejemplo de agrupación y minimización de CSS */
body {
  font-family: sans-serif;
  /* font-size: 16px; */ /* Código no utilizado eliminado */
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

# Ejemplo de compresión GZIP en Nginx
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;