Lazy-yükləmə və UX-sürətləndirmə

1) Məqsədlər və prinsiplər

• Kritik yol ilə TTI/LCP azaldın.
• Mizanpajı (aşağı CLS) proqnozlaşdırıla bilən ölçülərlə sabitləşdirin.
• Mobile batareya və trafik saxlamaq.
• Dönüşüm qaldırın: istifadəçi hərəkəti daha əvvəl görür.

Prinsiplər: prioritet → tərəqqi → proqnozlaşdırıla bilən. Əvvəlcə kritik məzmun, sonra mütərəqqi doldurma və təkmilləşdirmələri yükləyin.

2) Kritik render yolu

Kritik HTML: «above-the-fold» nişanını dərhal verin.
Kritik CSS: 10-15 KB ≤ inline; qalan - 'media = «print»' + swap/yükləmə.
JS bir bloker kimi: 'defer '/' async', kupalara bölmək, marşrutlar üzrə məntiqi yükləmək.
Şriftlər: 'font-display: swap' optional ', ön yükləmə WOFF2, sistem fallback'.

3) Şəbəkə resurslarının prioritetləşdirilməsi

CDN/şriftlərə/şəkillərə preconnect (TCP + TLS əvvəlcədən).
Üçüncü domenlər üçün DNS-prefetch.
Preload kritik şəkillər/şriftlər/skriptlər.
Priority Hints ('importance = "high' low ',' fetchpriority =" high "'hero görüntü üçün).
HTTP/3/QUIC: daha az gecikmə; CDN-edge istifadəçiyə daha yaxındır.
Cache siyasətləri: versiyalı assetlər üçün 'immutable'; düzgün ETag/Last-Modified.

4) Progressive Rendering və download vəziyyətləri

Spinner əvəzinə Skeletons/Schimmer: «atlama» olmadan vizual tərəqqi.
Sabit ölçülü placeholders (kartlar, miniatürlər) - sıfır CLS.
Streaming/Chunked HTML: tez çərçivə vermək, sonra məzmun əlavə.
Optimistic UI (diqqətlə): sonrakı validasiya ilə ani hərəkət.

5) Media məzmununun Lazy-loading

Şəkillər:' loading =» lazy»',' decoding =» async»', AVIF/WebP formatları (JPEG/PNG follback).
Responsive: 'srcset '/' sizes' müxtəlif DPR/enləri altında; 1 × çatan yerdə 3 × yükləməyin.
Proqnozlaşdırıla bilən hündürlük: 'width/height' və ya CSS 'aspect-ratio'.
Video: 'preload =' metadata ', poster yükləməsi, avtopauza viewport xaricində.
Nişanlar: sprite/inline SVG; lazımsız HTTP sorğuları qarşısını almaq.

6) Tənbəl komponentlər və marşrutlar

Code-splitting: marşrutlar/widget dinamik idxal.
Adalar komponentləri/qismən hidrasiya: yalnız interaktiv zonaları canlandırın.
SSR/SSG + ISR: server HTML render, inkremental yeniləmək.
Suspense/Defer (istifadə olunan çərçivədə): məlumat dekompozisiyası və UI.

7) Böyük siyahılar və cədvəllər

Virtualization (windowing): yalnız görünür sahə render + bufer.
Anker yükləmə: paket yükləyərkən mövqeyi saxlayın.
Batch-updates: scroll yenidən minimuma endirmək.
Fixed-row height və ya 'contain-intrinsic-size' proqnozlaşdırıla bilən ölçülər üçün.

8) CSS və brauzer sürətləndiriciləri

'content-visibility: auto': brauzer görünməz (minimum hesablama) buraxır.
'contain '/' will-change': stillərin/düzənlərin təsir dairəsini məhdudlaşdırmaq.
Animasiyalar: yalnız transform/opacity; layout/paint-ağır təsirlər qarşısını almaq.
Shadow və blur - xüsusilə siyahılarda qənaətcil.

9) Hadisələrin və JS yükünün idarə edilməsi

Passiv scroll/tacha dinləyiciləri ('{passive: true}').
Debounce/throttle resize/scroll/prosessorlar.
Viewport (IntersectionObserver) xaricindəki widgetların gecikmiş initializasiyası.
Ağır hesablamaların Web Workers-ə köçürülməsi.

10) Mobil kontekst

Şəbəkə: yavaş 3G/yüksək RTT - daha aqressiv tənbəl yükləmə.
Batareya və istilik: zamanlayıcıların tezliyini məhdudlaşdırın, FPS fon animasiyalarını azaltın.
Sıxılma: Mətn üçün Brotli, sağ 'Accept-Encoding'.
Yalnız ehtimal olunan keçidlər üçün Wi-Fi Prefetch (klik tarixi).

