Resurs maslahatlari: preload, preconnect, prefetch va fetchpriority

Qisqacha: Resurs maslahati — head dagi link qatori, u brauzerga "bu fayl yoki server tez orada kerak bo'ladi" deb oldindan aytadi. Uchta asosiysi bor. Hozirgi sahifaning muhim fayli uchun — preload, boshqa serverga oldindan ulanish uchun — preconnect, keyingi sahifa uchun — prefetch. Ular faqat to'g'ri ishlatilsa tezlashtiradi: ortiqcha maslahat muhim fayllarning navbatini egallab, sahifani sekinlashtiradi.

Bu darsda

• Brauzer resursni nega kech "topishini" va bu sahifani qanday sekinlashtirishini tushuntirasiz.
• preload ni as va crossorigin bilan to'g'ri yozasiz — ayniqsa shrift uchun.
• preconnect va dns-prefetch ni qaysi serverga qo'yishni tanlaysiz.
• prefetch, modulepreload va fetchpriority qachon kerakligini bilasiz.
• Speculation Rules bilan keyingi sahifani oldindan tayyorlash g'oyasini tushunasiz.

Oldin bilishingiz kerak: Skriptlarni ulash: defer, async, module, Rasm unumdorligi, HTTP versiyalari, Renderni nima to'xtatadi.

1. Nega bu kerak?

«Bahor» choyxonasining bosh sahifasi tayyor. Lekin telefonda, sekin internetda ochganda g'alati holat bo'ladi. Avval sarlavha oddiy shriftda chiqadi. Bir soniyadan keyin u birdan chiroyli shriftga almashadi va matn "sakraydi".

Sababini DevTools'ning Network panelida ko'rsak bo'ladi (DevTools II darsida waterfall bilan tanishgansiz). Yuklanish zanjiri shunday:

1. Brauzer HTML'ni yuklaydi.
2. HTML ichida CSS faylini ko'radi va uni yuklaydi.
3. Faqat CSS'ni o'qigandan keyin "aha, shrift kerak ekan" deb shriftni so'raydi.

Shrift uchinchi navbatda keladi. Holbuki, dasturchi shrift kerakligini boshidan biladi. Brauzer esa bilmaydi — u faqat o'zi ko'rgan narsani yuklaydi.

Hayotdan misol: osh damlash. Oshpaz sabzi kerakligini faqat qozon qizigandan keyin eslasa, bozorga yuguradi va osh kechikadi. Aqlli oshpaz ertalabdan shogirdiga "sabzi, go'sht, guruch olib kel" deb aytib qo'yadi.

Resurs maslahati (resource hint) — brauzerga oldindan beriladigan xuddi shunday topshiriq: "bu fayl kerak bo'ladi, hoziroq ol". U head ichida link tegi bilan yoziladi.

Diqqat: Bu — "maslahat", buyruq emas. Brauzer uni o'z holatiga qarab bajaradi yoki e'tiborsiz qoldiradi. Masalan, telefon trafikni tejash rejimida bo'lsa, ba'zi maslahatlar bajarilmaydi.

2. Brauzer resursni qanday topadi

2.1 Oldindan ko'ruvchi skaner

Brauzer HTML'ni tahlil qilayotganda, yonida yana bitta yordamchi ishlaydi. Uni oldindan ko'ruvchi skaner (preload scanner) deyishadi. U HTML matnini tez ko'z yugurtirib chiqadi va img, link, script teglarini topib, ularni oldindan yuklay boshlaydi.

Bu skaner juda foydali. Oddiy <img src="osh.jpg"> ni u o'zi topadi — hech qanday maslahat kerak emas.

Muammo shundaki, skaner faqat HTML matnida yozilgan narsani ko'radi. Quyidagilar undan yashiringan:

Mana shu yashirin resurslar uchun maslahatlar kerak. Qolgan hollarda brauzer o'zi yaxshi ishlaydi.

Tekshirib ko'ring: Sahifada <img src="banner.jpg" alt="..."> bor. Unga preload kerakmi?

