Как мы можем помочь браузеру подготовиться к загрузке ресурсов?

Использовать директивы предзагрузки: preconnect, dns-prefetch, preload, prefetch, prerender.

Директива	Описание	Пример
preconnect	Устанавливает соединение (DNS lookup, TCP handshake, TLS negotiation) с другим источником данных заранее.	<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 loaded image">

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

Минифицировать и сжимать CSS, JavaScript и HTML.

Использовать Service Worker для кеширования ресурсов и обеспечения офлайн-доступа.

Разбивать большой JavaScript-код на более мелкие части (code splitting) и загружать их по требованию.

Использовать HTTP/2 и HTTP/3 для более эффективного мультиплексирования и сжатия заголовков.

Устанавливать правильные заголовки кеширования (Cache-Control, Expires) на сервере.

Использовать <link rel="modulepreload"> для предзагрузки модулей JavaScript ES.

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