Módulo 19: Auditoria e Performance

2. Resumo da Aula Anterior

No último módulo, colocaste o teu site online! Agora que ele é público, precisas de garantir que é rápido, acessível a pessoas com deficiência e que o Google o consegue encontrar facilmente.

3. O Que Vais Aprender Hoje

✅ Como usar o Google Lighthouse para auditar o site.
✅ Otimização de Imagens e Lazy Loading.
✅ SEO Básico: Meta tags que fazem a diferença.
✅ Acessibilidade (a11y): Fazer um site para todos.

4. Teoria: A Nota de Final de Curso

Conceito: Um site de sucesso é medido por quatro pilares: Performance (Velocidade), Acessibilidade (Uso por todos), Boas Práticas (Código limpo) e SEO (Ranking no Google). O Lighthouse é a ferramenta que nos dá estas notas.

🏎️ Analogia: O Carro de Corrida

Pensa no teu site como um carro de Fórmula 1:

Performance: É a potência do motor. Se demorar 10 segundos a arrancar (carregar), perdes a corrida (o utilizador vai embora).
Acessibilidade: É garantir que o carro tem controlos para qualquer tipo de piloto.
SEO: São os patrocínios e a fama. Se ninguém souber que o teu carro existe, não ganhas prémios.
Auditoria (Lighthouse): É a inspeção técnica antes da corrida. Se tiveres luz verde em tudo, estás pronto para o topo!

5. Exemplos Práticos

Exemplo 1: Lazy Loading de Imagens

Não carregues o que o utilizador ainda não vê.

<!-- A carregar normalmente -->
<img src="foto-pesada.jpg" alt="Descrição">

<!-- ✅ Com Otimização: Só carrega quando chega ao scroll -->
<img src="foto-pesada.jpg" alt="Descrição" loading="lazy">

O atributo loading="lazy" é a forma mais fácil e eficaz de acelerar um site com muitas fotos.

Exemplo 2: SEO Meta Tags

O que o Google lê para o seu índice.

<head>
  <title>O Meu Portfólio de Developer</title>
  <meta name="description" content="Especialista em HTML5 e CSS3. Vê os meus projetos mais recentes aqui.">
  <link rel="canonical" href="https://omeusite.pt">
</head>

Sem uma boa description, o Google inventa um texto qualquer que pode não ser atraente para quem pesquisa.

Exemplo 3: Acessibilidade com ARIA

Ajudar os leitores de ecrã.

<button aria-label="Fechar Menu" class="btn-x">X</button>

Para um utilizador cego, um botão que diz apenas "X" não faz sentido. O aria-label diz-lhe exatamente o que o botão faz.

6. Agora é a Tua Vez!

Vamos auditar o teu site:

Abre o teu site no Chrome.
Prime F12 e vai à aba Lighthouse.
Clica em "Analyze page load".
Observa as 4 bolinhas de pontuação.
Se alguma estiver abaixo de 90 (laranja ou vermelho), segue as sugestões que o Chrome te dá para corrigir!

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

📌 O Lighthouse é o melhor amigo do developer para medir qualidade.
📌 Mais de 40% dos utilizadores desistem de sites que demoram mais de 3 segundos a carregar.
📌 Imagens são quase sempre o principal motivo de lentidão.
📌 Um site profissional tem de ser Acessível (inclusivo) e Otimizado para SEO.

9. Desafios Práticos

Desafio 1: O Formato do Futuro

Qual é o formato de imagem recomendado pelo Lighthouse para substituir o .JPG e o .PNG por ser mais leve?

Desafio 2: O Contraste

Porque é que o Lighthouse te pode dar uma nota baixa em Acessibilidade se usares texto cinzento claro sobre um fundo branco?

Desafio 3: A Tag de Ouro

Qual é a tag HTML que NUNCA pode faltar num projeto para que o título apareça corretamente nos separadores do browser e no Google?