Akými spôsobmi možno optimalizovať načítanie…

Minifikácia a kompresia: Zníženie veľkosti CSS, JavaScript a HTML súborov odstránením medzier, nových riadkov a komentárov, ako aj použitím kompresných algoritmov ako Gzip alebo Brotli.
Lazy Loading (lenivé načítanie): Načítanie obrázkov, videí a iných zdrojov iba vtedy, keď sa dostanú do viditeľnej oblasti obrazovky. Toto možno implementovať pomocou atribútu loading="lazy" alebo JavaScriptu.
```
<img src="image.jpg" loading="lazy" alt="Popis obrázka">
```
Asynchrónne a odložené načítanie skriptov: Použitie atribútov async a defer pre <script> tagy.
- [async]: Skript sa načíta asynchrónne a vykoná sa hneď, ako bude dostupný, bez blokovania parsovania HTML.
- [defer]: Skript sa načíta asynchrónne, ale vykoná sa až po tom, čo bude celý dokument HTML spracovaný.
```
<script src="script.js" async></script>
<script src="another-script.js" defer></script>
```
Optimalizácia obrázkov: Použitie moderných formátov ako WebP, kompresia bez straty kvality, výber správneho rozlíšenia a použitie atribútov srcset a <picture>.
```
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Popis obrázka">
</picture>
```
HTTP/2 a HTTP/3: Použitie novších verzií protokolu HTTP, ktoré podporujú multiplexing (súčasné načítanie viacerých zdrojov cez jedno spojenie) a kompresiu hlavičiek.
Cacheovanie v prehliadači: Nastavenie hlavičiek HTTP Cache-Control a Expires na určenie, ako dlho má prehliadač uchovávať zdroje v cache.
CDN (Content Delivery Network): Rozmiestnenie zdrojov na serveroch, ktoré sú geograficky bližšie k používateľovi, na zníženie oneskorenia.
Predbežné načítanie a renderovanie (Preload a Preconnect): Použitie rel="preload" na zdroje, ktoré budú čoskoro potrebné, a rel="preconnect" na vopred nadviazanie spojenia s externým doménou.
```
<link rel="preload" href="style.css" as="style">
<link rel="preconnect" href="https://fonts.googleapis.com">
```
Zníženie počtu HTTP požiadaviek: Zlúčenie CSS a JavaScript súborov, použitie spriteov pre obrázky.
Odstránenie blokujúcich renderovanie zdrojov: Použitie atribútu media pre <link> tagy, aby sa štýly aplikovali len za určitých podmienok.
```
<link rel="stylesheet" href="print.css" media="print">
```

Akými spôsobmi možno optimalizovať načítanie externých zdrojov na webovej stránke?