Kaip galima optimizuoti išorinių išteklių įkėlimą…

Minimalizavimas ir suspaudimas: CSS, JavaScript ir HTML failų dydžio sumažinimas pašalinant tarpelius, naujus eilutės ženklus ir komentarus, taip pat naudojant suspaudimo algoritmus, tokius kaip Gzip ar Brotli.
Lazy Loading (vėlyvas įkėlimas): vaizdų, vaizdo įrašų ir kitų išteklių įkėlimas tik tada, kai jie patenka į matomą ekrano sritį. Tai galima įgyvendinti naudojant loading="lazy" atributą arba JavaScript.
```
<img src="image.jpg" loading="lazy" alt="Vaizdo aprašymas">
```
Asinchroninis ir atidėtas skriptų įkėlimas: naudojant async ir defer atributus <script> žymėse.
- [async]: Skriptas įkeliamas asinchroniškai ir vykdomas, kai tik jis pasiekiamas, neblokuoja HTML analizės.
- [defer]: Skriptas įkeliamas asinchroniškai, bet vykdomas tik po to, kai visas HTML dokumentas yra apdorotas.
```
<script src="script.js" async></script>
<script src="another-script.js" defer></script>
```
Vaizdų optimizavimas: naudojant šiuolaikinius formatus (WebP), be kokybės praradimo suspaudimą, tinkamą rezoliucijos pasirinkimą ir srcset bei <picture> atributų naudojimą.
```
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Vaizdo aprašymas">
</picture>
```
HTTP/2 ir HTTP/3: naudojant naujesnes HTTP protokolo versijas, kurios palaiko daugiuklausimą (vienu metu įkelti kelis išteklius per vieną ryšį) ir antraščių suspaudimą.
Naršyklės talpykla: nustatyti HTTP antraštes Cache-Control ir Expires, kad nurodytų, kiek ilgai naršyklė turėtų saugoti išteklius talpykloje.
CDN (Content Delivery Network): išteklių paskirstymas per serverius, esančius arčiau vartotojo geografiškai, siekiant sumažinti delsą.
Preload ir Preconnect: naudoti rel="preload" ištekliams, kurie bus reikalingi netrukus, ir rel="preconnect" iš anksto nustatyti ryšį su išoriniu domenu.
```
<link rel="preload" href="style.css" as="style">
<link rel="preconnect" href="https://fonts.googleapis.com">
```
Sumažinti HTTP užklausų skaičių: sujungti CSS ir JavaScript failus, naudoti spraitus vaizdams.
Blokuojančių rendering išteklių pašalinimas: naudoti media atributą <link> žymėse, kad stiliai būtų taikomi tik tam tikromis sąlygomis.
```
<link rel="stylesheet" href="print.css" media="print">
```

Kaip galima optimizuoti išorinių išteklių įkėlimą interneto puslapyje?