UI performansının optimallaşdırılması
1) «tez» saymaq üçün nə
TTFB (ilk bayta qədər vaxt) - server/CDN-in sürətli cavabı.
LCP (Largest Contentful Paint) - «əsas» məzmun tez ortaya çıxdı.
INP (Interaction to Next Paint) - qarşılıqlı əlaqə zamanı cavabdehlik.
CLS (Cumulative Layout Shift) - interfeysin «titrəməsi» yoxdur.
TTI (Time to Interactive) - hər şey cavab verdikdə.
Tövsiyə olunan göstəricilər: LCP ≤ 2. 5 s, INP ≤ 200 ms, CLS ≤ 0. 1 (real istifadəçilərin 75-ci persentil üçün).
2) Proses: ölçmək → dar yerləri tapmaq → büdcələri düzəltmək
1. Ölçün: RUM (real istifadəçilər, ölkələrə/şəbəkələrə/cihazlara vurulmuş) + sintetika (Lighthouse/müşahidəçilər).
2. Tapmaq: Performance profil istehsalçısı (uzun vəzifələr> 50 ms, layout thrashing, əlavə render).
3. Sabit: CI-də büdcələr (JS/CSS/şriftlərin çəkisi, LCP/INP) və «qırmızı xətlər».
3) Şəbəkə və resursların yüklənməsi
3. 1 HTTP və prioritetlər
HTTP/2/3 aktiv, Brotli sıxılması.
Kritik domenlərə 'preconnect'; ikinci dərəcəli domenlər üçün 'dns-prefetch'.
Kritik resurslar üçün 'preload' (qəhrəman şəkil, əsas şrift).
'fetchpriority =' high/low 'və' priority 'məsləhətləri dəstəklənir.
3. 2 Caching
«Cache-Control: public, max-age = 31536000, immutable».
HTML - CDN vasitəsilə qısa TTL + stale-while-revalidate.
ETag/Last-Modified və Service Worker oflayn/təkrar səfərlər üçün.
4) Kod: daha kiçik, daha sonra, «bərabər»
4. 1 Montaj
Tree-shaking, minify (в т.ч. dead-code-elim).
Code-splitting marşrutları/widget, dinamik idxal.
Əsas bandlda «qlobal» ağır paketlərdən qaçın (moment → Intl/Day. js).
4. 2 HTML render və çatdırılması
SSR/ISR/axın: ilk çərçivə və əsas məzmun vermək.
Partial/Islands hydration: yalnız interaktiv sahələri hidrogenləşdirin.
Defer hamısı tənqidi deyil: '<script type = «module» defer>'.
4. 3 Reaksiya spesifikliyi (React istifadə edirsinizsə)
`React. lazy '+' Suspense 'tənbəl widget üçün.
Ağır filtrələr/axtarış üçün 'startTransition' və 'useDeferredValue'.
RSC (Server Components) - server hesablamaları, müştəridə daha az JS.
Steytdəki selektorlar (zustand/redux): komponenti fraqmentlərə imzalamaq, bütün stor deyil.
5) Render və vəziyyət: harada «yavaşlayır»
5. 1 Rerender izolyasiyası
Böyük komponentləri parçalayın, memoizasiya edin ('memo', 'useMemo', 'useCallback').
Siyahı açarları - sabit; ehtiyac olmadan proplarda yeni funksiyalar/obyektlər yaratmayın.
Tez-tez dəyişən məlumatlar üçün «qlobal» kontekstdən çəkinin - seçicilərdən və ya hadisə şinlərindən istifadə edin.
5. 2 Virtuallaşdırma və böyük siyahılar
Vərəqlər/cədvəllər → virtuallaşdırma (render window).
Backpressure ilə pagination/infinit scroll (eyni anda 100k sətir yükləməyin).
Ağır widgetların yutport xaricində gecikmiş başlanğıcı.
5. 3 Layout & paint
content-visibility: auto; gizli bölmələr üçün (brauzer görünməyən render etmir).
contain və 'contain-intrinsic-size' proqnozlaşdırıla bilən ölçüləri üçün.
Tez-tez oxumaqdan çəkinin layout (layout thrashing); ölçmələri qruplaşdırın.
will-change dozalı istifadə edin (əks halda əlavə yaddaş/qatlar).
6) Şəkillər və qrafika
Formatlar: AVIF/WebP (PNG/JPEG üçün fallback).
Responsive-yanaşma: 'srcset' + 'sizes', retina üçün density-based.
'loading =' lazy 'qeyri-qəhrəman şəkillər üçün; priority/preload - yalnız LCP namizədi üçün.
Sabit ölçülü pleysholderlər → CLS sıçrayışları yoxdur.
Canvas/charts: offscreen-canvas və hesablamalar üçün Web Worker; yenidən çəkilmələrin batching.
7) Şriftlər və mətn
Bir-iki variable font bir çox yazı əvəzinə.
'font-display: swap '/' optional', preload.
'size-adjust' şrifti dəyişdirərkən «sıçrayışı» azaltmaq üçün.
Oxşar ölçüləri olan yerli fallback şriftləri.
8) CSS və animasiya
Kritik CSS online (<14-20 kB), qalanını təxirə salın.
Istifadə olunmayan stilləri sil (Purge/CSSTree).
transform/opacity mümkün qədər animasiya; 'prefers-reduced-motion' hörmət.
Dərin kaskadlardan və partlayıcı seçicilərdən qaçın.
9) Web Workers, axın və ağır vəzifələr
Bütün CPU ağır - Worker (parsing, çeşidləmə, aqreqasiya, ML).
Uzun cavablar üçün axın API-ləri ('ReadableStream', 'fetch').
Cavabdehliyi qorumaq üçün 'requestIdleCallback '/mikrotaska vasitəsilə çantalara tapşırıqları parçalayın.
10) Maket sabitliyi (CLS)
LCP elementi (şəkil/widget) üçün yer ayırın.
Bannerləri/lentləri sabit ölçülər olmadan qoymayın.
Asimmetrik tuliplər/tostlar - məzmunu hərəkət etdirməyin; qatlardan/portallardan istifadə etmək.
11) Snippet nümunələri
Kritik şrift və LCP təsviri
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">Tənbəl və təhlükəsiz widget başlanğıc
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>;
}Maket sabitləşdirilməsi
css
.hero {
content-visibility: auto;
contain: layout paint;
contain-intrinsic-size: 720px 320px ;/LCP reserve/
}12) Reqressiyalara nəzarət və büdcələr
Bundle-budget: ümumi JS ≤ N kB, CSS ≤ M kB, initial-chunk ≤ K kB.
CI-də Web-Vitals (emulyasiyalı) + RUM-alertlər (üzlüklərdə).
Bandl analizi: PR-da source-map-explorer/analizator.
Performans-bençmark komponentləri (render 10k elementləri, reaksiya vaxtı).
13) Anti-nümunələr
«Hər şeyi bir anda» yükləyin: qrafiklər, redaktorlar, kartlar ilk ekranda.
Böyük qlobal state → kaskad rerenderlər.
Şəkillər lazımi ölçüdən 2-4 ×, heç bir 'srcset/sizes'.
Əsas axında uzun sinxron dövrlər.
'outline: none' və optimallaşdırma olmadan xüsusi fokuslar - render göstəricilərinə mane olur.
'Top/left' animasiyaları (konturu pozur və reflow çağırır).
14) Ekran çek siyahısı
- LCP ≤ 2. 3G/mobil trafikdə 5 c, CLS ≤ 0. 1, INP ≤ 200 ms
- Kritik resurslar: preload/prioritetlər; qalan - defer/lazy
- Bandla: code-split, heç bir lazımsız asılılıq
- Siyahıların/cədvəllərin virtuallaşdırılması, ağır widgetların gecikmiş başlanğıcı
- Şəkillər: AVIF/WebP, 'srcset/sizes', 'loading =' lazy ''
- Şriftlər: variable + 'font-display', yalnız lazım preload
- CSS: kritik inline, Purge, 'content-visibility' və 'contain' uyğun olduğu yerdə
- Ağır hesablamalar üçün Workers/idle
- Büdcələr və Web-Vitals dashboard/alerts bağlı
15) Tətbiq planı (3 iterasiya)
İterasiya 1 - Sürətli qələbələr (1-2 həftə)
Brotli/HTTP-2/3, CDN daxil edin. Kritik CSS və preload LCP resursları.
Ağır widget dinamik idxal.
Görüntülər → AVIF/WebP + 'srcset'. Şriftlər: 'font-display: swap'.
İterasiya 2 - Struktur təkmilləşdirmələri (3-4 həftə)
marşrutlar üzrə Code-split, bandla təhlili, «ağır» lib aradan qaldırılması.
Virtualization siyahıları, məzmun visibility, contain-intrinsic-size.
SSR/Streaming/Adaları tətbiq edin (burada müvafiq).
Web-Vitals ilə RUM, CI-də büdcələr.
İterasiya 3 - Miqyas və sabitlik (davamlı)
Workers/offscreen-canvas, batching hesablamalar, startTransition/deferredValue.
Müntəzəm perf-audit, regressiya avtodayjesti, komanda təlimi.
16) Mini-FAQ
Mobil faylda ən çox nə sürətləndirəcək?
Orijinal JS, SSR/axını azaltmaq və LCP görüntülərini optimallaşdırmaq.
Həmişə SSR lazımdır?
Yox. Səhifə dinamik interaktiv və pis cached varsa - islands/partial hydration daha yaxşı ola bilər.
Niyə INP «yüngül» bandla pisdir?
Ehtimal ki, əsas axında uzun tapşırıqlar (çeşidləmə, qrafiklər) - Worker-ə gətirin və tapşırıqları parçalayın.
Yekun
Sürətli UI bir sıra fənlər: şəbəkə prioritetləri və cache, kiçik və gec bandllar, sıçrayışsız proqnozlaşdırıla bilən render, qənaətcil şəkillər və şriftlər və real dünyada metriklərin daimi nəzarəti. Büdcələri daxil edin, yoxlamaları avtomatlaşdırın və komandaya hər addımda sürət haqqında düşünməyi öyrənin - belə ki, interfeys bu gün və bir ildən sonra sürətli qalacaq.