Resurs ishoralari yordamida veb-sayt tezligini oshirish: Preload, Prefetch va Preconnect

Bugungi tezkor raqamli dunyoda veb-sayt tezligi juda muhim. Foydalanuvchilar veb-saytlarning tez yuklanishini va darhol javob berishini kutishadi. Sekin yuklanish vaqtlari yomon foydalanuvchi tajribasiga, yuqori chiqib ketish ko'rsatkichlariga va natijada biznesni yo'qotishga olib kelishi mumkin. Resurs ishoralari - bu dasturchilarga qaysi resurslar muhimligini va ularga qanday ustuvorlik berish kerakligini brauzerga aytib, veb-saytning yuklanish vaqtini optimallashtirishga yordam beradigan kuchli vositalardir. Ushbu maqolada uchta asosiy resurs ishorasi: preload, prefetch va preconnect ko'rib chiqiladi va ularni amalga oshirish uchun amaliy misollar keltiriladi.

Resurs ishoralarini tushunish

Resurs ishoralari brauzerga kelajakda veb-sahifaga kerak bo‘ladigan resurslar haqida ma’lumot beruvchi direktivalardir. Ular dasturchilarga muhim resurslar haqida brauzerni oldindan xabardor qilish imkonini beradi, bu esa ularni odatdagidan ertaroq yuklash yoki ularga ulanish imkonini beradi. Bu yuklanish vaqtini sezilarli darajada qisqartirishi va seziladigan unumdorlikni yaxshilashi mumkin.

Uchta asosiy resurs ishoralari:

Preload: Dastlabki sahifa yuklanishi uchun zarur bo'lgan muhim resurslarni yuklaydi.
Prefetch: Kelajakdagi navigatsiyalar yoki o'zaro ta'sirlar uchun kerak bo'lishi mumkin bo'lgan resurslarni yuklaydi.
Preconnect: Muhim uchinchi tomon serverlariga erta ulanishlarni o'rnatadi.

Preload: Muhim resurslarga ustuvorlik berish

Preload nima?

Preload - bu joriy navigatsiya uchun zarur bo'lgan resursni imkon qadar tezroq yuklashni brauzerga aytish imkonini beruvchi deklarativ yuklash usulidir. Bu, ayniqsa, brauzer tomonidan kech aniqlanadigan resurslar, masalan, CSS yoki JavaScript orqali yuklanadigan rasmlar, shriftlar, skriptlar yoki uslublar jadvallari uchun foydalidir. Ushbu resurslarni oldindan yuklash orqali siz ularning renderlashni bloklashining oldini olishingiz va veb-saytingizning seziladigan yuklanish tezligini oshirishingiz mumkin.

Preload'dan qachon foydalanish kerak

preload'dan quyidagilar uchun foydalaning:

Shriftlar: Maxsus shriftlarni erta yuklash uslublanmagan matn miltillashini (FOUT) yoki ko'rinmas matn miltillashini (FOIT) oldini oladi.
Tasvirlar: Ekranning birinchi ko‘rinishidagi tasvirlarga ustuvorlik berish ularning tez yuklanishini ta'minlab, dastlabki foydalanuvchi tajribasini yaxshilaydi.
Skriptlar va uslublar jadvallari: Muhim CSS yoki JavaScript fayllarini erta yuklash renderlashni bloklashning oldini oladi.
Modullar va Veb Ishchilar (Web Workers): Modullarni yoki veb ishchilarni oldindan yuklash ilovangizning javob berish tezligini yaxshilashi mumkin.

Preload'ni qanday amalga oshirish kerak

Siz preload'ni HTML hujjatingizning <head> qismidagi <link> tegi yordamida amalga oshirishingiz mumkin:

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/styles/critical.css" as="style">
<link rel="preload" href="/scripts/app.js" as="script">
<link rel="preload" href="/images/hero.jpg" as="image">

Tushuntirish:

