Ինչպե՞ս կարող ենք օգնել բրաուզերին պատրաստվել ռեսուրսների բեռնումին:

Օգտագործել նախաբեռնման հրահանգներ՝ 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 loaded image">

Օպտիմիզացնել նկարները (քաշել, օգտագործել ժամանակակից ֆորմատներ՝ WebP), ֆոնտերը (միայն անհրաժեշտ հատվածներ, WOFF/WOFF2 ֆորմատներ) և այլ ռեսուրսներ:

Minify և սեղմել 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">