Lazy-loading және UX-жеделдету

1) Мақсаттар мен қағидаттар

• Сыни жол есебінен TTI/LCP қысқарту.
• Орналасуды болжамды өлшемдермен тұрақтандыру (төмен CLS).
• Батареяны және трафикті мобайлда сақтау.
• Конверсияны көтеру: пайдаланушы әрекетті ертерек көреді.

Қағидаттар: басымдық → прогресс → болжамдылық. Алдымен сындарлы контент, содан кейін прогрессивті толтыру және жақсартуларды жүктеу.

2) Рендерингтің сыни жолы

Сыни HTML: «above-the-fold» белгісін бірден беріңіз.
Сыни CSS: инлайн ≤ 10-15 КБ; қалғаны - 'media = «print»' + swap/жүктеу.
JS бұғаттағыш ретінде: 'defer '/' async', күбілерге бөлу, бағыттар бойынша логиканы жүктеу.
Қаріптер: 'font-display: swap' optional ', WOFF2 алдын ала жүктеу, жүйелік fallback'.

3) Желілік ресурстарға басымдық беру

CDN/қаріптерге/суреттерге Preconnect (TCP + TLS алдын ала).
Үшінші домендер үшін DNS-prefetch.
Критикалық суреттерді/қаріптерді/скрипттерді preload.
Priority Hints (' importance =» high' low»',' fetchpriority =» high» 'hero-сурет үшін).
HTTP/3/QUIC: төменгі жасырындылық; CDN-edge пайдаланушыға жақын.
Кэш саясаттары: 'immutable' нұсқаланған ассеттер үшін; ETag/Last-Modified.

4) Progressive Rendering және жүктеу күйі

Skeletons/Спиннерлер орнына шиммерлер: «секірулерсіз» визуалды прогресс.
Белгіленген өлшемді Placeholders (карточкалар, миниатюралар) - нөлдік CLS.
Streaming/Chunked HTML: каркасты тез беріп, мазмұнмен толықтырыңыз.
Optimistic UI (абайлаңыз): кейіннен валидациялау арқылы жылдам әрекет ету.

5) Медиаконтенттің Lazy-loading

Кескіндер:' loading =» lazy»',' decoding =» async»', AVIF/WebP пішімдері (фоллбек JPEG/PNG).
Responsive: 'srcset '/' sizes' түрлі DPR/ені астында; 1 × жететін жерде 3 × тиемеңіз.
Болжамды биіктік: 'width/height' немесе CSS 'aspect-ratio'.
Бейне: 'preload =' metadata ', постерлерді, автопаузаны viewport тыс жүктеу.
Иконалар: sprite/inline SVG; артық HTTP сұрауларын болдырмау.

6) Жалқау компоненттер мен бағыттар

Code-splitting: бағыттар/виджеттер бойынша динамикалық импорт.
Компоненттер-аралдар/ішінара гидрация: тек интерактивті аймақтарды жандандырыңыз.
SSR/SSG + ISR: HTML-ді серверде тіркеу, инкрементальды жаңарту.
Suspense/Defer (қолданылатын фреймворкте): деректердің декомпозициясы және UI.

7) Үлкен тізімдер мен кестелер

Виртуалдандыру (windowing): тек көрінетін аумақтың рендері + буфер.
Анкерлік қосымша жүктеу: бумаларды тиеу кезінде позицияны сақтау.
Batch жаңартулары: Скролл кезінде қайта суреттеуді азайтыңыз.
Болжамды өлшемдер үшін fixed-row height немесе 'contain-intrinsic-size'.

8) CSS және браузерлік жылдамдатқыштар

'content-visibility: auto': шолғыш көрінбейтін (ең аз есептеулерді) өткізіп жібереді.
'contain '/' will-change': мәнерлердің/орналасудың әсер ету аумағын шектеу.
Анимациялар: тек transform/opacity; layout/paint-ауыр әсерлерді болдырмау.
Шедоу мен blur - әсіресе тізімде үнемді.

9) Оқиғаларды және JS-жүктемені басқару

Пассивті скролл/тача тыңдаушылары ('{passive: true}').
Debounce/throttle resize/scroll/өңдегіштерде.
viewport (IntersectionObserver) тыс виджеттердің кешіктірілген баптандырылуы.
Web Workers бағдарламасына ауыр есептеулерді көшіру.

10) Мобильді контекст

Желі: баяу 3G/жоғары RTT - агрессивті жалқау жүктеме.
Батарея және жылу: таймер жиілігін шектеу, FPS фон анимацияларын төмендету.
Қысу: Мәтін үшін Brotli, дұрыс 'Accept-Encoding'.
Wi-Fi бойынша prefetch тек ықтимал ауысулар үшін (басу тарихы).