rel="preload": Brauzerga resursni oldindan yuklashi kerakligini bildiradi.
href="/path/to/resource": Oldindan yuklanadigan resursning URL manzili.
as="type": Oldindan yuklanayotgan resurs turini belgilaydi (masalan, font, style, script, image). as atributi majburiy bo'lib, brauzerning resursni to'g'ri ustuvorlashtirishi va qayta ishlashi uchun juda muhim. To'g'ri as qiymatidan foydalanish brauzerning to'g'ri Kontent Xavfsizlik Siyosatini (CSP) qo'llashini va to'g'ri Accept sarlavhasini yuborishini ta'minlaydi.
type="mime/type": (Ixtiyoriy, lekin tavsiya etiladi) Resursning MIME turini belgilaydi. Bu brauzerga, ayniqsa shriftlar uchun to'g'ri resurs formatini tanlashga yordam beradi.
crossorigin="anonymous": (Boshqa manbadan yuklanadigan shriftlar uchun talab qilinadi) So'rov uchun CORS rejimini belgilaydi. Agar siz shriftlarni CDN'dan yuklayotgan bo'lsangiz, sizga ushbu atribut kerak bo'ladi.

Misol: Shriftni oldindan yuklash

Tasavvur qiling, veb-saytingizda 'OpenSans' deb nomlangan maxsus shrift ishlatiladi. Oldindan yuklashsiz, brauzer bu shriftni faqat CSS faylini tahlil qilgandan keyin topadi. Bu matnni to'g'ri shrift bilan renderlashda kechikishga olib kelishi mumkin. Shriftni oldindan yuklash orqali siz bu kechikishni bartaraf etishingiz mumkin.

<link rel="preload" href="/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Misol: Muhim CSS faylini oldindan yuklash

Agar veb-saytingizda dastlabki ko'rinishni renderlash uchun zarur bo'lgan muhim CSS fayli bo'lsa, uni oldindan yuklash seziladigan unumdorlikni sezilarli darajada yaxshilashi mumkin.

<link rel="preload" href="/styles/critical.css" as="style">

Preload uchun eng yaxshi amaliyotlar

Muhim resurslarga ustuvorlik bering: Faqat dastlabki sahifa yuklanishi uchun zarur bo'lgan resurslarni oldindan yuklang. Preload'dan haddan tashqari ko'p foydalanish unumdorlikka salbiy ta'sir ko'rsatishi mumkin.
To'g'ri as atributidan foydalaning: Brauzer resursni to'g'ri ishlashini ta'minlash uchun har doim to'g'ri as atributini belgilang.
type atributini qo'shing: Brauzerga to'g'ri resurs formatini tanlashga yordam berish uchun type atributini qo'shing.
Boshqa manbadagi shriftlar uchun crossorigin'dan foydalaning: Boshqa manbadan shriftlarni yuklayotganda, crossorigin atributini qo'shganingizga ishonch hosil qiling.
Unumdorlikni sinab ko'ring: Preload'ning yuklanish vaqtini haqiqatan ham yaxshilayotganiga ishonch hosil qilish uchun uning unumdorlikka ta'sirini har doim sinab ko'ring. Ta'sirni o'lchash uchun Google PageSpeed Insights yoki WebPageTest kabi vositalardan foydalaning.

Prefetch: Kelajakdagi ehtiyojlarni oldindan bilish

Prefetch nima?

Prefetch - bu brauzerga kelajakdagi navigatsiyalar yoki o'zaro ta'sirlar uchun kerak bo'lishi mumkin bo'lgan resurslarni yuklashni aytadigan resurs ishorasidir. Joriy sahifa uchun zarur bo'lgan resurslarga e'tibor qaratadigan preload'dan farqli o'laroq, prefetch foydalanuvchining keyingi harakatini oldindan biladi. Bu, ayniqsa, keyingi sahifalar yoki komponentlarning yuklanish tezligini oshirish uchun foydalidir.

Prefetch'dan qachon foydalanish kerak

prefetch'dan quyidagilar uchun foydalaning:

