Brauzerga resurslarni yuklashga tayyorlashda qanday yordam berishimiz mumkin?
sobes.tech AI
AIdan javob
Oldindan yuklash bo‘limlari uchun preconnect, dns-prefetch, preload, prefetch, prerender direktivalarini foydalaning.
| Direktiva | Tavsifi | Misol |
|---|---|---|
preconnect |
Boshqa manbaga (DNS so‘rovi, TCP qo‘l siqishi, TLS kelishuvi) oldindan ulanishni o‘rnatadi. | <link rel="preconnect" href="https://cdn.example.com"> |
dns-prefetch |
Domen nomini oldindan hal qilishni amalga oshiradi. | <link rel="dns-prefetch" href="//api.example.com"> |
preload |
Resurslarni (JS, CSS, shriftlar) yuqori prioritet bilan oldindan so‘rov qiladi, renderni bloklamaydi. | <link rel="preload" href="/styles.css" as="style"> |
prefetch |
Kelajakda ehtimol kerak bo‘ladigan resurslarni so‘rov qiladi (masalan, keyingi sahifa uchun). | <link rel="prefetch" href="/next_page.html"> |
prerender |
Keyingi sahifani yashirin tabda oldindan render qiladi. | <link rel="prerender" href="/upcoming_page.html"> |
<script> tegiga async yoki defer atributlarini qo‘shing, shunda skriptlar asinxron tarzda yuklanadi va bajariladi, HTML parsingini bloklamaydi:
<script src="script.js" async></script>
<script src="another-script.js" defer></script>
Rasmlar va <iframe> uchun loading="lazy" atributini foydalaning, ular ko‘rinish maydoniga kirganda kechiktirilgan holda yuklanadi:
<img src="image.jpg" loading="lazy" alt="Lazy yuklangan rasm">
Rasmlarni (siqish, zamonaviy formatlar WebP kabi), fontlarni (subsets, WOFF/WOFF2 formatlari) va boshqa resurslarni optimallashtiring.
CSS, JavaScript va HTML ni minimallashtiring va siqib chiqing.
Service Worker yordamida resurslarni kechiktirish va offline kirishni ta'minlang.
Katta JavaScript kodini kichik qismlarga bo‘ling (code splitting) va talab qilinadigan joyda yuklang.
HTTP/2 va HTTP/3 dan foydalaning, bu ko‘p so‘rovlarni samarali qilish va sarlavhalarni siqishni ta'minlaydi.
Serverda to‘g‘ri cache sarlavhalarini (Cache-Control, Expires) o‘rnatib qo‘ying.
<link rel="modulepreload"> yordamida ES JavaScript modullarini oldindan yuklang.
<link rel="modulepreload" href="/dist/module.js">