3. preload — "buni hoziroq yukla"

3.1 Sintaksis

<link rel="preload" href="/assets/css/asosiy.css" as="style">

• rel="preload" — "bu fayl hozirgi sahifaga aniq kerak, darhol yuklay boshla".
• href — fayl manzili.
• as — faylning turi. Bu atribut majburiy.

as nega kerak? Brauzer har bir tur uchun alohida ustuvorlik (priority) beradi. CSS — eng yuqori, rasm — pastroq. Tur noma'lum bo'lsa, brauzer to'g'ri navbat bera olmaydi. Keyin haqiqiy so'rov kelganda, u oldindan yuklangan faylni tanimay, qaytadan yuklab olishi mumkin.

as ning asosiy qiymatlari:

3.2 Shrift uchun preload

preload ning eng klassik ishlatilishi — shrift. «Bahor» sayti uchun:

<link rel="preload" href="/assets/fonts/bahor.woff2"
      as="font" type="font/woff2" crossorigin>

Yangi ikki atribut bor:

• type="font/woff2" — fayl formati. Brauzer bu formatni qo'llamasa, faylni umuman yuklamaydi. Shunda trafik bekorga ketmaydi.
• crossorigin — shrift o'z serveringizda bo'lsa ham majburiy.

Oxirgisi ko'pchilikni hayron qoldiradi. Sababi: brauzer shriftlarni har doim maxsus "CORS rejimida" so'raydi (Origin va Same-Origin Policy darsida CORS g'oyasini ko'rgansiz). crossorigin siz preload oddiy rejimda so'raydi. Ikki so'rov rejimi mos kelmaydi. Natijada brauzer preload qilingan faylni ishlatmaydi va shriftni ikkinchi marta yuklaydi.

Shriftni CSS'da ulashni Web shriftlar darsida o'rganamiz. Hozircha bitta qoida: shrift preload qilinsa — crossorigin bilan.

Bo'sh joyni to'ldiring: shriftni preload qilganda as atributining qiymati bo'ladi.

3.3 Preload faqat yuklaydi

preload faylni yuklab, brauzer xotirasiga qo'yib qo'yadi. Lekin uni ishlatmaydi. Preload qilingan CSS sahifaga qo'llanmaydi, skript ishga tushmaydi.

Fayl baribir odatiy usulda ulanishi kerak: CSS — <link rel="stylesheet"> bilan, skript — <script> bilan. Preload shunchaki uni tezroq "yetkazib beradi".

Agar preload qilingan fayl sahifa yuklangandan keyin bir necha soniya ichida ishlatilmasa, Chrome konsolda ogohlantiradi:

The resource https://example.com/assets/fonts/bahor.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

Tarjimasi: "Bu resurs preload qilindi, lekin sahifa yuklangandan keyin bir necha soniya ichida ishlatilmadi. as qiymati to'g'riligini va preload ataylab qilinganini tekshiring." Ya'ni trafik bekorga ketdi. Sabab — yo fayl umuman kerak emas, yo as noto'g'ri, yo manzilda xato bor.

Tekshirib ko'ring: Nega "hamma CSS, JS va rasmlarni preload qilib qo'yaman — tezroq bo'ladi" degan fikr noto'g'ri?

4. preconnect va dns-prefetch — ulanishni oldindan ochish

4.1 Ulanishning narxi

To'liq sayohat darsida ko'rgan edik: yangi serverga birinchi so'rovdan oldin uch bosqich bor. DNS — domenning IP manzilini topish. TCP — ulanishni ochish. TLS — shifrlangan kanal kelishuvi.

Tez Wi-Fi'da bu 50–100 millisoniya. Sekin mobil internetda esa 300–600 millisoniyagacha yetadi. Faylning o'zi hali yuklanmagan — bu faqat "salomlashish".

«Bahor» sayti shriftni Google Fonts'dan olsa, brauzer ikkinchi serverga ham ulanishi kerak. U buni faqat CSS'ni o'qigandan keyin boshlaydi.