Keyingi sahifa resurslari: Agar foydalanuvchining keyingi qadamda ma'lum bir sahifaga o'tishini bilsangiz, uning resurslarini oldindan yuklang.
Foydalanuvchi o'zaro ta'sirlari uchun resurslar: Agar foydalanuvchi o'zaro ta'siri ma'lum resurslarni yuklashni boshlasa (masalan, modal oyna, forma), o'sha resurslarni oldindan yuklang.
Boshqa sahifalardagi rasmlar va aktivlar: Foydalanuvchining tashrif buyurishi ehtimoli bo'lgan boshqa sahifalarda ishlatiladigan rasmlar yoki aktivlarni oldindan yuklang.

Prefetch'ni qanday amalga oshirish kerak

Siz prefetch'ni HTML hujjatingizning <head> qismidagi <link> tegi yordamida amalga oshirishingiz mumkin:

<link rel="prefetch" href="/page2.html">
<link rel="prefetch" href="/images/product.jpg">
<link rel="prefetch" href="/scripts/modal.js">

Tushuntirish:

rel="prefetch": Brauzerga resursni oldindan yuklashi kerakligini bildiradi.
href="/path/to/resource": Oldindan yuklanadigan resursning URL manzili.

Misol: Keyingi sahifa resurslarini oldindan yuklash

Agar veb-saytingizda ko'p bosqichli forma kabi aniq foydalanuvchi oqimi mavjud bo'lsa, foydalanuvchi joriy bosqichda bo'lganida keyingi bosqich uchun resurslarni oldindan yuklashingiz mumkin.

<link rel="prefetch" href="/form/step2.html">

Misol: Modal oyna uchun resurslarni oldindan yuklash

Agar veb-saytingiz ochilganda qo'shimcha resurslarni yuklaydigan modal oynadan foydalansa, silliq foydalanuvchi tajribasini ta'minlash uchun ushbu resurslarni oldindan yuklashingiz mumkin.

<link rel="prefetch" href="/scripts/modal.js">
<link rel="prefetch" href="/styles/modal.css">

Prefetch uchun eng yaxshi amaliyotlar

Tejamkorlik bilan foydalaning: Prefetch'dan tejamkorlik bilan foydalanish kerak, chunki foydalanuvchi oldindan yuklangan resurslarga muhtoj bo'lmasa ham, u tarmoq kengligi va resurslarni iste'mol qilishi mumkin.
Ehtimoliy navigatsiyalarga ustuvorlik bering: Eng ko'p sodir bo'lishi mumkin bo'lgan sahifalar yoki o'zaro ta'sirlar uchun resurslarni oldindan yuklang.
Tarmoq sharoitlarini hisobga oling: Prefetch barqaror va tez internet aloqasi bo'lgan foydalanuvchilar uchun eng mos keladi. Sekin yoki limitli aloqadagi foydalanuvchilar uchun katta resurslarni oldindan yuklashdan saqlaning. Foydalanuvchining aloqa turini aniqlash va shunga mos ravishda oldindan yuklashni sozlash uchun Tarmoq Ma'lumotlari API'sidan foydalanishingiz mumkin.
Unumdorlikni kuzatib boring: Prefetch'ning veb-saytingiz unumdorligiga ta'sirini kuzatib boring va uning aniq foyda keltirayotganiga ishonch hosil qiling.
Dinamik Prefetch'dan foydalaning: Foydalanuvchi xatti-harakatlari va tahliliy ma'lumotlarga asoslanib, oldindan yuklashni dinamik ravishda amalga oshiring. Masalan, hozirda joriy sahifada bo'lgan foydalanuvchilar tomonidan tez-tez tashrif buyuriladigan sahifalar uchun resurslarni oldindan yuklang.

Preconnect: Erta ulanishlarni o'rnatish

Preconnect nima?

Preconnect - bu muhim uchinchi tomon serverlariga erta ulanishlarni o'rnatish imkonini beruvchi resurs ishorasidir. Ulanishni o'rnatish bir necha bosqichlarni o'z ichiga oladi, jumladan DNS qidiruvi, TCP ulanishi va TLS kelishuvi. Ushbu bosqichlar ushbu serverlardan resurslarni yuklashga sezilarli kechikish qo'shishi mumkin. Preconnect sizga ushbu bosqichlarni fonda boshlash imkonini beradi, shunda brauzer serverdan resurs yuklashi kerak bo'lganda, ulanish allaqachon o'rnatilgan bo'ladi.

