Lazy-loading և UX արագացում

1) Նպատակներն ու սկզբունքները

Lazy-loading-ը անմիջապես ցույց տալու ռազմավարություն է, իսկ մնացածը 'երբ անհրաժեշտ է։ Նպատակները

Կրճատել TTI/LCP-ը կրիտիկական ճանապարհով։

Կայունացնել մոդեթը (ցածր CLS) կանխատեսելի չափսերով։

Պահպանեք մարտկոցը և տեղադրեք Altaile-ում։

Բարձրացրեք ծրարը, օգտագործողը տեսնում է գործողությունը նախկինում։

Սկզբունքները 'առաջնահերթությունը կանխատեսելիությունն է։ Սկզբում կրիտիկական բովանդակությունը, ապա առաջադիմական լրացումը և բարելավման ծանրաբեռնվածությունը։

2) Ռենդերինգի կրիտիկական ճանապարհը

Կրիտիկական HTML 'անմիջապես ցույց տվեք «above-the-fold» նշանը։

Կրիտիկական CSS: Inline No. 10-15 KB; մնացածը 'մեդիա = «print»' + swap/ավելացում։

JS-ը որպես բլոկեր '«www.er '/' async», Չանկայի բաժանումը, տրամաբանությունը բեռնել երթուղիներով։

Տառատեսակներ ՝ «font-www.play: swap 'optional», WOF2 բեռնումը, www.fallback '2019

3) Ցանցային ռեսուրսների գերակայությունը

Preconnations-ին CDN/տառատեսակների/պատկերների (TCP + TSA նախապես)։

RF-24fetch երրորդ ֆորումի համար։

Preload կրիտիկական պատկերներ/տառատեսակներ/ջութակներ։

Priority Hints («imult.ru =» high 'low «,» fetchpriority = «high» hero-պատկերի համար)։

HTTP/3/QUIC 'ավելի քիչ լատենտ; CDN-edge-ը ավելի մոտ է օգտագործողին։

Քաշ-քաղաքականություն '«immutable» տարբերակված ասետների համար։ ճիշտ ETag/Lox-Modified։

4) Progressive Rendering-ը և բեռնման վիճակը

Skeletons/Shimmers փոխարեն 'տեսողական առաջընթաց առանց «ցատկելու»։

Placeholders-ը ֆիքսված չափսերով (քարտեր, մանրանկարիչներ) զրոյական CLS-ն է։

Streaming/Chunked HTML: արագ տալ շրջանակը, հետո լրացնել բովանդակությունը։

Optimistic UI (զգուշորեն) 'ակնթարթային գործողություն հաջորդ վալիդացիայի հետ։

5) Lazy-loading մեդիա արտադրողը

Պատկերները ՝ "loading" = "lazy", "decoding =" async ", www.AVIF/WindoP (folbek JPEG/PNG)։

Responsive: "www.cset '/" sizes" տարբեր DPR/լայնության տակ; մի բեռնեք 3 հազար այնտեղ, որտեղ բավարար է 1 հազար։

Կանխատեսելի բարձրությունը '"width/height" կամ CSS' asport-ratio "։

Տեսահոլովակը '"preload =" metadata ", պաստառների բեռնումը, view.ru-ից դուրս ավտոպաուսը։

Իկոնկի 'sprite/intel SVG; խուսափել ավելորդ HTTP հարցումներից։

6) Ծույլ բաղադրիչները և երթուղիները

Code-splitting: դինամիկ տերմինալ երթուղիներով/վիջետներով։

Կղզի բաղադրիչները/մասնակի հիդրոէլեկտրակայանը 'վերակենդանացնել միայն ինտերակտիվ գոտիները։

SSR/SSG + ISR 'կտրել HTML-ը սերվերի վրա, թարմացնել ռեմենտալ։

Suspense/Winder (օգտագործված շրջանակի մեջ) 'տվյալների ապամոնտաժում և UI-ում։

7) Հսկայական ցուցակներ և սեղաններ

Վիրտուալացում (enting) 'ռենդեր միայն տեսանելի տարածք + բուֆեր։

Հարցաթերթիկ 'պահել դիրքը փականների բեռնման ժամանակ։

Batch-նորարարություն 'նվազագույնի հասցնել գծերը սկրոլում։

Fixed-row height կամ «intrinsic-size» կանխատեսելի չափերի համար։

8) CSS-ը և զննարկիչների արագացուցիչները

"wwww.ent-visibility: ww.ru '- բրաուզերը բաց է թողնում անտեսանելի (նվազագույն հաշվարկները)։

'Altain '/' will-change': սահմանափակել շարժիչի/դասավորության ազդեցության տարածքը։

Անիմացիաներ ՝ միայն տրանսֆորմ/opacity; խուսափել layout/paint ծանր ազդեցություններից։

Շեդոն և բլուրը տնտեսապես, հատկապես ցուցակներում։

9) Իրադարձությունների կառավարումը և JS բեռը

