Que métodos pode usar para acelerar o carregamento de um site web?

Minimização e agrupamento de ficheiros CSS e JavaScript. Compressão de imagens e uso de formatos modernos como WebP. Utilização de carregamento diferido (lazy loading) para imagens e vídeos. Caching de recursos no lado do cliente e do servidor. Compressão GZIP para recursos de texto. Minimização de pedidos HTTP. Utilização de CDN (Content Delivery Network). Otimização do caminho crítico de renderização. Remoção de código não utilizado. Utilização de Service Workers para acesso offline e caching.

// Exemplo de carregamento diferido de uma imagem
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);
});

Comparação de formatos de imagem:

Formato	Uso típico	Características
JPEG	Fotografias	Compressão com perdas, amplo alcance de cores
PNG	Gráficos com transparência, logótipos	Compressão sem perdas, suporte para transparência
GIF	Imagens animadas	Compressão sem perdas, suporte para animação
WebP	Fotografias e gráficos	Compressão mais eficiente (com e sem perdas), suporte para transparência e animação

/* Exemplo de agrupamento e minimização de CSS */
body {
  font-family: sans-serif;
  /* font-size: 16px; */ /* Código não utilizado eliminado */
}

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

# Exemplo de compressão GZIP no Nginx
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;