Que abordagens de otimização de páginas web conheces?

Otimização do caminho crítico de renderização (CRP): Redução do tempo de carregamento, renderização e exibição do conteúdo "acima da dobra" através da priorização de recursos críticos (CSS, JavaScript).

Minimização de pedidos HTTP: Agrupamento e minificação de ficheiros CSS, JavaScript, uso de sprites para imagens.

Carregamento preguiçoso (Lazy Loading): Carregamento atrasado de recursos (imagens, vídeos) até que fiquem visíveis ao utilizador.

Otimização de imagens: Compressão sem perda de qualidade, uso de formatos modernos (WebP), imagens responsivas (srcset, sizes).

Caching: Uso de cache do navegador e cache do servidor para reduzir a carga e acelerar as recargas.

Uso de CDN (Content Delivery Network): Distribuição de conteúdo por servidores geograficamente dispersos para reduzir a latência.

Carregamento assíncrono e diferido de scripts: Uso de atributos async e defer para <script>.

<script src="script.js" async></script>
<script src="another-script.js" defer></script>

Otimização de fontes: Uso de font-display: swap para evitar FOUC (Flash Of Unstyled Content), carregamento apenas dos conjuntos de caracteres necessários.

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Previne texto invisível */
}

Remoção de CSS e JavaScript não utilizados: Ferramentas de análise (por exemplo, Coverage no Chrome DevTools) e empacotadores (Webpack, Parcel) ajudam a identificar e remover código não utilizado.

SSR (Renderização do lado do servidor) ou pré-renderização: Renderização parcial ou total da página no servidor para melhorar o desempenho e SEO, especialmente para SPA (Aplicações de página única).

Web Workers: Execução de tarefas JavaScript intensivas em segundo plano, sem bloquear o thread principal da interface de utilizador.

// Criação de um Web Worker
const worker = new Worker('worker.js');

// Envio de dados ao worker
worker.postMessage({ data: 'some data' });

// Processamento de mensagens do worker
worker.onmessage = (event) => {
  console.log('Recebido do worker:', event.data);
};

PWA (Progressive Web Apps): Uso de service workers para cache e acesso offline.

Análise de desempenho: Uso regular de ferramentas como Lighthouse, PageSpeed Insights, WebPageTest, aba de Performance do Chrome DevTools.