Quais são as formas de otimizar o carregamento de…

Minificação e compressão: Redução do tamanho dos ficheiros CSS, JavaScript e HTML através da eliminação de espaços, quebras de linha e comentários, bem como o uso de algoritmos de compressão como Gzip ou Brotli.
Carregamento preguiçoso (Lazy Loading): Carregar imagens, vídeos e outros recursos apenas quando entram na área visível do ecrã. Isto pode ser implementado com o atributo loading="lazy" ou JavaScript.
```
<img src="image.jpg" loading="lazy" alt="Descrição da imagem">
```
Carregamento assíncrono e diferido de scripts: Uso dos atributos async e defer nas tags <script>.
- [async]: O script é carregado de forma assíncrona e executa-se assim que estiver disponível, sem bloquear a análise do HTML.
- [defer]: O script é carregado de forma assíncrona, mas só é executado após toda a análise do documento HTML.
```
<script src="script.js" async></script>
<script src="another-script.js" defer></script>
```
Otimização de imagens: Uso de formatos modernos como WebP, compressão sem perda de qualidade, escolha da resolução correta e uso dos atributos srcset e <picture>.
```
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descrição da imagem">
</picture>
```
HTTP/2 e HTTP/3: Uso de versões mais recentes do protocolo HTTP que suportam multiplexação (carregamento simultâneo de múltiplos recursos através de uma única conexão) e compressão de cabeçalhos.
Caching no navegador: Configuração dos cabeçalhos HTTP Cache-Control e Expires para indicar por quanto tempo o navegador deve armazenar os recursos em cache.
CDN (Content Delivery Network): Distribuição de recursos por servidores geograficamente mais próximos do utilizador para reduzir a latência.
Pré-carregamento e pré-conexão (Preload e Preconnect): Uso de rel="preload" para recursos que serão necessários em breve e rel="preconnect" para estabelecer conexões com domínios externos antecipadamente.
```
<link rel="preload" href="style.css" as="style">
<link rel="preconnect" href="https://fonts.googleapis.com">
```
Redução do número de pedidos HTTP: Agrupamento de ficheiros CSS e JavaScript, uso de sprites para imagens.
Remoção de recursos que bloqueiam a renderização: Uso do atributo media nas tags <link> para que os estilos sejam aplicados apenas sob certas condições.
```
<link rel="stylesheet" href="print.css" media="print">
```

Quais são as formas de otimizar o carregamento de recursos externos numa página web?