Preconnect'dan qachon foydalanish kerak

preconnect'dan quyidagilar uchun foydalaning:

Uchinchi tomon serverlari: Shriftlar, CDNlar, APIlar yoki veb-saytingiz tayanadigan boshqa har qanday resurslarni joylashtirgan serverlar.
Tez-tez ishlatiladigan serverlar: Veb-saytingiz tomonidan tez-tez kiriladigan serverlar.

Preconnect'ni qanday amalga oshirish kerak

Siz preconnect'ni HTML hujjatingizning <head> qismidagi <link> tegi yordamida amalga oshirishingiz mumkin:

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

Tushuntirish:

rel="preconnect": Brauzerga serverga oldindan ulanishi kerakligini bildiradi.
href="https://example.com": Oldindan ulaniladigan serverning URL manzili.
crossorigin: (Ixtiyoriy, lekin CORS bilan yuklangan resurslar uchun talab qilinadi) Ulanish CORS talab qilishini bildiradi.

Misol: Google Fonts'ga oldindan ulanish

Agar veb-saytingiz Google Fonts'dan foydalansa, https://fonts.gstatic.com ga oldindan ulanish shrift yuklanishining kechikishini sezilarli darajada kamaytirishi mumkin.

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

Bu yerda `crossorigin` atributi juda muhim, chunki Google Fonts shriftlarni yetkazib berish uchun CORS'dan foydalanadi.

Misol: CDN'ga oldindan ulanish

Agar veb-saytingiz statik aktivlarni yetkazib berish uchun CDN'dan foydalansa, CDN xost nomiga oldindan ulanish ushbu aktivlarni yuklash kechikishini kamaytirishi mumkin.

<link rel="preconnect" href="https://cdn.example.com">

Preconnect uchun eng yaxshi amaliyotlar

Oqilona foydalaning: Juda ko'p serverlarga oldindan ulanish aslida unumdorlikni pasaytirishi mumkin, chunki brauzerning ulanishlarni o'rnatish uchun resurslari cheklangan.
Muhim serverlarga ustuvorlik bering: Veb-saytingiz unumdorligi uchun eng muhim bo'lgan serverlarga oldindan ulaning.
DNS-Prefetch'ni ko'rib chiqing: To'liq oldindan ulanishga hojat bo'lmagan, lekin baribir DNS'ni erta hal qilishni xohlagan serverlar uchun <link rel="dns-prefetch" href="https://example.com"> dan foydalanishni ko'rib chiqing. DNS-prefetch faqat DNS qidiruvini amalga oshiradi, bu esa to'liq oldindan ulanishdan ko'ra kamroq resurs talab qiladi.
Unumdorlikni sinab ko'ring: Har doim preconnect'ning unumdorlikka ta'sirini sinab ko'ring va uning aniq foyda keltirayotganiga ishonch hosil qiling.
Boshqa resurs ishoralari bilan birlashtiring: Optimal unumdorlikka erishish uchun preconnect'ni preload va prefetch bilan birgalikda ishlating. Masalan, shriftlaringizni joylashtirgan serverga oldindan ulaning va keyin shrift fayllarini oldindan yuklang.

Optimal unumdorlik uchun resurs ishoralarini birlashtirish

Resurs ishoralarining haqiqiy kuchi ularni strategik jihatdan birlashtirishda yotadi. Mana amaliy misol:

Tasavvur qiling, veb-sayt CDN'da joylashtirilgan maxsus shriftdan foydalanadi va muhim JavaScript faylini yuklaydi.

CDN'ga oldindan ulanish: Shrift va JavaScript faylini joylashtirgan CDN'ga erta ulanish o'rnating.
```
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
```

Shriftni oldindan yuklash: FOUT'ning oldini olish uchun shrift yuklanishiga ustuvorlik bering.

<link rel="preload" href="https://cdn.example.com/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

