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

Използвайте директиви за предварително зареждане: preconnect, dns-prefetch, preload, prefetch, prerender.

Директива	Описание	Пример
preconnect	Установява връзка (DNS заявка, TCP ръкостискане, TLS преговори) с друг източник на данни предварително.	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	Извършва разрешаване на домейн името предварително.	<link rel="dns-prefetch" href="//api.example.com">
preload	Заявява ресурси (JS, CSS, шрифтове) с висок приоритет предварително, без да блокира рендирането.	<link rel="preload" href="/styles.css" as="style">
prefetch	Заявява ресурси, които вероятно ще са необходими в бъдеще (например, на следващата страница).	<link rel="prefetch" href="/next_page.html">
prerender	Предварително рендерира следващата страница в скрит раздел.	<link rel="prerender" href="/upcoming_page.html">

Използвайте атрибута async или defer за <script>, за да зареждате и изпълнявате скриптове асинхронно, без да блокирате анализа на HTML:

<script src="script.js" async></script>
<script src="another-script.js" defer></script>

Използвайте атрибута loading="lazy" за изображения и <iframe>, за да ги зареждате отложено, когато попаднат в областта на видимост:

<img src="image.jpg" loading="lazy" alt="Lazy заредено изображение">

Оптимизирайте изображенията (компресия, използване на съвременни формати като WebP), шрифтовете (подмножества, формати WOFF/WOFF2) и други ресурси.

Минифицирайте и компресирайте CSS, JavaScript и HTML.

Използвайте Service Worker за кеширане на ресурси и осигуряване на офлайн достъп.

Разделете големия JavaScript код на по-малки части (code splitting) и ги зареждайте по искане.

Използвайте HTTP/2 и HTTP/3 за по-ефективно мултиплексиране и компресия на заглавките.

Настройте правилните заглавки за кеширане (Cache-Control, Expires) на сървъра.

Използвайте <link rel="modulepreload"> за предварително зареждане на ES модули JavaScript.

<link rel="modulepreload" href="/dist/module.js">