4.2 preconnect

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

rel="preconnect" — "shu serverga hoziroq ulanib qo'y: DNS, TCP va TLS'ni oldindan bajar". Keyin shrift so'ralganda, ulanish tayyor turgan bo'ladi.

Bu yerda ham crossorigin bor. Sabab o'sha: shriftlar CORS rejimida so'raladi. Brauzer CORS va oddiy so'rovlar uchun alohida ulanishlar ochadi. crossorigin siz ochilgan ulanish shrift uchun yaramaydi.

E'tibor bering: href da faqat origin — protokol va domen. Fayl yo'li yozilmaydi, chunki biz faylni emas, serverga ulanishni tayyorlayapmiz.

4.3 dns-prefetch

<link rel="dns-prefetch" href="https://analytics.example.com">

dns-prefetch — preconnect ning yengil varianti. U faqat birinchi bosqichni — DNS'ni bajaradi. TCP va TLS keyin qilinadi.

Qachon qaysi biri:

• preconnect — sahifa ochilishi bilan aniq kerak bo'ladigan 1–3 ta muhim server uchun (shrift, rasm CDN'i).
• dns-prefetch — kerak bo'lishi mumkin bo'lgan, lekin unchalik muhim bo'lmagan serverlar uchun (analitika, chat vidjeti).

4.4 Nega ko'p preconnect yomon

Har bir ochiq ulanish brauzer va telefon uchun yuk. Agar ulanish taxminan 10 soniya ichida ishlatilmasa, brauzer uni yopadi. Mehnat bekorga ketadi.

Shuning uchun preconnect ni 2–4 tadan oshirmang. Lighthouse ham preconnect lar juda ko'p bo'lsa yoki ishlatilmasa, "tejab ishlating" deb ogohlantiradi.

Tekshirib ko'ring: Sahifaning pastida, foydalanuvchi bossagina ochiladigan xarita vidjeti bor. Uning serveriga preconnect qo'yish kerakmi?

5. fetchpriority — navbatni o'zgartirish

Rasm unumdorligi darsida fetchpriority="high" ni rasmda ishlatgan edik. Bu atribut boshqa teglarda ham ishlaydi: link, script va img.

Uchta qiymati bor: high — oldinroq, low — keyinroq, auto — brauzer o'zi hal qiladi (standart).

Masalan, CSS'dagi fon rasmi — sahifaning asosiy (LCP) elementi bo'lsa:

<link rel="preload" href="/assets/images/banner.webp"
      as="image" fetchpriority="high">

Yoki ahamiyati past async skriptni orqaga surish:

<script src="/assets/js/chat.js" async fetchpriority="low"></script>

preload va fetchpriority farqi muhim. preload — qachon brauzer faylni bilishini o'zgartiradi: "hoziroq". fetchpriority — bilgan fayllari orasida navbatni o'zgartiradi: "bundan oldin".

fetchpriority 2024-yil oktabrdan Baseline "newly available" — to'rtta asosiy brauzerda bor (Veb standartlari darsidagi Baseline tushunchasi). Qo'llamaydigan eski brauzer atributni shunchaki e'tiborsiz qoldiradi — hech narsa buzilmaydi.

6. modulepreload — modullar uchun

Skriptlarni ulash darsida type="module" bilan tanishdingiz. Modul ichida boshqa modullar import qilinadi. Brauzer ularni faqat birinchi faylni yuklab o'qigandan keyin topadi. Zanjir uzun bo'lsa — kechikish ham uzun.

<link rel="modulepreload" href="/assets/js/menyu.js">
<script type="module" src="/assets/js/asosiy.js"></script>

modulepreload — modul uchun maxsus preload. U faylni yuklaydi, tahlil qiladi va ishga tayyorlab qo'yadi. Oddiy preload as="script" modul uchun noto'g'ri tanlov: so'rov rejimi mos kelmaydi va fayl ikki marta yuklanishi mumkin.