JavaScript faylini oldindan yuklash: Kerak bo'lganda mavjud bo'lishini ta'minlash uchun JavaScript faylini yuklashga ustuvorlik bering.
```
<link rel="preload" href="https://cdn.example.com/scripts/app.js" as="script">
```

Resurs ishoralarini tahlil qilish uchun vositalar

Bir nechta vositalar resurs ishoralaringizning samaradorligini tahlil qilishga yordam beradi:

Google PageSpeed Insights: Veb-saytingiz unumdorligini optimallashtirish bo'yicha tavsiyalar beradi, shu jumladan resurs ishoralaridan foydalanish.
WebPageTest: Veb-saytingiz unumdorligini turli joylardan va tarmoq sharoitlaridan sinab ko'rish imkonini beradi.
Chrome DevTools: Chrome DevTools'dagi Tarmoq (Network) paneli resurs yuklanish vaqtini ko'rsatadi va optimallashtirish imkoniyatlarini aniqlashga yordam beradi.
Lighthouse: Veb-sahifalar sifatini yaxshilash uchun avtomatlashtirilgan vosita. U unumdorlik, maxsus imkoniyatlar, progressiv veb-ilovalar, SEO va boshqalar uchun auditlarga ega.

Keng tarqalgan xatolar va ulardan qanday qochish kerak

Resurs ishoralarini haddan tashqari ko'p ishlatish: Juda ko'p resurs ishoralaridan foydalanish unumdorlikka salbiy ta'sir ko'rsatishi mumkin. Eng muhim resurslarga e'tibor qarating.
Noto'g'ri as atributi: Preload uchun noto'g'ri as atributidan foydalanish resursning to'g'ri yuklanishiga to'sqinlik qilishi mumkin.
CORS'ni e'tiborsiz qoldirish: Boshqa manbadan resurslarni yuklashda crossorigin atributini qo'shmaslik yuklash xatolariga olib kelishi mumkin.
Unumdorlikni sinab ko'rmaslik: Resurs ishoralarining aniq foyda keltirayotganiga ishonch hosil qilish uchun ularning unumdorlikka ta'sirini har doim sinab ko'ring.
Noto'g'ri yo'llar: Resurs ishoralari uchun ko'rsatilgan barcha fayl yo'llari va URL manzillari to'g'riligini ikki marta tekshiring, aks holda bu xatolikka olib keladi.

Resurs ishoralarining kelajagi

Resurs ishoralari doimiy ravishda rivojlanib bormoqda, brauzer spetsifikatsiyalariga yangi xususiyatlar va yaxshilanishlar qo'shilmoqda. Resurs ishoralaridagi so'nggi o'zgarishlardan xabardor bo'lish veb-saytingiz unumdorligini yanada optimallashtirishga yordam beradi. Masalan, modulepreload JavaScript modullarini oldindan yuklash uchun maxsus ishlab chiqilgan yangi resurs ishorasidir. Shuningdek, resurs ishoralari uchun `priority` atributi resursning boshqa resurslarga nisbatan ustuvorligini belgilashga imkon beradi. Ushbu xususiyatlar uchun brauzer qo'llab-quvvatlashi hali ham rivojlanmoqda, shuning uchun ularni amalga oshirishdan oldin muvofiqlikni tekshiring.

Xulosa

Resurs ishoralari veb-sayt yuklanish vaqtini optimallashtirish va foydalanuvchi tajribasini yaxshilash uchun kuchli vositalardir. preload, prefetch va preconnect'dan strategik foydalanish orqali siz brauzerni muhim resurslar haqida oldindan xabardor qilishingiz, kechikishni kamaytirishingiz va veb-saytingizning seziladigan unumdorligini oshirishingiz mumkin. Muhim resurslarga ustuvorlik berishni, resurs ishoralaridan oqilona foydalanishni va o'zgarishlaringizning unumdorlikka ta'sirini har doim sinab ko'rishni unutmang. Ushbu maqolada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz veb-saytingiz unumdorligini sezilarli darajada yaxshilashingiz va butun dunyodagi foydalanuvchilaringiz uchun yaxshiroq tajriba taqdim etishingiz mumkin.