Quais são as formas de otimização para reduzir o volume de dados transmitidos entre o frontend e o servidor?

• Compressão de dados: Uso de algoritmos de compressão (gzip, Brotli) no servidor antes de enviar os dados ao cliente.

• Minificação e ofuscação: Remoção de caracteres desnecessários (espaços, quebras de linha) e renomeação de variáveis em arquivos JS, CSS, HTML durante a construção do projeto.

• Carregamento preguiçoso (Lazy Loading): Carregamento de recursos (imagens, componentes, módulos) apenas quando necessário, e não no carregamento inicial da página.

• Remoção de código não utilizado (Tree Shaking): Ferramentas de build (Webpack, Rollup) podem analisar dependências e excluir do pacote final o código não utilizado.

• Otimização de imagens:

  • Uso de formatos modernos (WebP, AVIF).
  • Compressão com ou sem perdas.
  • Imagens responsivas (<picture> ou srcset).
  • Carregamento preguiçoso de imagens (loading="lazy").

• Caching:

  • Cache no lado do navegador (cabeçalhos de cache HTTP).
  • Cache de dados API no frontend (por exemplo, usando bibliotecas de gerenciamento de estado).

• Paginação e scroll infinito: Carregamento de dados em porções, ao invés de toda a coleção de uma vez.

• GraphQL ao invés de REST: Permite ao cliente solicitar apenas os campos necessários, evitando dados redundantes.

• Formato de dados: Uso de formatos mais compactos para troca de dados, como Protocol Buffers ou MessagePack, ao invés de XML ou JSON redundante.

• Redução de requisições HTTP: Agrupamento de arquivos (CSS, JS), uso de sprites CSS.

• Renderização do lado do servidor (SSR) / Geração de sites estáticos (SSG): Reduz o volume de JS necessário para a renderização inicial, através do renderizado no servidor.

• Compressão de requisições (Request Compression): Raramente utilizado, mas possível de comprimir o corpo de requisições POST.

// Exemplo de carregamento preguiçoso de componente em React usando React.lazy e Suspense
import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Carregando...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

<!-- Exemplo de imagem responsiva -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descrição da imagem">
</picture>