Kā mēs varam palīdzēt pārlūkprogrammai sagatavoties resursu ielādei?

Izmantojiet priekšlādēšanas direktīvas: preconnect, dns-prefetch, preload, prefetch, prerender.

Direktīva	Apraksts	Piemērs
preconnect	Izveido savienojumu (DNS meklēšanu, TCP rokas spiedienu, TLS sarunu) ar citu datu avotu iepriekš.	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	Iepriekš risina domēna vārdu.	<link rel="dns-prefetch" href="//api.example.com">
preload	Iepriekš pieprasa resursus (JS, CSS, fontus) ar augstu prioritāti, neapturot renderēšanu.	<link rel="preload" href="/styles.css" as="style">
prefetch	Iepriekš pieprasa resursu, kas, visticamāk, būs nepieciešams nākotnē (piemēram, nākamajā lapā).	<link rel="prefetch" href="/next_page.html">
prerender	Iepriekš renderē nākamo lapu slēptā cilnē.	<link rel="prerender" href="/upcoming_page.html">

Izmantojiet async vai defer atribūtus <script> tagiem asinhronai ielādei un izpildei, neapturot HTML parsēšanu:

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

Izmantojiet loading="lazy" atribūtu attēliem un <iframe> to aizkavētai ielādei, kad tie nonāk skatāmajā zonā:

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

Optimizējiet attēlus (saspiest, izmantot mūsdienu formātus kā WebP), fontus (subsets, WOFF/WOFF2 formātus) un citus resursus.

Minificējiet un saspiest CSS, JavaScript un HTML.

Izmantojiet Service Worker kešatmiņai un bezsaistes piekļuvei.

Sadali lielu JavaScript kodu mazākās daļās (code splitting) un ielādējiet pēc pieprasījuma.

Izmantojiet HTTP/2 un HTTP/3 efektīvākai daudzkāršu apstrādei un galvenes saspiešanai.

Iestatiet pareizos kešatmiņas galvenes (Cache-Control, Expires) serverī.

Izmantojiet <link rel="modulepreload"> priekšlaicīgai JavaScript ES moduļu ielādei.

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