# Cache, CDN va web performance

> Sayt tezligi nimaga bog'liq? Brauzer cache'i, CDN, siqish, lazy loading va Core Web Vitals orqali web performance'ni o'lchash va yaxshilash asoslari.

Manba: https://learncode.uz/web-dasturlash/cache-cdn-performance/
Sana: 2026-05-11

![Brauzer cache va yaqin CDN serveri orqali web sahifani tezroq yuklashi](https://learncode.uz/images/web-dasturlash/cache-cdn-performance-hero.webp)

*Tez sayt kamroq va kichikroq ma'lumot yuklaydi, foydalanuvchiga yaqin xizmatdan foydalanadi va asosiy kontentni ustuvor qiladi.*

Sayt sizning kompyuteringizda tez ochilishi uning hamma foydalanuvchida tez
ishlashini anglatmaydi. Telefon kuchsizroq, internet sekinroq yoki server
uzoqlikda bo'lishi mumkin. **Web performance** — sahifaning qanchalik tez
yuklanishi, javob berishi va vizual barqarorligini o'lchash hamda yaxshilashdir.

## Vaqt qayerga ketadi

Brauzer manzilni ochganda DNS, tarmoq ulanishi, TLS, server javobi, fayllarni
yuklash va sahifani chizish bosqichlaridan o'tadi. Har bir bosqich kutish
vaqtiga qo'shiladi.

Ko'p uchraydigan sekinlik sabablari:

- server javobining kechikishi;
- juda katta rasm, video yoki JavaScript fayli;
- bir-birini kutadigan ko'p tarmoq so'rovi;
- brauzer asosiy oqimini uzoq band qiladigan JavaScript;
- o'lchami berilmagan rasm sabab sahifaning sakrashi;
- keraksiz shrift, kuzatuv skripti va uchinchi tomon vidjetlari.

## Cache — tayyor nusxadan foydalanish

**Cache** oldin olingan natijani vaqtincha saqlab, bir xil ishni takrorlamaslikka
yordam beradi. Brauzer CSS, JavaScript va rasmlarni disk yoki xotirada saqlashi
mumkin. Server esa hisoblangan javob yoki baza so'rovi natijasini cache qilishi
mumkin.

HTTP javobidagi `Cache-Control` headeri brauzer va vositachi cache'larga
natijani qancha va qanday saqlash mumkinligini bildiradi. Fayl nomida kontent
xeshi bo'lsa, masalan `app.a8f3.js`, uzoq cache xavfsizroq: kod o'zgarganda
yangi nom paydo bo'ladi.

> **Hamma narsani cache qilib bo'lmaydi**
>
> Shaxsiy profil, bank ma'lumoti yoki tez-tez o'zgaradigan javobni noto'g'ri
> umumiy cache qilish boshqa foydalanuvchiga ma'lumot chiqishiga olib kelishi
> mumkin. Cache qoidasi kontent turi va maxfiyligiga qarab belgilanadi.

## CDN — kontentni yaqinroqdan berish

**CDN** (Content Delivery Network) — turli hududlarda joylashgan serverlar
tarmog'i. Statik fayl yoki cache qilingan sahifa foydalanuvchiga yaqin tugundan
berilsa, tarmoq masofasi va markaziy server yuklamasi kamayadi.

CDN asl serverni butunlay almashtirishi shart emas. U ko'pincha origin server
oldida turadi: tayyor nusxa bo'lsa darhol beradi, bo'lmasa origin'dan olib,
qoidaga muvofiq saqlaydi.

![Foydalanuvchi yaqin CDN tugunidan cache javob olishi yoki CDN origin serverga murojaat qilishi](https://learncode.uz/images/web-dasturlash/cache-cdn-oqimi.webp)

*CDN cache'da nusxa bo'lsa uni yaqin tugundan beradi, aks holda origin serverdan olib keyingi so'rovlar uchun saqlashi mumkin.*

## Core Web Vitals

Tezlikni faqat "necha soniyada to'liq yuklandi" bilan o'lchash yetmaydi.
Core Web Vitals foydalanuvchi his qiladigan uch jihatni kuzatadi:

| Ko'rsatkich | Nimani o'lchaydi |
|---|---|
| **LCP** | Asosiy katta kontent qachon ko'rindi |
| **INP** | Foydalanuvchi harakatiga sahifa qanchalik tez javob berdi |
| **CLS** | Yuklanish paytida elementlar qancha siljidi |

Bu ko'rsatkichlar laboratoriya testida va haqiqiy foydalanuvchi ma'lumotida
farq qilishi mumkin. Optimallashtirishdan oldin o'lchash, keyin o'zgarish
natijasini qayta o'lchash kerak.

![LCP asosiy kontent tezligini, INP javob tezligini va CLS vizual barqarorlikni o'lchashi](https://learncode.uz/images/web-dasturlash/core-web-vitals.webp)

*LCP, INP va CLS tezlik, interaktiv javob va vizual barqarorlikni foydalanuvchi nuqtai nazaridan o'lchaydi.*

## Birinchi optimallashtirishlar

- Rasmlarni mos o'lcham va WebP/AVIF kabi formatda bering.
- Ko'rish maydonidan pastdagi rasmlarga lazy loading ishlating.
- JavaScriptni kichraytiring va faqat kerakli kodni yuboring.
- CSS va JS fayllarini siqing; serverda Brotli yoki gzip ishlating.
- Rasmga `width` va `height` berib, layout sakrashini kamaytiring.
- Muhim kontentni uchinchi tomon skriptlaridan oldin yuklang.
- DevTools Network, Performance va Lighthouse hisobotlarini tekshiring.

> **O'lchamasdan optimallashtirmang**
>
> Sahifa sekin ko'rinsa, avval Network bo'limida eng katta va eng uzoq so'rovni
> toping. 4 MB hero rasm bor bo'lsa, frameworkni almashtirishdan oldin shu rasmni
> to'g'ri o'lcham va formatga keltirish kattaroq natija berishi mumkin.

## Qisqacha xulosa

- Performance tarmoq, server, fayl hajmi va brauzer ishiga bog'liq.
- Cache bir xil natijani qayta yuklash yoki hisoblashni kamaytiradi.
- CDN kontentni foydalanuvchiga yaqin tugundan yetkazadi.
- LCP, INP va CLS foydalanuvchi his qiladigan asosiy sifatlarni o'lchaydi.
- Avval o'lchang, eng katta muammoni toping, keyin qayta o'lchang.

Keyingi darsda [web accessibility](https://learncode.uz/web-dasturlash/web-accessibility) — saytni
ko'proq odam va ko'proq qurilma uchun ishlaydigan qilishni ko'ramiz.