Quais fatores podem influenciar a velocidade de carregamento do conteúdo para o utilizador?

• Tamanho e quantidade de pedidos HTTP (CSS, JS, fontes, imagens).
• Parâmetros do servidor (velocidade de resposta, largura de banda).
• Qualidade da rede do utilizador (velocidade de ligação à Internet, latência).
• Parâmetros do dispositivo do utilizador (potência do processador, quantidade de memória RAM).
• Uso de cache (navegador e servidor).
• Otimização de imagens (compressão, formatos adequados, imagens adaptativas).
• Minificação e compressão de recursos (Gzip, Brotli).
• Carregamento assíncrono e execução adiada de scripts.
• CSS crítico (CSS inline para a primeira renderização).
• SSR (Renderização do lado do servidor) ou SSG (Geração de sites estáticos) em vez de CSR (Renderização do lado do cliente).
• Uso de CDN (Rede de Distribuição de Conteúdo).
• Quantidade e complexidade de scripts de terceiros (análises, widgets).
• Redireções.
• Erros no servidor ou no código que atrasam o processamento.
• Tempo até ao primeiro byte (TTFB).

// Exemplo de carregamento preguiçoso de imagens para melhorar a velocidade
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;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

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