11) Қолжетімділік және SEO

Скелет ≠ мазмұн: экран оқырмандарына кедергі келтірмейді; фокустың қисынды тәртібі.
Кілт мәтіннің HTML сервері - JS артында бәрін жасырмаңыз.
Alt-мәтіндер мен тақырыптар жүктелгенге дейін қол жетімді болып қалады.
Lazy мазмұны пернетақтадағы бағыттарды бұғаттамауы керек.

12) Өлшемдер және нысаналы мәндер

LCP (hero-сурет/тақырып): ≤ 2,5 с (мобайл).
INP (енгізуге реакция): ≤ 200 мс.
CLS: ≤ 0,1.
TTFB: ≤ 500 мс; TTI: ≤ 3 с.
Bytes over the wire (first view): қатаң бюджет (мысалы, ≤ 200-300 КБ крит. ресурстар).
Scroll-jank: <1% кадр> 16,7 мс.

• 'lazy _ enqueued '/' lazy _ loaded' (id, түрі, өлшемі, latency),
• 'component _ hydrated' (уақыт, JS салмағы),
• `virtualized_window_resize`,
• `lcp_candidate_shown`, `skeleton_time_visible`,
• қателер ('img _ error', 'decode _ timeout').

13) Типтік аймаққа арналған паттерндер

Басты бет/Каталог: SSR + skeleton карточкалары, lazy кескіндер, прогрессивті сүзгілер.
Тауар/ойын карточкасы: preload + high priority кейіпкер бейнесі; галерея - lazy; пікірлер - басу бойынша.
Ұзын мақалалар/wiki: TOC, оқу прогресі, медиа/код блоктары үшін lazy, мазмұны кейінге қалдырылған.
Лайв-таспалар: жолдарды виртуалдандыру, «авто-скроллды тоқтату», буфер лимиті.

14) Антипаттерндер

Бүкіл экранға> 1-2 с прогрессіз спиннер.
Lazy орын ұстаушыларсыз → макет секірісі (CLS ↑).
Сирек сценарийлер үшін «барлығы JS бірден» жүктеу.
Ауыр қаріптерді/суреттерді сыни бөлімге инлайндау.
Карточкалардың болжанбайтын өлшемдері → «қаңғыған» контент.
Сыни жүктеме (логотип, hero-мәтін) - LCP бұзады.
«Артқа» кейін позицияны қайтарудың болмауы.

15) Енгізу чек-парағы (қадамдық)

Спринт 1 - Диагностика: LCP/INP/CLS/TTFB өлшеңіз; ресурстар мен сыни жолдың картасын жасаңыз.
Спринт 2 - Сын/басымдық: сыни CSS/HTML, 'preconnect '/' preload', JS-күбілерді азайтыңыз.
Спринт 3 - Медиа: AVIF/WebP, 'srcset/sizes', бекітілген өлшемдер, non-hero үшін lazy.
Спринт 4 - Тізімдер: виртуализация, анкерлік жүктеме, skeletons/shimmer.
Спринт 5 - Сәулет: жартылай гидрация/аралдар, SSR/SSG/ISR, streaming.
6-спринт - «content-visibility», priority hints, debounce, Web Workers.
Спринт 7 - A/B және телеметрия: скелетондардың нұсқаларын, lazy деңгейлерін, бюджеттерді салыстыру.
Спринт 8 - Релиздер гигиенасы: ассеттер, кэш-бастинг, rollback-стратегиялар нұсқалары.

16) Глоссарий (қысқаша)

Lazy-loading - көрінбейтін мазмұнды кейінге қалдыру.
LCP/INP/CLS/TTFB/TTI/TBT - UX жылдамдығының негізгі өлшемдері.
Code-splitting/Гидрация/Аралдар - ұсақтау және жандандыру UI техникасы.
Виртуалдандыру - тізімнің көрінетін терезесінің рендері.
Priority Hints/Preconnect/Preload - шолғышқа не бұрын тиеу керектігі туралы нұсқау.
Content-visibility - көрінбейтін мазмұн үшін есептеулерді өткізіп жіберу.

17) Жиынтық

Lazy-loading - «орнатылған 'loading =» lazy' және дайын 'емес. Бұл жүйе: сыни жол, дұрыс медиа форматтары, аралдық интерактивтілік, виртуализация және телеметрия. Маңызды нәрсені жылдам, екіншісін көзге көрінбейтін және арзан, ал макетті болжауға болады. Сонда өнім кез келген құрылғыда және кез келген желіде тез сезіледі.