Como otimiza o desempenho do site?

• Otimização de imagens:
  • Uso de formatos modernos como WebP.
  • Compressão de imagens sem perda de qualidade.
  • Lazy loading para imagens fora da vista.
  • Imagens adaptativas usando <picture> ou srcset.
• Minificação e compressão de recursos:
  • Minificação de HTML, CSS e JavaScript.
  • Compressão Gzip ou Brotli para recursos de texto.
• Cache:
  • Cache do navegador usando cabeçalhos HTTP (Cache-Control, Expires).
  • Cache no lado do servidor.
  • Uso de Service Workers para acesso offline e cache avançado.
• Otimização do caminho crítico de renderização:
  • Carregamento diferido de CSS e JavaScript não críticos.
  • Carregamento assíncrono de scripts (async, defer).
  • CSS crítico inline.
• Redução do número de requisições HTTP:
  • Agrupamento de arquivos CSS e JavaScript (com precaução em HTTP/2).
  • Uso de sprites para ícones pequenos.
  • Injeção de recursos pequenos (como fontes ou SVGs) no CSS usando data URIs.
• Otimização de fontes:
  • Uso de formatos modernos de fontes (WOFF2).
  • Colocação de fontes localmente.
  • Pré-carregamento de fontes (preload).
  • Uso de font-display para gerir a exibição de fontes durante o carregamento.
• Desempenho de JavaScript:
  • Otimização de algoritmos e estruturas de dados.
  • Redução de operações DOM.
  • Uso de delegação de eventos.
  • Divisão de código (code splitting).
• Otimização do render e pintura:
  • Evitar estilos CSS caros.
  • Uso de will-change.
  • Otimização de animações e transições.
• Uso de CDN (Content Delivery Network).
• Otimização do lado do servidor:
  • Resposta rápida do servidor.
  • Otimização de consultas à base de dados.

// Exemplo de carregamento diferido de 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;
      delete img.dataset.src;
      observer.unobserve(img);
    }
  });
});

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

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

/* Exemplo de uso de font-display */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Permite ao navegador usar uma fonte de reserva enquanto a principal carrega */
}