Amalda buni ko'pincha qo'lda yozmaysiz. Vite kabi yig'uvchi vositalar modulepreload qatorlarini avtomatik qo'shadi (Vite darsida ko'ramiz, hozir bilish shart emas).

modulepreload barcha asosiy brauzerlarda bor (Baseline widely available).

7. prefetch — keyingi sahifa uchun

7.1 G'oya

preload — hozirgi sahifa uchun. prefetch esa keyingi sahifa uchun.

«Bahor» menyusini ko'rgan mehmonlarning ko'pchiligi keyin "Stol bron qilish" sahifasiga o'tadi. Shu sahifaning CSS faylini oldindan olib qo'ysak bo'ladi:

<link rel="prefetch" href="/assets/css/bron.css">

rel="prefetch" — "bu fayl keyinroq kerak bo'lishi mumkin. Bo'sh vaqtingda, eng past navbat bilan yuklab qo'y". Fayl HTTP keshiga tushadi (HTTP sarlavhalari va kesh darsidagi kesh). Mehmon bron sahifasini ochganda, CSS internetdan emas, keshdan olinadi.

7.2 Cheklovlar

• Safari link rel="prefetch" ni hozircha qo'llamaydi (2026-yil sentabr holati). U yerda maslahat shunchaki e'tiborsiz qoldiriladi.
• Mehmon o'sha sahifaga o'tmasa, trafik bekor ketadi. Cheklangan mobil tarifdagi odam uchun bu haqiqiy pul.
• Hozirgi sahifaga kerak faylni prefetch qilmang — u eng past navbatda keladi va sahifa sekinlashadi. Hozirgi sahifa uchun — preload.

Tekshirib ko'ring: Ikki holatning qaysi birida preload, qaysi birida prefetch kerak? (a) Joriy sahifaning shrifti. (b) Ro'yxatdan o'tgandan keyin ochiladigan "Shaxsiy kabinet" sahifasining skripti.

8. Speculation Rules — keyingi sahifani butunlay tayyorlash

8.1 Nima bu

prefetch bitta faylni oladi. Undan kuchliroq usul bor: brauzer keyingi sahifani yashirincha to'liq ochib qo'yadi. Mehmon havolani bosganda, sahifa bir zumda paydo bo'ladi.

Bu imkoniyat Speculation Rules ("taxmin qoidalari") deyiladi. U script tegi ichida yoziladi, lekin ichidagi narsa JavaScript emas — JSON:

<script type="speculationrules">
{
  "prerender": [
    { "urls": ["/menyu/"] }
  ]
}
</script>

• type="speculationrules" — brauzerga "bu kod emas, qoidalar ro'yxati" deydi.
• "prerender" — sahifani to'liq tayyorlash: HTML, CSS, rasmlar va hatto skriptlarni ishga tushirish.
• "prefetch" — yengilroq: faqat keyingi sahifaning HTML'ini oladi.
• "urls" — qaysi sahifalar.

JSON qoidalari bu yerda ham qat'iy: faqat qo'shtirnoq, oxirida ortiqcha vergul yo'q. Bitta xato bo'lsa, brauzer butun qoidani e'tiborsiz qoldiradi.

8.2 Havolalarga qarab taxmin qilish

Har bir sahifani qo'lda sanash noqulay. Qoidani "saytdagi havolalar" uchun yozish mumkin:

<script type="speculationrules">
{
  "prefetch": [{
    "where": { "href_matches": "/*" },
    "eagerness": "moderate"
  }]
}
</script>

• "where": { "href_matches": "/*" } — saytimizdagi barcha ichki havolalar.
• "eagerness" — qanchalik "shoshqaloq" bo'lish. "moderate" — sichqoncha havola ustida qisqa to'xtaganda tayyorlaydi. "conservative" — faqat bosish boshlanganda. "eager" va "immediate" — ertaroq.

8.3 Ehtiyot bo'ling

• Brauzer mosligi. 2026-yil sentabr holatida bu faqat Chromium brauzerlarida ishlaydi: Chrome, Edge, Opera, Yandex Browser. Safari'da sinov bayrog'i ortida, Firefox'da hali yo'q. Boshqa brauzer script ni shunchaki o'tkazib yuboradi — sayt odatdagidek ishlaydi. Bu — sof qo'shimcha.
• Yon ta'sir. prerender sahifani haqiqatan ochadi. Agar havola "Hisobdan chiqish" yoki "Savatni tozalash" bo'lsa, taxmin qilib ochish katta muammo bo'ladi. Bunday havolalarni qoidadan chiqarib tashlash kerak. Buning uchun JSON'da "not" sharti bor, uni hujjatdan qarab yozasiz.
• Trafik. prerender og'ir. Uni faqat mehmon deyarli aniq o'tadigan 1–2 sahifa uchun ishlating.

Maslahat: WordPress 6.8 (2025-yil aprel) barcha saytlarga conservative rejimdagi prefetch qoidasini avtomatik qo'shdi. Cloudflare ham shunday imkoniyatni bitta tugma bilan beradi. Ya'ni bu "kelajak" emas — millionlab saytlarda hozir ishlayapti.

9. Qaysi maslahat qachon: umumiy jadval

Yana bitta kam uchraydigan atribut: blocking="render". U link, script va style ga qo'yiladi va "shu fayl kelmaguncha sahifani chizma" deydi. Hozircha asosan Chromium'da ishlaydi va juda kam kerak bo'ladi — faqat nomini bilib qo'ying.

10. «Bahor» sahifasining head i

Hammasini birlashtiramiz. Tartibga e'tibor bering: meta charset va viewport — birinchi (head anatomiyasi darsidagi qoida), keyin maslahatlar, keyin CSS.

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Menyu — Choyxona «Bahor»</title>

  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="dns-prefetch" href="https://analytics.example.com">

  <link rel="preload" href="/assets/fonts/bahor.woff2"
        as="font" type="font/woff2" crossorigin>

  <link rel="stylesheet" href="/assets/css/asosiy.css">
  <link rel="prefetch" href="/assets/css/bron.css">

  <script type="module" src="/assets/js/asosiy.js"></script>
</head>
<body>
  <main>
    <h1>Menyu</h1>
    <img src="/assets/images/osh.webp" alt="Qozonda tayyor to'y oshi"
         width="1200" height="800" fetchpriority="high">
    <p><a href="/bron/">Stol bron qilish</a></p>
  </main>
</body>
</html>

Har bir qator o'z o'rnida:

• preconnect — shrift serveri uchun, chunki shrift darhol kerak.
• dns-prefetch — analitika uchun: kerak, lekin shoshilinch emas.
• preload — o'z shriftimiz, CSS'da yashiringani uchun.
• prefetch — bron sahifasining CSS'i, keyingi qadam uchun.
• fetchpriority="high" — asosiy rasm uchun. Unga preload shart emas — rasm HTML'da yozilgan.

11. Natijani qanday tekshirish

Maslahat qo'yib, "tezlashdi" deb ishonish yetmaydi. O'lchash kerak:

1. Network paneli. Ustunlar sarlavhasiga o'ng tugma bosib, Priority ustunini yoqing. Har bir faylning navbati ko'rinadi: Highest, High, Low. Initiator ustuni esa faylni kim so'raganini ko'rsatadi.
2. Waterfall. Maslahatdan oldin va keyin shrift chizig'i qayerdan boshlanishini solishtiring. Throttling'da "Slow 4G" ni tanlasangiz, farq yaqqol ko'rinadi.
3. Console. "preloaded but not used" yoki "credentials mode does not match" ogohlantirishlari — xato belgisi.
4. Lighthouse. Hisobotda so'rovlar zanjiri va "qaysi serverga preconnect qilish kerak" degan tavsiyalar chiqadi. Auditni Lighthouse va PageSpeed darsida batafsil o'rganamiz.

12. Ko'p uchraydigan xatolar

12.1 Shrift preload'ida crossorigin yo'q

<!-- ❌ shrift ikki marta yuklanadi -->
<link rel="preload" href="/assets/fonts/bahor.woff2" as="font">

Konsolda:

A preload for 'https://example.com/assets/fonts/bahor.woff2' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

Tarjimasi: "Preload topildi, lekin ishlatilmadi, chunki so'rovning credentials rejimi mos emas. crossorigin atributiga qarang." Credentials — so'rov bilan cookie yuboriladimi-yo'qmi degan sozlama. Preload bitta rejimda, haqiqiy so'rov boshqa rejimda bo'lgani uchun brauzer ularni "ikki xil fayl" deb hisobladi. Tuzatish: crossorigin qo'shing.

12.2 as yo'q yoki noto'g'ri

as siz preload qilingan fayl ko'pincha ikki marta yuklanadi. as="script" bilan modulni preload qilish ham xato — modul uchun modulepreload. Tuzatish: fayl turiga mos as qo'ying.

12.3 Hamma narsani preload qilish

10 ta preload — 10 ta "shoshilinch" fayl. Asosiy CSS navbatda qoladi va sahifa kechroq chiziladi. Tuzatish: preload faqat 1–3 ta, brauzer o'zi kech topadigan faylga.

12.4 preconnect bilan bir qatorda fayl yo'li

<link rel="preconnect" href="https://fonts.gstatic.com/s/bahor.woff2"> — ishlaydi, lekin chalg'itadi. preconnect faqat origin'ni ishlatadi, qolgani e'tiborsiz qoldiriladi. Tuzatish: faqat https://fonts.gstatic.com deb yozing.

12.5 Xavfli havolalarni prerender qilish

Speculation Rules'da "barcha havolalar" deb yozib, /chiqish havolasini unutish. Mehmon sichqonchani havola ustiga olib borgan zahoti hisobdan chiqib ketishi mumkin. Tuzatish: o'zgartiradigan harakatlarni qoidadan chiqarib tashlang. Bunday harakatlar umuman havola emas, forma tugmasi bo'lishi kerak (Tugma yoki havola darsidagi qoida).

13. Mashqlar

1-mashq (oson): Maslahatni tanlang

Har bir vaziyat uchun mos maslahatni yozing: preload, preconnect, dns-prefetch yoki prefetch.

1. Sahifa shrifti CSS ichida ulangan va o'z serveringizda turibdi.
2. Barcha rasmlar https://img.example.com CDN'idan keladi va birinchi ekranda ham bor.
3. Mehmonlarning 80 foizi menyudan keyin "Bron" sahifasiga o'tadi.
4. Sahifa pastida ixtiyoriy izohlar vidjeti bor, u boshqa serverdan yuklanadi.

2-mashq (o'rta): Xatolarni tuzating

Bu head qismida uchta xato bor. Topib, tuzating.

<link rel="preload" href="/assets/fonts/bahor.woff2"
      type="font/woff2" crossorigin>
<link rel="preload" as="script" href="/assets/js/menyu.js">
<script type="module" src="/assets/js/menyu.js"></script>
<link rel="prefetch" href="/assets/css/asosiy.css">
<link rel="stylesheet" href="/assets/css/asosiy.css">

Ishora: har bir qatorga "bu fayl hozirgi sahifaga kerakmi, qaysi turdagi fayl?" degan savolni bering.

<link rel="preload" href="/assets/fonts/bahor.woff2"
      as="font" type="font/woff2" crossorigin>
<link rel="modulepreload" href="/assets/js/menyu.js">
<script type="module" src="/assets/js/menyu.js"></script>
<link rel="stylesheet" href="/assets/css/asosiy.css">

3-mashq (qiyin): «Bahor» sahifasini tezlashtiring

«Bahor»ning "Tadbirlar" sahifasi quyidagi resurslardan foydalanadi:

• /assets/css/asosiy.css — asosiy uslublar.
• Shrift https://fonts.gstatic.com dan, CSS orqali ulanadi.
• Banner rasmi CSS'da fon sifatida yozilgan: /assets/images/tadbir-banner.webp. U sahifaning eng katta elementi.
• https://chat.example.com dan yuklanadigan chat vidjeti — async skript, muhim emas.
• Mehmonlar ko'pincha keyin /bron/ sahifasiga o'tadi.

Shu sahifa uchun to'liq head yozing. Har bir maslahat yoniga HTML izohi bilan sababini yozing.

<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tadbirlar — Choyxona «Bahor»</title>

  <!-- Shrift serveri darhol kerak: ulanishni oldindan ochamiz -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- Chat muhim emas: faqat DNS -->
  <link rel="dns-prefetch" href="https://chat.example.com">

  <!-- Banner CSS'da yashiringan va LCP: oldindan, yuqori navbat -->
  <link rel="preload" href="/assets/images/tadbir-banner.webp"
        as="image" fetchpriority="high">

  <link rel="stylesheet" href="/assets/css/asosiy.css">

  <!-- Chat skripti: navbatni pasaytiramiz -->
  <script src="https://chat.example.com/vidjet.js" async
          fetchpriority="low"></script>

  <!-- Keyingi ehtimoliy sahifa (Chromium'da) -->
  <script type="speculationrules">
  {
    "prefetch": [{ "urls": ["/bron/"] }]
  }
  </script>
</head>
<body>
  <main>
    <h1>Tadbirlar</h1>
    <p><a href="/bron/">Stol bron qilish</a></p>
  </main>
</body>
</html>

14. Real ishda

• Freymvorklar buni o'zi qiladi. Next.js shriftlarni o'zi preload qiladi, Vite modulepreload qo'shadi. Lekin ular nima qilayotganini tushunmasangiz, noto'g'ri sozlamani ham topa olmaysiz.
• HTTP sarlavhasida. Xuddi shu maslahatlar server javobida Link sarlavhasi bilan ham yuboriladi. Yana tezroq usul — 103 Early Hints: server HTML hali tayyor bo'lmasa ham, brauzerga "preconnect qil, preload qil" deb oldindan xabar yuboradi.
• Core Web Vitals. LCP'ni yaxshilash bo'yicha Google tavsiyalarining yarmi — resurs maslahatlari. Bu ko'rsatkichlarni Performance API va Core Web Vitals darsida chuqur o'rganamiz.
• Intervyuda so'raladi: "preload va prefetch farqi nima?", "Shrift preload'ida nega crossorigin kerak?". Bu darsdan keyin ikkalasiga ham javob bera olasiz.

Xulosa

• Resurs maslahati — brauzerga "bu kerak bo'ladi" degan oldindan eslatma; u buyruq emas.
• preload — hozirgi sahifaning kech topiladigan fayli uchun; as majburiy, shriftga crossorigin ham.
• preconnect — 1–3 ta muhim begona server; dns-prefetch — arzon zaxira varianti.
• prefetch va Speculation Rules — keyingi sahifa uchun; Safari'da prefetch yo'q, Speculation Rules faqat Chromium'da.
• fetchpriority navbatni o'zgartiradi, modulepreload modul zanjirini tezlashtiradi.
• Har bir maslahatni Network panelida o'lchang: ortiqcha maslahat — zarar.

Keyingi dars: Strukturalangan ma'lumot: JSON-LD va schema.org — Google'ga «Bahor» choyxona ekanini, manzili va ish vaqtini mashina tilida aytishni o'rganamiz.

Manbalar

• MDN: "rel=preload", "rel=preconnect", "rel=dns-prefetch", "rel=prefetch", "rel=modulepreload", "fetchpriority" — developer.mozilla.org
• MDN: "Speculation Rules API" — developer.mozilla.org
• web.dev: "Preload critical assets", "Establish network connections early", "Optimize resource loading with the Fetch Priority API" — web.dev
• Chrome for Developers: "Prerender pages in Chrome for instant page navigations" — developer.chrome.com
• caniuse.com: "Resource Hints: prefetch", "Speculation Rules" — caniuse.com