Lazy-ýüklemek we UX-tizlenmek

1) Maksatlar we ýörelgeler

• TTI/LCP-i möhüm ýoluň hasabyna kesiň.
• Ýerleşişi (pes CLS) öňünden aýdylýan ölçegler bilen durnuklaşdyrmak.
• Batareýany we traffigi mobilde sakla.
• Konwersiýany ýokary galdyryň: ulanyjy hereketi has ir görýär.

Ýörelgeler: ileri tutulýan → öňe gidişlik → öňünden aýdylmak. Ilki bilen möhüm mazmun, soňra progressiw doldurmak we gowulaşmalardan soň ýüklemek.

2) Renderingiň möhüm ýoly

Möhüm HTML: "above-the-fold" belgisini birbada beriň.
Möhüm CSS: inline ≤ 10-15 KB; galanlary - 'media = "print"' + swap/goşmaça ýüklemek.
JS bloker hökmünde: 'defer '/' async', çantalara bölmek, ugurlar boýunça logikany ýüklemek.
Şriftler: 'font-display: swap' optional ', WOFF2 öňünden ýüklemek, ulgam fallback'.

3) Tor çeşmeleriniň ileri tutulmagy

CDN/şriftlere/şekillere preconnect (TCP + TLS öňünden).
Üçünji domenler üçin DNS-prefetch.
Möhüm şekilleri/şriftleri/skriptleri preload.
Priority Hints ('importance = "high' low ',' fetchpriority =" high "'hero-surat üçin).
HTTP/3/QUIC: az gizlinlik; CDN-edge ulanyja has ýakyn.
Keş syýasaty: wersiýa assets üçin 'immutable'; dogry ETag/Last-Modified.

4) Progressive Rendering we ýüklemek ýagdaýy

Skeletons/Şimmerler spinnerleriň ýerine: "bökmezden" wizual ösüş.
Kesgitlenen ölçegli placeholders (kartoçkalar, miniatýuralar) - nol CLS.
Streaming/Chunked HTML: çarçuwany çalt bermek, soňra mazmuny doldurmak.
Optimistic UI (seresap): soň tassyklamak bilen derrew hereket etmek.

5) Media mazmunyny lazy-ýüklemek

Şekiller:' loading =" lazy"',' decoding =" async"', AVIF/WebP formatlary (JPEG/PNG follbek).
Responsive: 'srcset '/' sizes' dürli DPR/giňlikler üçin; 1 × ýeterlik ýerde 3 × ýüklemäň.
Çak edilýän beýiklik: 'width/height' ýa-da CSS 'aspect-ratio'.
Wideo: 'preload =' metadata '', posterleri, awtopauzany viewport daşynda ýüklemek.
Nyşanlar: sprite/inline SVG; gereksiz HTTP soraglaryndan gaça duruň.

6) Ýaltalyk komponentleri we ugurlary

Code-splitting: marşrutlar/widjetler boýunça dinamiki import.
Adalaryň komponentleri/bölekleýin gidrasiýa: diňe interaktiw zolaklary janlandyryň.
SSR/SSG + ISR: HTML-i serwerde görkeziň, içgin täzeläň.
Suspense/Defer (ulanylýan frameworkda): maglumatlaryň we UI-leriň dekompozisiýasy.

7) Uly sanawlar we tablisalar

Wirtualization (windowing): diňe görünýän sebitiň renderi + bufer.
Anker goşmaça ýüklemek: paketleri ýükläniňde pozisiýany saklamak.
Batch-updates: skrollda täzeden çyzmagy azaltmak.
Çak edilýän ululyklar üçin fixed-row height ýa-da 'contain-intrinsic-size'.

8) CSS we brauzer tizlendirijileri

'content-visibility: auto': brauzer görünmeýän sanamalary sypdyrýar.
'contain '/' will-change': stil/düzüm täsirini çäklendirmek.
Animasiýa: diňe transform/opacity; layout/paint-agyr täsirlerden gaça duruň.
Şedow we blur - esasanam sanawlarda tygşytly.

9) Wakalary we JS ýüküni dolandyrmak

Passiw ses diňleýjileri ('{passive: true}').
resize/scroll/prosessorlarda debounce/throttle.
Widgetlaryň viewport (IntersectionObserver) daşynda gijikdirilmegi.
"Web Workers" -a agyr hasaplamalary geçirmek.

10) Ykjam kontekst

Tor: haýal 3G/ýokary RTT - has agressiw ýaltalyk ýüklemek.
Batareýa we ýylylyk: wagtyň ýygylygyny çäklendirmek, fon animasiýalarynyň FPS azaltmak.
Gysyş: Brotli, dogry 'Accept-Encoding'.
Wi-Fi prefetch diňe ähtimal geçişler üçin (klikleriň taryhy).

