Lazy-loading va UX-tezlashtirish

1) Maqsad va prinsiplar

• TTI/LCPni keskin yo’l hisobiga qisqartirish.
• Sxemani (past CLS) oldindan aytib boʻladigan oʻlchamlarda barqarorlashtirish.
• Batareya va trafikni mobailda saqlash.
• Konvertatsiyani yuklash: foydalanuvchi harakatni oldindan koʻradi.

Printsiplar: ustuvorlik → taraqqiyot → bashorat qilish. Avval tanqidiy kontent, so’ngra progressiv to’ldirish va yaxshilanishlarni yuklash.

2) Renderingning tanqidiy yo’li

Tanqidiy HTML: «above-the-fold» belgisini birdaniga bering.
Kritik CSS: inline ≤ 10-15 KB; qolganlari -’media = «print»’+ swap/doza yuklash.
JS bloker sifatida:’defer ’/’ async’, changlarga bo’lish, mantiqni yo’nalishlar bo’yicha yuklash.
Shriftlar:’font-display: swap’optional’, WOFF2 oldindan yuklash, tizimli fallback’lar.

3) Tarmoq resurslarini ustuvorlashtirish

CDN/shriftlarga/rasmlarga preconnect (oldindan TCP + TLS).
Uchinchi domenlar uchun DNS-prefetch.
Tanqidiy rasmlar/shriftlar/skriptlarni preload.
Priority Hints (’importance = "high’low’,’fetchpriority =" high "’hero-tasvir uchun).
HTTP/3/QUIC: kamroq latentlik; CDN-edge foydalanuvchiga yaqinroq.
Kesh siyosati:’immutable’versionlangan assetalar uchun; Toʻgʻri ETag/Last-Modified.

4) Progressive Rendering va yuklash holatlari

Spinnerlar o’rniga Skeletons/Shimmerlar: «sakrashsiz» vizual taraqqiyot.
Belgilangan o’lchamdagi Placeholders (kartochkalar, miniatyuralar) - nol CLS.
Streaming/Chunked HTML: tezda karkas bering va kontent bilan toʻldiring.
Optimistic UI (ehtiyotkorlik bilan): tezkor harakat va keyinchalik validatsiya.

5) Media kontentning Lazy-loading

Rasmlar:’loading =» lazy»’,’decoding =» async»’, AVIF/WebP formatlari (JPEG/PNG follbeki).
Responsive:’srcset ’/’ sizes’turli xil DPR/kengliklar ostida; 1 × yetadigan 3 × yuklamang.
Taxminiy balandlik:’width/height’yoki CSS’aspect-ratio’.
Video:’preload =’metadata’, poster va avtopauzani viewport’dan tashqarida yuklash.
Piktogrammalar: sprite/inline SVG; keraksiz HTTP soʻrovlaridan qochish.

6) Dangasa komponentlar va yo’nalishlar

Code-splitting: yoʻnalishlar/vidjetlar boʻyicha dinamik import.
Orol komponentlari/qisman gidratsiya: faqat interaktiv zonalarni jonlantiring.
SSR/SSG + ISR: HTMLni serverda renderlash, inkremental yangilash.
Suspense/Defer (ishlatiladigan frameworkda): maʼlumot dekompozitsiyasi va UI.

7) Ulkan ro’yxatlar va jadvallar

Virtual (windowing): faqat koʻrinadigan maydon + bufer renderi.
Anker qo’shimcha yuklash: qutilarni yuklashda pozitsiyani saqlab qolish.
Batch yangilanishlari: skrollda qayta chizishni minimallashtirish.
Fixed-row height yoki’contain-intrinsic-size’uchun bashorat qilinadigan oʻlchamlar.

8) CSS va brauzer tezlatkichlari

’content-visibility: auto’: brauzer koʻrinmas (minimal hisoblash) ni oʻtkazib yuboradi.
’contain ’/’ will-change’: uslublar/moslamalar taʼsirini cheklash.
Animatsiyalar: faqat transform/opacity; layout/paint-og’ir ta’sirlardan qochish.
Shedou va blur - ayniqsa, ro’yxatlarda tejamkor.

9) Voqealar va JS-yuklamani boshqarish

Skroll/tachning passiv tinglovchilari (’{passive: true}’).
Debounce/throttle resize/scroll/processors.
Viewport (IntersectionObserver) dan tashqarida vidjetlarning kechiktirilgan ishga tushirilishi.
Og’ir hisoblashni Web Workers’ga o’tkazish.

10) Mobil kontekst

Tarmoq: 3G/yuqori RTT sekinroq - dangasa yuklash.
Batareya va issiqlik: taymer chastotasini cheklash, FPS fon animatsiyalarini kamaytirish.
Qisqich: Matn uchun Brotli, toʻgʻri’Accept-Encoding’.
Faqat ehtimoliy oʻtishlar uchun Wi-Fi prefetch.

