Welke manieren zijn er om het laden van externe…

Minificatie en compressie: Het verkleinen van de grootte van CSS-, JavaScript- en HTML-bestanden door spaties, regelafbrekingen en opmerkingen te verwijderen, en gebruik te maken van compressie-algoritmen zoals Gzip of Brotli.
Lazy Loading: Het laden van afbeeldingen, video's en andere bronnen alleen wanneer ze in het zichtbare deel van het scherm komen. Dit kan worden geïmplementeerd met het attribuut loading="lazy" of JavaScript.
```
<img src="image.jpg" loading="lazy" alt="Beschrijving van de afbeelding">
```
Asynchroon en vertraagd laden van scripts: Gebruik van de attributen async en defer in <script>-tags.
- [async]: Het script wordt asynchroon geladen en uitgevoerd zodra het beschikbaar is, zonder de HTML-parser te blokkeren.
- [defer]: Het script wordt asynchroon geladen, maar wordt pas uitgevoerd nadat het volledige HTML-document is geparseerd.
```
<script src="script.js" async></script>
<script src="another-script.js" defer></script>
```
Optimalisatie van afbeeldingen: Gebruik van moderne formaten zoals WebP, verliesvrije compressie, juiste resolutie kiezen en gebruik maken van srcset en <picture>.
```
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Beschrijving van de afbeelding">
</picture>
```
HTTP/2 en HTTP/3: Gebruik van nieuwere versies van het HTTP-protocol die multiplexing (gelijktijdig laden van meerdere bronnen via één verbinding) en header-compressie ondersteunen.
Browsercaching: Configuratie van HTTP-headers Cache-Control en Expires om aan te geven hoe lang bronnen in de cache moeten worden bewaard.
CDN (Content Delivery Network): Het distribueren van bronnen over servers die geografisch dichter bij de gebruiker liggen om vertraging te verminderen.
Preload en Preconnect: Gebruik van rel="preload" voor bronnen die binnenkort nodig zijn en rel="preconnect" om verbindingen met externe domeinen vooraf op te zetten.
```
<link rel="preload" href="style.css" as="style">
<link rel="preconnect" href="https://fonts.googleapis.com">
```
Vermindering van het aantal HTTP-verzoeken: Het samenvoegen van CSS- en JavaScript-bestanden, gebruik van sprites voor afbeeldingen.
Het verwijderen van resources die de rendering blokkeren: Gebruik van het attribuut media in <link>-tags zodat stijlen alleen onder bepaalde voorwaarden worden toegepast.
```
<link rel="stylesheet" href="print.css" media="print">
```

Welke manieren zijn er om het laden van externe bronnen op een webpagina te optimaliseren?