Módulo 10: Performance Web

2. Resumo da Aula Anterior

No módulo passado, aprendeste a configurar o SEO para que o teu site apareça no Google. Hoje, vamos garantir que o teu site é super rápido. A velocidade não é apenas um luxo; é um fator vital para manter os utilizadores e para subir no ranking do Google (Core Web Vitals).

3. O Que Vais Aprender Hoje

Nesta aula, vais aprender as técnicas de elite para otimizar o carregamento do teu HTML:

✅ A batalha dos scripts: normais vs async vs defer.
✅ Otimização de Imagens e Iframes com lazy loading.
✅ Antecipar recursos com preload e preconnect.
✅ O conceito de Above the Fold (Acima da Dobra).
✅ Prioridade de carregamento (fetchpriority).

4. Teoria: A Web Não Espera

O Bloqueio do Renderizador

Quando o browser lê uma tag <script>, ele para tudo o que está a fazer (como desenhar o texto) para descarregar e ler o ficheiro. Isto chama-se "bloqueio".

async: O script descarrega "de lado" e corre assim que terminar, interrompendo o HTML se for preciso. Útil para anúncios ou analytics.
defer: O script descarrega "de lado" mas só corre DEPOIS de todo o HTML estar desenhado. É a opção ideal para a lógica do teu site.

Lazy Loading 2.0

Não penses apenas em imagens! Podes usar loading="lazy" também em <iframe> (como mapas do Google ou vídeos do YouTube). Isto poupa imensa memória e dados ao utilizador.

🏎️ Analogia: O Restaurante Eficiente

Imagina que és o chefe de sala de um restaurante de luxo:

Scripts Normais: É um empregado que para de servir as mesas para ir ler o menu todo a um cliente (bloqueia o serviço).
Defer: É preparar o menu enquanto serve as bebidas e só ir ler o menu quando o cliente já tiver a bebida na mão.
Preload: É tirar a garrafa de vinho da cave antes mesmo de o cliente a pedir, porque sabes que ele a pede sempre.
Above the Fold: É garantir que as entradas chegam à mesa mal o cliente se senta, mesmo que o prato principal ainda demore 20 minutos.

Novidade: fetchpriority

Podes dizer ao browser: "Esta imagem é a mais importante de todas!" usando fetchpriority="high". Isto é perfeito para o banner principal (hero image) para que ele apareça instantaneamente.

5. Exemplos de Código

Exemplo 1: Gestão de Ativos Profissional
                    <head>
  <!-- Preload de fonte crítica -->
  <link rel="preload" href="fonts/inter.woff2" as="font" crossorigin>

  <!-- Script que não bloqueia o site -->
  <script defer src="js/main.js"></script>
</head>
                

Exemplo 2: Otimização de Media
                    <!-- Imagem prioritária no topo -->
<img src="hero.webp" fetchpriority="high" alt="Banner Principal">

<!-- Mapa que só carrega quando chegamos ao fim da página -->
<iframe src="google-maps-link" loading="lazy"></iframe>
                

6. Agora é a Tua Vez! (Limpeza de Performance)

Vamos aplicar estas correções ao teu arquivo index.html. Segue estes passos:

Scripts: Move todos os teus <script> para o <head> e adiciona o atributo defer.
Preconnect: Adiciona <link rel="preconnect" href="https://fonts.googleapis.com"> no topo do head.
Imagens: Procura todas as imagens que NÃO aparecem no topo do ecrã mal a página abre. Adiciona-lhes loading="lazy".
Prioridade: Na primeira imagem do teu site, adiciona fetchpriority="high" e remove qualquer loading="lazy" que ela possa ter.
Vídeo: Se tiveres um vídeo ou mapa, certifica-te de que ele tem loading="lazy" para não atrasar o resto do site.

7. Verificação de Conhecimento

Velocidade é dinheiro na web. Prova que sabes como poupar segundos ao teu utilizador!

Carregando quiz...

8. Resumo do Que Aprendemos

📌 Performance é uma funcionalidade (feature), não um detalhe.
📌 Usa defer para scripts; async para serviços externos independentes.
📌 loading="lazy" em imagens e iframes "abaixo da dobra".
📌 fetchpriority="high" para o recurso mais importante do topo.
📌 preload e preconnect eliminam tempo de espera de rede.

9. Desafios Práticos

Desafio 1: O Mistério do LCP

Pesquisa o que significa a sigla LCP (Largest Contentful Paint) e porque é que o Google a usa para medir a velocidade do teu site.

Solução: É o tempo que demora a aparecer o maior elemento visual no ecrã (geralmente uma imagem ou título). O Google quer que isto aconteça em menos de 2.5 segundos.

Desafio 2: Scripts no Fim vs Defer

Antigamente, colocavam-se os scripts no final do <body>. Porque é que usar defer no <head> é melhor hoje em dia?

Solução: Porque com o defer no head, o browser começa a descarregar o ficheiro ENQUANTO lê o HTML. Se estiver no fim do body, ele só descobre que o ficheiro existe quando chegar lá.

Desafio 3: Favicon e Performance

Até o favicon pode afetar a velocidade. Como deves definir o ícone para que ele seja o mais leve possível?

Solução: Usando o formato SVG (que é código vetorial puro) ou um PNG otimizado em vez do antigo formato .ico pesado.

Aprende Web: HTML5

Módulo 10: Performance e Velocidade Web