11) Foydalanish imkoniyati va SEO

Skelet ≠ kontent: ekran oʻquvchilariga xalaqit bermaydi; fokusning mantiqiy tartibi.
Asosiy matnning HTML serveri - JS orqasida hamma narsani yashirmang.
Alt-matnlar va sarlavhalar yuklangunga qadar mavjud bo’lib qoladi.
Lazy tarkibi klaviatura yoʻlaklarini toʻsmasligi kerak.

12) Metrika va maqsadli qiymatlar

LCP (hero-rasm/sarlavha): ≤ 2,5 s (mobayl).
INP (kirish reaksiyasi): ≤ 200 ms.
CLS: ≤ 0,1.
TTFB: ≤ 500 ms; TTI: 3 ≤.
Bytes over the wire (first view): qat’iy byudjet (masalan ≤ 200-300 KB krit. ).
Scroll-jank: <1% kadrlar> 16,7 ms.

• ’lazy _ enqueued ’/’ lazy _ loaded’ (id, tur, o’lcham, latency),
• ’component _ hydrated’ (vaqt, JS og’irligi),
• `virtualized_window_resize`,
• `lcp_candidate_shown`, `skeleton_time_visible`,
• xatolar (’img _ error’,’decode _ timeout’).

13) Namunaviy zonalar uchun patternlar

Bosh/katalog: SSR + skeleton kartochkalar, lazy tasvirlar, progressiv filtrlar.
Tovar/o’yin kartochkasi: preload + high priority qahramon tasviri; galereya - lazy; sharhlar - klik bo’yicha.
Uzoq maqolalar/wiki: TOC, oʻqish jarayoni, media/kod bloklari uchun lazy, qoldirilgan mazmunlar.
Hayot lentalari: satrlarni virtuallashtirish, «avto-skroll pauzasi», bufer limiti.

14) Antipatternlar

Butun ekranda Spinner> 1-2 s.
Lazy to’plamsiz → maket poygalari (CLS ↑).
Noyob stsenariylar uchun «bir vaqtning oʻzida JS» ni yuklash.
Og’ir shriftlar/tasvirlar tanqidiy qismga ulanadi.
Kartochkalarning oldindan aytib bo’lmaydigan o’lchamlari → «sarson» kontent.
Tanqidiy (logotip, hero-matn) dangasa yuklash - LCPni buzadi.
«Orqaga» dan keyin pozitsiya qaytarilmaydi.

15) Joriy etish chek-varaqasi (bosqichma-bosqich)

Sprint 1 - Diagnostika: LCP/INP/CLS/TTFB o’lchang; resurslar va muhim yo’l xaritasini tuzing.
Sprint 2 - Tanqid/ustuvorlik: tanqidiy CSS/HTML,’preconnect ’/’ preload’, JS-changlarni kamaytiring.
Sprint 3 - Media: AVIF/WebP,’srcset/sizes’, belgilangan o’lchamlari, non-hero uchun lazy.
Sprint 4 - Roʻyxatlar: virtualizatsiya, anker yuklash, skeletons/shimmer.
Sprint 5 - Arxitektura: qisman gidratsiya/orollar, SSR/SSG/ISR, streaming.
Sprint 6 - Nozik moslama:’content-visibility’, priority hints, debounce, Web Workers.
Sprint 7 - A/B va telemetriya: skeletlarning variantlarini, lazy darajalarini, byudjetlarni solishtiring.
Sprint 8 - Relizlar gigiyenasi: assetalar versiyasi, kesh-basting, rollback-strategiyalar.

16) Lugʻat (qisqacha)

Lazy-loading - ko’rinmas kontentni kechiktirilgan yuklash.
LCP/INP/CLS/TTFB/TTI/TBT - UX tezligining asosiy metrikasi.
Code-splitting/Gidratsiya/Orollar - UIni maydalash va jonlantirish texnikasi.
Virtualizatsiya - roʻyxatning koʻrinadigan oynasini render qilish.
Priority Hints/Preconnect/Preload - brauzerga oldinroq yuklash uchun ko’rsatmalar.
Content-visibility - koʻrinmas kontent uchun hisoblashni oʻtkazib yuborish.

17) Jami

Lazy-loading - bu "qoʻyilgan’loading =" lazy’va tayyor "emas. Bu tizim: tanqidiy yo’l, to’g’ri media formatlari, orol interaktivligi, virtualizatsiya va telemetriya. Muhim narsalarni tezkor, ikkinchi darajali narsalarni ko’rinmas va arzon, maketni esa oldindan aytib bo’ladigan qilib qo’ying. Shunda mahsulot har qanday qurilmada va har qanday tarmoqda tez seziladi.