11) Mövcudluq və SEO

Skelet ≠ məzmun: ekran oxucularını narahat etmir; məntiqi fokus qaydası.
Server HTML açar mətni - JS arxasında hər şeyi gizlətməyin.
Alt mətnlər və başlıqlar yüklənənə qədər mövcuddur.
Lazy məzmunu klaviatura ilə marşrutları bloklamamalıdır.

12) Metriklər və hədəf dəyərləri

LCP (hero-şəkil/başlıq): ≤ 2.5 s (mobil).
INP (giriş reaksiya): ≤ 200 ms.
CLS: ≤ 0,1.
TTFB: ≤ 500 ms; TTI: ≤ 3 s.
Bytes over the wire (first view): ciddi büdcə (məsələn ≤ 200-300 KB crit. resursları).
Scroll-jank: <1% kadr> 16,7 ms.

• 'lazy _ enqueued '/' lazy _ loaded' (id, görünüş, ölçü, latency),
• 'component _ hydrated' (vaxt, JS çəkisi),
• `virtualized_window_resize`,
• `lcp_candidate_shown`, `skeleton_time_visible`,
• səhvlər ('img _ error', 'decode _ timeout').

13) Tipik zonalar üçün nümunələr

Ev/kataloq: SSR + skeleton kartları, lazy şəkillər, proqressiv filtrlər.
Məhsul/oyun kartı: preload + high priority qəhrəman təsviri; qalereya - lazy; rəylər - kliklə.
Uzun/wiki məqalələr: TOC, mütaliə tərəqqi, media/kod blokları üçün lazy, təxirə salınmış içindəkilər.
Canlı lentlər: sətirlərin virtuallaşdırılması, «auto-scroll fasiləsi», bufer limiti.

14) Antipattern

Spinner bütün ekran> 1-2 s heç bir irəliləyiş.
Lazy yer tutucusuz → maket atlama (CLS ↑).
Nadir ssenarilər üçün «bir anda bütün JS» download.
Ağır şriftləri/şəkilləri kritik hissəyə daxil edin.
Kartların gözlənilməz ölçüləri → «gəzən» məzmun.
tənbəl kritik yükləmə (loqo, hero-mətn) - LCP qırır.
«Geri» sonra mövqe geri yoxdur.

15) Giriş çek siyahısı (addım-addım)

Sprint 1 - Diaqnostika: LCP/INP/CLS/TTFB ölçün; resursların və kritik yolun xəritəsini tərtib edin.
Sprint 2 - Tənqid/Prioritet: kritik CSS/HTML, 'preconnect '/' preload', JS fincanlarını azaltın.
Sprint 3 - Media: AVIF/WebP, 'srcset/sizes', sabit ölçüləri, qeyri-hero üçün lazy.
Sprint 4 - Siyahılar: virtuallaşdırma, anker yükləmə, skeletons/shimmer.
Sprint 5 - Memarlıq: qismən hidrasiya/adalar, SSR/SSG/ISR, axın.
Sprint 6 - İnce konfiqurasiya: 'content-visibility', priority hints, debounce, Web Workers.
Sprint 7 - A/B və telemetri: skelet variantları, lazy səviyyələri, büdcələri müqayisə edin.
Sprint 8 - Relizlərin gigiyenası: asset versiyaları, cash-basting, rollback strategiyaları.

16) Lüğət (qısa)

Lazy-loading - görünməz məzmunun gecikmiş yüklənməsi.
LCP/INP/CLS/TTFB/TTI/TBT - UX sürətinin əsas metrikləridir.
Code-splitting/Hydration/Adalar - UI parçalama və canlanma texnikası.
Virtualization - görünən pəncərə siyahısı render.
Priority Hints/Preconnect/Preload - daha əvvəl göndərmək üçün brauzerə göstərişlər.
Content-visibility - görünməz məzmun üçün hesablamaları qaçırmaq.

17) Yekun

Lazy-loading - 'yükləmə' = 'lazy' və bitdi 'deyil. Bu sistem: kritik yol, düzgün media formatları, ada interaktivliyi, virtuallaşdırma və telemetriya. Əhəmiyyətli bir şeyi ani, ikinci dərəcəli - görünməz və ucuz, maketi isə proqnozlaşdırıla bilən edin. Sonra məhsul hər hansı bir cihazda və hər hansı bir şəbəkədə sürətli hiss olunacaq.