Brauzerin resursların yüklənməsinə hazırlaşmasına necə kömək edə bilərik?

Yükləmə üçün direktivlərdən istifadə edin: preconnect, dns-prefetch, preload, prefetch, prerender.

Direktiva	Təsviri	Nümunə
preconnect	Digər mənbə ilə əvvəlcədən əlaqə qurur (DNS axtarışı, TCP əl sıxışı, TLS razılaşması).	<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch	Domen adını əvvəlcədən həll edir.	<link rel="dns-prefetch" href="//api.example.com">
preload	Resursları (JS, CSS, şriftlər) yüksək prioritetlə əvvəlcədən tələb edir, renderi bloklamır.	<link rel="preload" href="/styles.css" as="style">
prefetch	Gələcəkdə ehtimal ki, lazım olacaq resursları tələb edir (məsələn, növbəti səhifədə).	<link rel="prefetch" href="/next_page.html">
prerender	Növbəti səhifəni gizli tabda əvvəlcədən render edir.	<link rel="prerender" href="/upcoming_page.html">

<script> etiketi üçün async və ya defer atributundan istifadə edin, skriptləri asinxron yükləyib icra etmək üçün, HTML parse prosesini bloklamadan:

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

Şəkillər və <iframe> üçün loading="lazy" atributundan istifadə edin, onlar görünüş sahəsinə daxil olduqda gecikdirilmiş yüklənir:

<img src="image.jpg" loading="lazy" alt="Lazımsız yüklənmiş şəkil">

Şəkilləri (sıxış, müasir formatlar WebP kimi), şriftləri (alt dəstlər, WOFF/WOFF2 formatları) və digər resursları optimallaşdırın.

CSS, JavaScript və HTML-ni minimallaşdırın və sıxın.

Service Worker istifadə edərək resursların keşiklenmesini təmin edin və offline girişə imkan yaradın.

Böyük JavaScript kodunu kiçik hissələrə bölün (code splitting) və tələb olunduqda yükləyin.

HTTP/2 və HTTP/3-dən istifadə edin, bu daha effektiv çoxlama və başlıq sıxışdırma təmin edir.

Serverdə düzgün cache başlıqlarını (Cache-Control, Expires) qurun.

<link rel="modulepreload"> istifadə edərək ES modul JavaScript-lərini əvvəlcədən yükləyin.

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