# Guia de Otimização de Velocidade

> Auditoria feita em 22/07/2026 com base no estado atual dos ficheiros do site **DGZOUP** (dgzoup.com).
> Ordenado por impacto decrescente: começa pelo topo.
>
> Este guia segue uma estrutura reutilizável — pode ser aplicado a qualquer projeto estático (HTML/CSS/JS sem build), bastando substituir os nomes de ficheiros e valores pelos do site em questão.

---

## O que já está bem feito ✅

Antes de ver os problemas, o que já está implementado corretamente:

| Técnica | Detalhe |
|---------|---------|
| Preload da imagem crítica do hero | `<link rel="preload" as="image" fetchpriority="high">` na imagem do vídeo do hero |
| `defer` no script principal | JS não bloqueia o parsing do HTML |
| `loading="lazy"` nas imagens below-fold | Fotos de materiais, processo, mercados, footer |
| Cache de 1 ano nos assets estáticos | Configurado via `netlify.toml` (imagens, CSS, JS, vídeo) |
| CSS/JS minificados | `style.min.css` / `script.min.js`, gerados a partir da fonte via `minify.js` |
| WebP em quase todas as imagens | Formato moderno e comprimido |
| Ícones SVG auto-hospedados | Nenhuma dependência de servidor de terceiros para ícones/fotos |
| Compressão gzip/brotli | Feita automaticamente pelo Netlify — não precisa de configuração manual (ao contrário de servidores Apache) |

---

## 1. Comprimir o vídeo do hero

**Impacto: ALTO — pode poupar 6-7 MB no carregamento inicial**

| Ficheiro | Tamanho atual | Alvo recomendado |
|----------|---------------|-------------------|
| `video/hero-cnc.mp4` | **9,2 MB** | ~2-3 MB |

O vídeo está em autoplay na hero section (visível imediatamente ao abrir o site), por isso o peso conta a 100% para o carregamento inicial, mesmo com `preload="metadata"` já configurado.

### Como comprimir (requer `ffmpeg`, não incluído neste ambiente):

```bash
ffmpeg -i hero-cnc.mp4 -vcodec libx264 -crf 28 -preset slow -an hero-cnc-otimizado.mp4
```

- `-crf 28` equilibra qualidade/tamanho (mais alto = mais pequeno; testar entre 24-30)
- `-an` remove áudio (o vídeo já está `muted`, por isso o áudio é peso morto)
- Alternativa sem terminal: HandBrake (grátis, interface gráfica) com o preset "Web" ou "Fast 1080p30"

Depois, substituir o ficheiro em `video/hero-cnc.mp4` (mesmo nome, mesmo local) nas 3 versões do site (raiz, `/en/`, `/fr/` apontam todas para o mesmo ficheiro partilhado).

---

## 2. Limpar ficheiros de imagem não utilizados

**Impacto: BAIXO — não afeta a velocidade de carregamento, só o tamanho do deploy**

| Situação | Detalhe |
|----------|---------|
| Fotos originais em `assets/fotos/*.jpeg` | Cópias de segurança das fotos fornecidas pelo cliente, mantidas como backup; as versões `.webp` otimizadas (mesma pasta) é que são realmente usadas no site |

Como estes ficheiros não são referenciados em nenhum HTML/CSS, não são pedidos pelo browser dos visitantes — não afetam o tempo de carregamento. Só ocupam espaço extra no repositório/deploy. Podem ser removidos com segurança se já não forem necessários como referência, ou mantidos sem problema se preferires ter as fontes originais à mão.

---

## 3. Considerar auto-hospedar as fontes

**Impacto: MÉDIO — elimina 2 pedidos a servidores externos antes do texto poder ser desenhado**

Atualmente as fontes carregam de:
- `fonts.googleapis.com` (Fraunces)
- `cdn.jsdelivr.net` (Geist, via pacote `@fontsource/geist-sans`)

Cada um destes é um domínio externo adicional a que o browser precisa de se ligar (DNS + TLS) antes de conseguir mostrar texto com a fonte correta. Já há `preconnect` configurado para ambos, o que ajuda, mas auto-hospedar os ficheiros `.woff2` localmente (em `assets/fonts/`) e referenciá-los via `@font-face` no `style.css` eliminaria essas ligações externas por completo.

Não é urgente — o `preconnect` já mitiga a maior parte do impacto — mas é uma melhoria disponível quando houver tempo.

---

## 4. Imagens responsivas (srcset)

**Impacto: MÉDIO — melhora sobretudo em mobile**

Atualmente cada imagem serve o mesmo ficheiro para todos os tamanhos de ecrã. Um telemóvel descarrega a mesma foto de alta resolução que um monitor 4K precisaria.

Exemplo de aplicação:
```html
<img
  srcset="foto-800.webp 800w, foto-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  src="foto-1600.webp"
  alt="...">
```

Requer gerar uma segunda versão (~800px de largura) de cada foto principal. Ação para quando houver tempo — não é bloqueador.

---

## Resumo de prioridades

| Prioridade | Ação | Esforço | Ganho estimado |
|-----------|------|---------|-----------------|
| 🔴 1 | Comprimir `hero-cnc.mp4` (precisa de ffmpeg/HandBrake) | 10-15 min | −6 a −7 MB no carregamento inicial |
| 🟢 2 | Limpar fotos `.jpeg` originais não usadas | 5 min | Espaço no deploy, sem impacto de velocidade |
| 🟢 3 | Auto-hospedar fontes | 30-45 min | Elimina 2 ligações externas |
| 🟢 4 | srcset responsivo | 1-2h | Bom para mobile, não urgente |

---

## Fluxo de trabalho deste projeto (importante para manter tudo em sincronia)

Este site usa dois scripts Node para manter ficheiros derivados atualizados. **Sempre que editares o código-fonte, corre o script correspondente antes de publicar**, senão o site fica a servir a versão antiga:

| Editaste... | Corre isto antes de publicar |
|---|---|
| `templates/header.*.html` ou `templates/footer.*.html` | `node sync-partials.js` (atualiza as 18 páginas) |
| `style.css` ou `script.js` | `node minify.js` (regenera `style.min.css` e `script.min.js`, que são os ficheiros realmente carregados pelas páginas) |

---

## Como testar após as alterações

1. **[PageSpeed Insights](https://pagespeed.web.dev/)** — introduz o URL após publicar. Score >90 é o objetivo.
2. **[GTmetrix](https://gtmetrix.com/)** — mais detalhe por recurso (o que demora mais a carregar).
3. **[WebPageTest](https://www.webpagetest.org/)** — waterfall completo.
4. **Chrome DevTools** → Network → desativa cache → recarrega — vê o peso total real.
