Sobes.tech
Ajuda para Entrevistas
Recursos
Preparação para a Entrevista
Recursos
Procura de Emprego
Recursos
Jurídico
Voltar às perguntas
Middle

Que métodos de otimização de página conhece?

sobes.tech IA

Resposta da IA

  • Minificação e compressão de recursos:

    • HTML, CSS, JavaScript: Remover espaços em branco, comentários, quebras de linha, abreviar nomes de variáveis.
    • Imagens: Otimizar formatos (WebP, AVIF), compressão sem perda de qualidade, uso de imagens responsivas.

  • Uso de CDN (Content Delivery Network): Distribuir recursos estáticos a partir de servidores próximos do utilizador reduz a latência.

  • Caching do navegador: Configurar cabeçalhos HTTP adequados (Cache-Control, Expires) para cachear recursos estáticos no lado do cliente.

  • Carregamento preguiçoso (Lazy Loading): Carregar imagens, vídeos e outros recursos pesados apenas quando aparecem na vista do utilizador.

  • Carregamento assíncrono e diferido de JavaScript e CSS: Usar atributos async e defer para scripts que não bloqueiam a execução, carregar CSS fora do caminho crítico de renderização.

  • Otimização do CSS crítico: Incluir um conjunto mínimo de CSS para renderizar a primeira tela na HTML <head>, carregar o resto do CSS de forma assíncrona.

  • Redução do número de pedidos HTTP:

    • Combinar ficheiros CSS e JavaScript.
    • Usar sprites para imagens pequenas.

  • Otimização de fontes:

    • Usar o formato WOFF2.
    • Usar font-display.
    • Pré-carregar fontes críticas.

  • Utilização de Server-Side Rendering (SSR) ou Geração de Sites Estáticos (SSG): Renderizar parte ou toda a página no servidor antes de a enviar ao cliente, o que melhora o tempo até ao primeiro conteúdo e a indexação.

  • Otimização de imagens:

    • Tamanhos corretos para diferentes dispositivos.
    • Uso de <picture> e srcset.
    • Compressão com perda controlada.

  • Uso de Resource Hints (preconnect, prefetch, preload): Sugestões ao navegador sobre recursos que podem ser necessários em breve.

    <!-- Conexão ao domínio antes de solicitar o recurso -->
<link rel="preconnect" href="https://example.com">
<!-- Pré-carregamento de recurso -->
<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Pré-fetch de recurso -->
<link rel="prefetch" href="/next-page.html">

  • Otimização do DOM: Minimizar a profundidade da árvore DOM, evitar operações custosas de leitura/escrita DOM em ciclos.

  • Otimização do render (Layout, Paint, Composite): Evitar recalcular estilos e layouts forçados, usar propriedades CSS que não causam repintado completo (por exemplo, transform, opacity em vez de top, left).

  • Uso de Web Workers: Mover cálculos intensivos para threads separados para evitar bloquear o thread principal da UI.

  • Carregamento progressivo: Mostrar conteúdo à medida que é carregado.

AnteriorPróximo