Unumdorlikni optimallashtirish
1) «Tez» nima deb hisoblash kerak
TTFB (birinchi baytgacha bo’lgan vaqt) - server/CDN tezkor javobi.
LCP (Largest Contentful Paint) - «asosiy» kontent tezda paydo bo’ldi.
INP (Interaction to Next Paint) - o’zaro ta’sirchanlik.
CLS (Cumulative Layout Shift) - interfeysning titrashi yo’q.
TTI (Time to Interactive) - hamma javob berganda.
Tavsiya etilayotgan ko’rsatkichlar: LCP ≤ 2. 5 s, INP ≤ 200 ms, CLS ≤ 0. 1 (haqiqiy foydalanuvchilarning 75-persentili uchun).
2) Jarayon: o’lchash → tor joylarni topish → byudjetlarni tuzatish
1. O’lchash: RUM (haqiqiy foydalanuvchilar, mamlakatlar/tarmoqlar/qurilmalar bo’yicha muhrlangan) + sintetika (Lighthouse/kuzatuvchilar).
2. Topish: Performance profil moslamasi (uzoq vazifalar> 50 ms, layout thrashing, ortiqcha renderlar).
3. Belgilash: CI dagi byudjetlar (JS/CSS/shriftlar, LCP/INP) va «qizil chiziqlar».
3) Resurslar tarmog’i va yuklash
3. 1 HTTP va ustuvorliklar
Brotli HTTP/2/3, siqishni yoqish.
’preconnect’ uchun kritik domenlar;’dns-prefetch’uchun ikkinchi darajali domenlar.
Tanqidiy resurslar uchun’preload’(qahramon tasvir, asosiy shrift).
’fetchpriority =’ high/low’va’priority’yordamlari mavjud.
3. 2 Kesh qilish
Fayl xeshi bilan statika:’Cache-Control: public, max-age = 31536000, immutable’.
HTML - CDN orqali qisqa TTL + stale-while-revalidate.
ETAG/Last-Modified va Service Worker oflayn/takroriy tashriflar uchun.
4) Kod: kamroq, keyinroq, «tekisroq»
4. 1 Yigʻish
Tree-shaking, minify (в т.ч. dead-code-elim).
Yo’nalishlar/vidjetlar bo’yicha code-splitting, dinamik import.
Asosiy bandldagi «global» og’ir paketlardan qochish (moment → Intl/Day. js).
4. 2 HTML rendering va yetkazib berish
SSR/ISR/striming: birinchi bo’lib ramka va asosiy kontentni berish.
Partial/Islands hydration: faqat interfaol uchastkalarni gidrilash.
Hamma narsa tanqidiy emas:’<script type = «module» defer>’.
4. 3 Reaksiya xususiyatlari (agar React’dan foydalansangiz)
`React. lazy’+’Suspense’dangasa vidjetlar uchun.
’startTransition’ va’useDeferredValue’ogʻir filtrlar/qidirish uchun.
RSC (Server Components) - serverda hisoblash, mijozda JS dan kam.
Steytdagi selektorlar (zustand/redux): komponentni butun storga emas, balki parchalarga yozish.
5) Render va holat: qayerda «tormozlaydi»
5. 1 Rerenderlarni izolyatsiya qilish
Katta komponentlarni maydalang, memo’,’useMemo’,’useCallback’.
Ro’yxat kalitlari - barqaror; Keraksiz propslarda yangi funksiyalarni/obʼektlarni yaratmang.
Tez-tez oʻzgarib turadigan maʼlumotlar uchun «global» kontekstdan qoching - selektorlar yoki hodisa shinalaridan foydalaning.
5. 2 Virtualizatsiya va katta ro’yxatlar
Varaqlar/jadvallar → virtualizatsiya (render window).
Paginatsiya/infinit-skroll bilan backpressure (birdaniga 100k satr yuklamang).
Vyuportdan tashqari og’ir vidjetlarning kechiktirilgan boshlanishi.
5. 3 Layout & paint
content-visibility: auto; yashirin boʻlimlar uchun (brauzer koʻrinmasligini renderlamaydi).
contain va’contain-intrinsic-size’uchun oldindan aytib bo’ladigan o’lchamlar.
Tez-tez o’qish-yozishdan qoching layout (layout thrashing); oʻlchamlarni guruhlang.
will-change dozalangan (aks holda ortiqcha xotira/qatlamlar).
6) Tasvirlar va grafika
Formatlar: AVIF/WebP (PNG/JPEG uchun fallback).
Responsive-yondashuv:’srcset’+’sizes’, retina uchun density-based.
’loading =’ lazy’qahramon boʻlmagan tasvirlar uchun; priority/preload - faqat LCP-nomzod uchun.
Oʻrnatilgan oʻlchamli pleysholderlar → CLS sakrashi yoʻq.
Kanvas/chartlar: offscreen-kanvas va hisob-kitoblar uchun Web Worker; qayta chizish batching.
7) Shriftlar va matn
Bir yoki ikkita variable font koʻp yozuvlar oʻrniga.
’font-display: swap ’/’ optional’, preload.
Shriftni almashtirishda «sakrashni» kamaytirish uchun’size-adjust’.
Oʻxshash oʻlchamli lokal fallback shriftlari.
8) CSS va animatsiyalar
Kritik CSS inline (<14-20 kB), qolganlarini kechiktirish.
Foydalanilmayotgan uslublarni oʻchirish (Purge/CSSTree).
Iloji boricha transform/opacity animatsiyalari; ’prefers-reduced-motion’ ni hurmat qilish.
Chuqur kaskadlar va portlovchi selektorlardan qochish.
9) Web Workers, oqim va og’ir vazifalar
Barcha og’ir CPUlar Workerda (parsing, saralash, agregatsiya, ML).
Uzoq javoblar uchun striming API (’ReadableStream’,’fetch’oqimlari).
Vazifalarni’requestIdleCallback ’/mikrotaskalar orqali sezgirlikni saqlab qolish uchun parchalash.
10) Maket barqarorligi (CLS)
LCP elementi (rasm/vidjet) uchun joy ajrating.
Belgilangan oʻlchamsiz banner/lentalarni qoʻymang.
Asimmetrik tultiplar/tostlar - kontentni harakatlantirmaslik; qatlamlar/portallardan foydalanish.
11) Snippetlar namunalari
Tanqidiy shrift va LCP tasviri
html
<link rel="preload" href="/fonts/Inter. var. woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" as="image" href="/hero. avif" imagesrcset="/hero. avif 1x, /hero@2x. avif 2x" fetchpriority="high">Vidjetning dangasa va xavfsiz boshlanishi
js const Widget = React. lazy(() => import('./Widget'));
function Section() {
const inView = useInViewport('#sec');
return <div id="sec">{inView? <React. Suspense fallback={null}><Widget/></React. Suspense>: null}</div>;
}Maketni barqarorlashtirish
css
.hero {
content-visibility: auto;
contain: layout paint;
contain-intrinsic-size: 720px 320px ;/LCP reserve/
}12) Regressiyalarni nazorat qilish va budjetlar
Bundle-budget: umumiy JS ≤ N kB, CSS ≤ M kB, initial-chunk ≤ K kB.
Web-Vitals v CI (emulatsiya qilingan) + RUM-alertlar (pertsentillarda).
Bandl tahlili: PRda source-map-explorer/analizator.
Komponentlarning performans-benchmarki (10k elementlar renderi, reaksiya vaqti).
13) Anti-patternlar
Hamma narsani birdaniga yuklash: grafiklar, muharrirlar, birinchi ekrandagi xaritalar.
Ulkan global steyt → kaskad rerenderlari.
Rasmlar kerakli o’lchamdan 2-4 ×,’srcset/sizes’.
Asosiy oqimda uzun sinxron aylanishlar.
’outline: none’ va maqbullashtirilmagan kastom fokuslari render indikatorlariga xalaqit beradi.
’Top/left’ animatsiyalari (joylashtirishni buzadi va reflow chaqiradi).
14) Ekranning chek-varaqasi
- LCP ≤ 2. 5c 3G/mobayl trafigida, CLS ≤ 0. 1, INP ≤ 200 ms
- Tanqidiy resurslar: preload/ustuvorliklar; qolganlari - defer/lazy
- Bandla: code-split, ortiqcha bogʻliqlik yoʻq
- Roʻyxat/jadvallarni virtuallashtirish, ogʻir vidjetlarni kechiktirilgan boshlash
- Rasmlar: AVIF/WebP,’srcset/sizes’,’loading =’lazy’’
- Shriftlar: variable +’font-display’, preload faqat kerakli
- CSS: tanqidiy inline, Purge,’content-visibility’va’contain’mos
- Og’ir hisoblash uchun Workers/idle
- Byudjetlar va Web-Vitals dashboard/alertlarga ulangan
15) Joriy etish rejasi (3 ta iteratsiya)
Iteratsiya 1 - Tez g’alabalar (1-2 hafta)
Brotli/HTTP-2/3, CDN yoqish. CSS va preload LCP resurslari.
Ogʻir vidjetlarni dinamik importga olib chiqish.
Rasmlar → AVIF/WebP +’srcset’. Shriftlar:’font-display: swap’.
Iteratsiya 2 - Tarkibiy yaxshilanishlar (3-4 hafta)
Yo’nalishlar bo’yicha code-split, bandlni tahlil qilish, «og’ir» liblarni olib tashlash.
Roʻyxatlarni virtual qilish, kontent-visibility, contain-intrinsic-size.
SSR/striming/orollarni joriy etish.
Web-Vitals bilan RUM, CIdagi byudjetlar.
Iteratsiya 3 - Masshtab va barqarorlik (uzluksiz)
Workers/offscreen-kanvas, batching hisob-kitoblar, startTransition/deferredValue.
Muntazam perf-audit, regressiya avtodayjestlari, jamoani o’qitish.
16) Mini-FAQ
Mobilda eng koʻp nima tezlashadi?
Dastlabki JS, SSR/strimingni kamaytirish va LCP tasvirini optimallashtirish.
SSR har doim kerakmi?
Yo’q. Agar sahifa dinamik interaktiv va yomon keshlansa, islands/partial hydration yaxshiroq boʻlishi mumkin.
Nega INP «engil» bandlada yomon?
Ehtimol, asosiy oqimda uzoq vazifalar (saralash, grafiklar) - vazifalarni Workerga olib chiqing va bo’ling.
Jami
Tezkor UI - bu fanlar majmui: tarmoq ustuvorliklari va kesh, kichik va kech bandllar, sakrashsiz oldindan aytib bo’ladigan render, tejamkor tasvirlar va shriftlar, shuningdek real dunyoda metrikalarni doimiy nazorat qilish. Byudjetlarni kiriting, tekshiruvlarni avtomatlashtiring va buyruqni har qadamda tezlik haqida o’ylashga o’rgating - interfeys bugun va bir yil ichida tez bo’lib qoladi.