Kaip galime padėti naršyklei pasiruošti išteklių įkėlimui?

Naudokite išankstinio įkėlimo direktyvas: preconnect, dns-prefetch, preload, prefetch, prerender.

Direktyva	Aprašymas	Pavyzdys
preconnect	Iš anksto nustato ryšį (DNS užklausą, TCP ranką, TLS derybas) su kitu duomenų šaltiniu.	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	Iš anksto išsprendžia domeno vardą.	<link rel="dns-prefetch" href="//api.example.com">
preload	Iš anksto prašo išteklių (JS, CSS, šriftus) su aukštu prioritetu, nesustabdyti atvaizdavimo.	<link rel="preload" href="/styles.css" as="style">
prefetch	Iš anksto prašo išteklių, kurie greičiausiai bus reikalingi ateityje (pvz., kitame puslapyje).	<link rel="prefetch" href="/next_page.html">
prerender	Iš anksto atvaizduoja kitą puslapį paslėptame skirtuke.	<link rel="prerender" href="/upcoming_page.html">

Naudokite async arba defer atributą <script> žymėje asinchroniniam įkėlimui ir vykdymui, neblokiruojant HTML analizės:

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

Naudokite loading="lazy" atributą vaizdams ir <iframe> jų vėlytam įkėlimui, kai jie patenka į matomą sritį:

<img src="image.jpg" loading="lazy" alt="Lazy loaded image">

Optimizuokite vaizdus (suspauskite, naudokite šiuolaikinius formatus kaip WebP), šriftus (subset, WOFF/WOFF2 formatus) ir kitus išteklius.

Minifikuokite ir suspauskite CSS, JavaScript ir HTML.

Naudokite Service Worker išteklių talpykloje ir neprisijungus prie interneto.

Suskaidykite didelį JavaScript kodą į mažesnes dalis (code splitting) ir įkelkite jų pagal poreikį.

Naudokite HTTP/2 ir HTTP/3 efektyvesniam daugiukryptiškumui ir antraščių suspaudimui.

Nustatykite tinkamus talpyklos antraščių (Cache-Control, Expires) serverio pusėje.

Naudokite <link rel="modulepreload"> JavaScript ES modulių išankstiniam įkėlimui.

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