11) Elýeterlilik we SEO

Skelet ≠ mazmun: ekran okyjylaryna päsgel bermeýär; fokusyň logiki tertibi.
Açar tekstiň HTML serweri - JS-iň aňyrsynda hemme zady gizlemäň.
Alt-tekstler we sözbaşylar goşmaça ýüklenýänçä elýeterli bolup galýar.
Lazy-mazmuny klawiatura ýollaryny petiklemeli däldir.

12) Metrikler we maksatlaýyn gymmatlyklar

LCP (hero-surat/sözbaşy): ≤ 2,5 s (mobil).
INP (giriş reaksiýasy): ≤ 200 ms.
CLS: ≤ 0,1.
TTFB: ≤ 500 ms; TTI: ≤ 3 s.
Bytes over the wire (first view): berk býudjet (mysal üçin ≤ 200-300 KB krit. resurslar).
Scroll-jank: <1% kadr> 16,7 ms.

• 'lazy _ enqueued '/' lazy _ loaded' (id, görnüş, ululyk, latency),
• 'component _ hydrated' (wagt, JS agramy),
• `virtualized_window_resize`,
• `lcp_candidate_shown`, `skeleton_time_visible`,
• hatalar ('img _ error', 'decode _ timeout').

13) Görnüş zolaklary üçin patternler

Esasy/katalog: SSR + skeleton kartoçkalary, lazy suratlar, progressiw süzgüçler.
Haryt/oýun kartoçkasy: gahryman şekili preload + high priority; galereýa - lazy; synlar - basmak arkaly.
Uzyn makalalar/wiki: TOC, okamagyň ösüşi, media/kod bloklary üçin lazy, yza süýşürilen mazmunlar.
Durmuş lentalary: setirleri wirtuallaşdyrmak, "awto-skroll arakesmesi", bufer çäkleri.

14) Antipatternler

Bütin ekranda Spinner> 1-2 s öňe gitmedi.
Lazy ýer saklaýjysyz → at çapyşyklary (CLS ↑).
Seýrek ssenariler üçin "JS-iň hemmesini birbada" ýükläň.
Agyr şriftleri/şekilleri möhüm bölege öwüriň.
Kartoçkalaryň öňünden aýdyp bolmajak ölçegleri → "aýlanyp ýören" mazmun.
Tankydy ýüklemek (logo, hero-tekst) - LCP döwýär.
"Yza" -dan soň pozisiýanyň yzyna gaýdyp gelmezligi.

15) Girizmegiň çek-sanawy (ädimme-ädim)

Sprint 1 - Diagnostika: LCP/INP/CLS/TTFB ölçäň; çeşmeleriň we möhüm ýoluň kartasyny düzüň.
Sprint 2 - Tankyt/Prioritet: CSS/HTML, 'preconnect '/' preload', JS çankalaryny azaldyň.
Sprint 3 - Media: AVIF/WebP, 'srcset/sizes', kesgitlenen ölçegler, non-hero üçin lazy.
Sprint 4 - Sanawlar: Wirtualizasiýa, anker ýüklemek, skeletons/shimmer.
Sprint 5 - Arhitektura: bölekleýin gidrasiýa/adalar, SSR/SSG/ISR, akym.
Sprint 6 - Inçe sazlama: 'content-visibility', priority hints, debounce, Web Workers.
Sprint 7 - A/B we telemetriýa: skeletleriň wariantlaryny, lazy derejelerini, býudjetleri deňeşdiriň.
Sprint 8 - Relizleriň arassaçylygy: assetleriň wersiýalary, keş-basting, rollback strategiýalary.

16) Sözlük (gysgaça)

Lazy-loading - görünmeýän mazmuny gijikdirmek.
LCP/INP/CLS/TTFB/TTI/TBT - UX tizliginiň esasy metrikleri.
Code-splitting/Gidrasiýa/Adalar - UI bölmek we janlandyrmak usullary.
Wirtualization - sanawyň görünýän penjiresiniň renderi.
Priority Hints/Preconnect/Preload - brauzer üçin öň ýüklemeli görkezmeler.
Content-visibility - görünmeýän mazmun üçin hasaplamalary sypdyrmak.

17) Jemleýji

Lazy-loading - bu "goýlan 'loading =" lazy' we taýýar "däl. Bu ulgam: möhüm ýol, dogry media formatlary, ada interaktiwligi, wirtualizasiýa we telemetriýa. Möhüm zady derrew, ikinjisini göze ilmeýän we arzan, maketi bolsa öňünden aýdyp boljak ediň. Şonda önüm islendik enjamda we islendik ulgamda çalt duýular.