Какви са начините за оптимизиране на зареждането на…

Минификация и компресия: Намаляване на размера на CSS, JavaScript и HTML файловете чрез премахване на интервали, нови редове и коментари, както и използване на алгоритми за компресия като Gzip или Brotli.
Lazy Loading (мързеливо зареждане): Зареждане на изображения, видеа и други ресурси само когато попаднат в видимата област на екрана. Това може да се реализира с атрибута loading="lazy" или JavaScript.
```
<img src="image.jpg" loading="lazy" alt="Описание на изображението">
```
Асинхронно и отложено зареждане на скриптове: Използване на атрибутите async и defer за <script> таговете.
- [async]: Скриптът се зарежда асинхронно и се изпълнява веднага щом стане достъпен, без да блокира парсирането на HTML.
- [defer]: Скриптът се зарежда асинхронно, но се изпълнява след като цялата HTML структура бъде обработена.
```
<script src="script.js" async></script>
<script src="another-script.js" defer></script>
```
Оптимизация на изображения: Използване на съвременни формати като WebP, компресия без загуба на качество, избор на подходящо разрешение и използване на атрибути srcset и <picture>.
```
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Описание на изображението">
</picture>
```
HTTP/2 и HTTP/3: Използване на по-нови версии на протокола HTTP, които поддържат мултиплексиране (едновременно зареждане на няколко ресурса чрез една връзка) и компресиране на заглавките.
Кеширане от браузъра: Настройка на HTTP заглавките Cache-Control и Expires за указване колко дълго браузърът трябва да съхранява ресурсите в кеша.
CDN (Content Delivery Network): Разпределение на ресурсите по сървъри, разположени географски по-близо до потребителя, за намаляване на закъсненията.
Предварително зареждане и рендериране (Preload и Preconnect): Използване на rel="preload" за ресурси, които ще са необходими скоро, и rel="preconnect" за предварително установяване на връзка с външен домейн.
```
<link rel="preload" href="style.css" as="style">
<link rel="preconnect" href="https://fonts.googleapis.com">
```
Намаляване на броя на HTTP заявките: Обединяване на CSS и JavaScript файлове, използване на спрайтове за изображения.
Премахване на блокиращи ресурси за рендериране: Използване на атрибута media за <link> таговете, за да се прилагат стиловете само при определени условия.
```
<link rel="stylesheet" href="print.css" media="print">
```

Какви са начините за оптимизиране на зареждането на външни ресурси на уеб страница?