Milyen módon lehet optimalizálni a külső erőforrások…

Minifikáció és tömörítés: A CSS, JavaScript és HTML fájlok méretének csökkentése a szóközök, sortörések és megjegyzések eltávolításával, valamint tömörítési algoritmusok, például Gzip vagy Brotli használatával.
Lusta betöltés (Lazy Loading): Képek, videók és más erőforrások csak akkor töltődnek be, amikor a képernyő látható területére kerülnek. Ezt az loading="lazy" attribútummal vagy JavaScript segítségével lehet megvalósítani.
```
<img src="image.jpg" loading="lazy" alt="Kép leírása">
```
Aszinkron és késleltetett szkriptek betöltése: Az <script> tagekben az async és defer attribútumok használata.
- [async]: A szkript aszinkron módon töltődik be, és amint elérhető, azonnal végrehajtódik, nem blokkolva a HTML elemzését.
- [defer]: A szkript aszinkron módon töltődik be, de csak akkor hajtódik végre, miután az egész HTML dokumentumot elemezte.
```
<script src="script.js" async></script>
<script src="another-script.js" defer></script>
```
Képek optimalizálása: Modern formátumok (WebP) használata, veszteség nélküli tömörítés, a megfelelő felbontás kiválasztása és az srcset és <picture> attribútumok alkalmazása.
```
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Kép leírása">
</picture>
```
HTTP/2 és HTTP/3: Újabb verziók használata, amelyek támogatják a multiplexálást (több erőforrás egyidejű betöltése egy kapcsolaton keresztül) és a fejléc tömörítést.
Böngésző gyorsítótár: A Cache-Control és Expires HTTP fejléc beállítása, hogy megadja, mennyi ideig tárolja a böngésző az erőforrásokat cache-ben.
CDN (Content Delivery Network): Az erőforrások elosztása földrajzilag közelebb lévő szerverekre a késleltetés csökkentése érdekében.
Preload és Preconnect: A rel="preload" használata azokra az erőforrásokra, amelyekre a közeljövőben szükség lesz, és a rel="preconnect" a külső domainekkel való kapcsolat előzetes kialakítására.
```
<link rel="preload" href="style.css" as="style">
<link rel="preconnect" href="https://fonts.googleapis.com">
```
HTTP kérések számának csökkentése: A CSS és JavaScript fájlok egyesítése, sprite-ok használata képekhez.
A blokkoló erőforrások kiküszöbölése: Az <link> tagekben a media attribútum használata, hogy a stílusok csak bizonyos feltételek mellett alkalmazódjanak.
```
<link rel="stylesheet" href="print.css" media="print">
```

Milyen módon lehet optimalizálni a külső erőforrások betöltését egy weboldalon?