Պասիվ լսողները սկրոլլա/տաչա ("" passive: wwww.com ")։

Debounce/throttle-ում resize/scrope/մշակողները։

View.ru-ից (Intersoft Observer)։

Ծանր հաշվարկների տեղափոխումը Web Workers-ում։

10) Բջջային կոնտեքստը

Ցանցը 'դանդաղ 3G/բարձր RTT - ավելի ագրեսիվ ծույլ բեռնումը։

Մարտկոցը և ջերմությունը 'սահմանափակել թայմերների հաճախությունը, նվազեցնել FPS ֆոնային անիմացիաները։

Սեղմումը 'Brotli տեքստի համար, ճիշտ «Accept-Encoding»։

Wi-Fi-ի Expresfetch-ը միայն հավանական անցումների համար (տեսահոլովակների պատմությունը)։

11) Հասանելիությունը և SEO-ն

Կմախքը պարունակում է բովանդակություն, չի խանգարում էկրանի ընթերցողներին։ ֆոկուսի տրամաբանական կարգը։

Հիմնական տեքստի սերվերային HTML-ը չի թաքցնում ամեն ինչ JS-ի համար։

Alt-տեքստերը և վերնագրերը մնում են հասանելի մինչև ավելացումը։

Lazy-բովանդակությունը չպետք է արգելափակի ստեղնաշարի երթուղիները։

12) Metriki և ռուսական արժեքներ

LCP (hero-պատկեր/վերնագիր): 352,5 s (wwww.il)։

INP (ներդրման արձագանքը) '24200 մզ։

CLS: ≤ 0,1.

TTFB: 35500 մզ; TTI: 383 էջ։

Bytes over the wire (first): խիստ բյուջե (օրինակ ՝ 200-300 KB Քրիտ։ ռեսուրսներ)։

Scrome-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, կարդալու առաջընթաց, լրատվամիջոցների/կոդային բլոկների համար, որոնք հետաձգված են։

Live-ժապավեն. տողերի վիրտուալացում, «Avto-scroll», ռոտացիայի սահմանափակում։

14) Անտիպատերնի

Ամբողջ էկրանին "1-2 առանց առաջընթացի։

Առանց տեղացիների, Lazy-ը maket (CLS) է։

«Ընդամենը JS անմիջապես» բեռնումը հազվագյուտ մետաղների համար։

Ինլայնացնում են ծանր տառատեսակները/պատկերները կրիտիկական մասում։

Քարտերի անկանխատեսելի չափը բացատրվում է «թափառող» բովանդակությամբ։

Կրիտիկական բեռնումը (լոգոն, հերո-տեքստը) կոտրում է LCP-ը։

Ռուսական դիրքի բացակայությունը «ետ» հետո։

15) Chek-Show-( Suchagovo)

Sprint 1 - Ախտորոշիչ: Չափեք LCP/INP/CLS/TTFB; կազմեք ռեսուրսների քարտեզը և կրիտիկական ճանապարհը։

Սպրինտ 2 - Քննադատություն/գերակայություն 'կրիտիկական CSS/HTML, «preconnant »/« preload», նվազեցրեք JS-chanks։

Սպրինտ 3-Media: AVIF/WinP, «www.cset/sizes», ֆիքսված չափսեր, lazy non-hero համար։

Սպրինտ 4 - Ցուցակներ ՝ վիրտուալացում, անկերիկ բեռնաթափում, skeletons/shimmer։

Սպրինտ 5-Ճարտարապետություն 'մասնակի հիդրոմետր/կղզիներ, SSR/SSG/ISR, streaming։

Սպրինտ 6-Տոնային կարգավորում '«enttent-visibility», priority hinae, debounce, Web Workers։

Sprint 7 - A/B և հեռուստացույց. Համեմատեք կմախքների տարբերակները, lazy մակարդակները, բյուջեները։

Սպրինտ 8-Գիգիենան 'ասսեթների, քաշ-բաստինգի, rollback-ռազմավարության տարբերակները։

16) Գլոսարիա (հակիրճ)

Lazy-loading-ը անտեսանելի բովանդակության հետաձգված բեռնումն է։

LCP/INP/CLS/TTFB/TTI/TBT-ը UX արագության հիմնական մետրերն են։

Code-splitting/Gidance/Կղզիները UI-ի վերակենդանացման և վերակենդանացման տեխնոլոգիաներ են։

Վիրտուալիզացիան տեսանելի պատուհանի ռենդեր է։

Priority Hinae/Preconnect/Preload - զննարկչի հրահանգները, որոնք նախկինում բեռնվում էին։

Content-visibility-ը անտեսանելի բովանդակության համար հաշվարկների կոդն է։

17) Արդյունքը

Lazy-loading-ը չի "տեղադրել" loading = "lazy" և պատրաստ "։ Սա համակարգ է, կրիտիկական ճանապարհ, ճիշտ ռուսական մեդիա, կղզու ինտերակտիվ, վիրտուալացում և հեռաչափություն։ Արեք կարևոր ակնթարթային, երկրորդական, աննկատ և էժան, իսկ մոդելը կանխատեսելի է։ Այդ ժամանակ ապրանքը արագ կզգա ցանկացած սարքի վրա և ցանկացած ցանցում։