UI արտադրողականության օպտիմիզացում

1) Ի՞ նչ կարելի է համարել «արագ»

TTFB (ժամանակը մինչև առաջին բայթ) - սերվերի/CDN արագ արձագանքը։

LCP (Largest Contentful Paint) - «հիմնական» բովանդակությունը արագ հայտնվեց։

INP (Interaction to Next Paint) փոխազդեցության մեջ է։

CLS (Cumulative Layout Shift) - ինտերֆեյսի «խմորման» բացակայությունը։

TTI (Time to Interactive), երբ ամեն ինչ արդեն պատասխանում է։

Առաջարկվող կենտրոնները ՝ LCP 242։ 5 գ, INP 24200 ms, CLS 240։ 1 (75-րդ իրական օգտագործողների համար)։

2) Գործընթացն այն է, որ չափել հաճախորդներին նեղ տեղեր գտնելու համար անհրաժեշտ է ճշգրտել բյուջեները։

1. Չափել: RUM (իրական օգտագործողները, չափել են երկրներին/ցանցերին/dewisam) + սինթետիկ (Lighthouse/դիտորդներ)։

2. Գտնել 'Perform.ru (երկար առաջադրանքներ> 50 ms, layout thrashing, լրացուցիչ ռենդերներ)։

3. Ամրագրել 'բյուջեներ (քաշը JS/CSS/տառատեսակներ, LCP/INP) և կարմիր գծեր CI-ում։

3) Ռեսուրսների ցանցը և բեռնումը

3. 1 HTTP եւ առաջնահերթություններ

Ներառել HTTP/2/3, Brotli սեղմումը։

«preconnations» քննադատական օրինագծերի համար; «07-24fetch» երկրորդական։

«preload» կրիտիկական ռեսուրսների համար (հերոս-պատկեր, հիմնական տառատեսակը)։

«fetchpriority =» high/low «» և «priority» հուշումները որտեղ աջակցվում են։

3. 2 Քեշինգ

Ստատիկան ֆայլի հեշով '«Cache-Corl: public, max-age = 31536000, imutable»։

HTML-ը CDN-ի միջոցով կարճ TTL + stale-while-revalidate է։

ETag/Last-Modified և WindoWorker օֆլեյնի/կրկնվող վիզաների համար։

4) Կոդ ՝ ավելի քիչ, ավելի ուշ ՝ «ավելի»

4. 1 Հավաքում

Tree-shaking, minify (в т.ч. dead-code-elim).

Code-splitting-ը/vigetam, դինամիկ։

Խուսափել «գլոբալ» ծանր գործողություններից հիմնական խմբավորման մեջ (moment no Intl/Day. js).

4. 2 Ռենդերինգը և HTML-ի առաքումը

SSR/ISR/striming 'տալ շրջանակը և հիմնական բովանդակությունը առաջինը։

Partial/Islands hydration 'միայն ինտերակտիվ հատվածներ։

Syster-ը ամեն ինչ սխալ է ՝ <>։

4. 3 Ռեակտային հատկություններ (եթե օգտագործում եք React)

`React. lazy '+ «Suspense» ծույլ վիզաների համար։

«StartTransport» և «useDerredValue» ծանր ֆիլտրերի/որոնման համար։

RSC (Server Components) - հաշվարկներ սերվերի վրա, ավելի քիչ, քան JS-ը կլիենտում։

Բուծողները սթեյթում (zustand/redux) 'բաժանել բաղադրիչը բեկորների վրա, ոչ թե ամբողջ։

5) Ռենդերը և վիճակը. Որտե՞ ղ է «արգելակում»

5. 1 Ռենենդերի մեկուսացում

Կտրեք մեծ բաղադրիչները, հիշեք («memo», «useMemo», «useCallback»)։

Ցուցակների բանալիները կայուն են։ մի ստեղծեք նոր գործառույթներ/օբյեկտներ բացակայում են։

Խուսափեք «գլոբալ» կոնտեքստից հաճախ փոփոխվող տվյալների համար 'օգտագործեք ընտրողներ կամ իրադարձական անվադողեր։

5. 2 Վիրտուալացում և մեծ ցուցակներ

Թերթերը/աղյուսակները նկարագրում են վիրտուալիզացիան (render pro)։

Pagination/infinit-scroll backpressure-ից (մի բեռնեք 100k տողերով անմիջապես)։

Ծանր վիջեթների հետաձգված նախաձեռնությունը վյուպորտից դուրս։

5. 3 Layout & paint

content-visibility: auto; թաքնված հատվածների համար (զննարկիչը անտեսանելի չէ)։

www.ain-intrinsic-size "կանխատեսելի չափերի համար։

Խուսափեք հաճախակի կարդացածից, layout-ից (layout thrashing)։ նվազեցրեք։

will-change օգտագործեք (հակառակ դեպքում ավելացված հիշողությունը/շերտերը)։

6) Պատկերներ և գրաֆիկա

Մոսկվա: AVIF/Pro P (fallback PNG/JPEG)։

Responsive-մոտեցումը '"www.cset' +" sizes ", dronity-based ռետինի համար։

«loading =» lazy «» ոչ հերոսական պատկերների համար; priority/preload - միայն LCP թեկնածուի համար։

Պլեյշոլդերները ֆիքսված չափսերով չեն կարող CLS ցատկել։

Կանվաս/գծապատկերներ ՝ wwww.screen-canvas և Web Worker-ի համար։ վերափոխում։

7) Տառատեսակներ և տեքստեր

Մեկ-երկու variable font-ը բազմաթիվ գծագրման փոխարեն։

«font-play: swap '/' optional», preload հիմնական գծագրման համար։

«size-adjust» 'նվազեցնելու համար «ցատկ» տառատեսակը փոխարինելիս։

Տեղական fallback-տառատեսակները նման մետրերով։

8) CSS և անիմացիա

Կրիտիկական CSS inline (<14-20 kB), մնացած 'հետաձգել։

Հեռացնել չօգտագործված ոճերը (Purge/CSSTREE)։

Անիմացիաները հնարավորության դեպքում տրանսֆորմ/opacity; հարգել «wwww.fers-reduced-motion»։

Խուսափեք խորը կասկադներից և պայթուցիկ բուծողներից։

9) Web Workers, հոսք և ծանր խնդիրներ

Բոլոր CPU ծանր 'Worker (պարսինգ, տեսակավորում, ագրեգացիա, ML)։

Սթրիմ API («Readom Stream», «fetch» հոսքով) երկար պատասխանների համար։

«RequestIdleCallback »/միկրոշրջանների միջոցով Չանկայի առաջադրանքները նվազեցնելու համար։

10) Maket (CLS)

Պահեք LCP տարրի տակ (պատկեր/տեսանելի)։

Մի տեղադրեք դրոշներ/ժապավեններ առանց ֆիքսված չափերի։

Ասիմետրիկ tultips/tosta - մի շարժեք բովանդակությունը։ օգտագործել շերտեր/պորտալներ։

11) Սնիպետների օրինակներ

Կրիտիկական տառատեսակը և LCP պատկերը

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">

Լենիվայան և անվտանգ վիզայի նախաձեռնությունը

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>;
}

Մոդետի կայունացումը

css
.hero {
content-visibility: auto;
contain: layout paint;
contain-intrinsic-size: 720px 320px ;/LCP reserve/
}

12) Ռեգրեսիայի վերահսկողությունը և բյուջեները

Bundle-budget: Ընդհանուր JS 35N kB, CSS 35M kB, initial-chunk no K kB։

Web-Vitals-ը CI-ում (էմիլիզացված) + RUM-alerta (պերցենտիլների վրա)։

Խմբավորման վերլուծությունը 'source-map-inter/վերլուծություն PR-ում։

Բաղադրիչների պերֆորմաներ (ռենդեր 10k տարրեր, ռեակցիայի ժամանակը)։

13) Anti-patterna

Բեռնել «ամեն ինչ և անմիջապես» 'գրաֆիկներ, խմբագիրներ, առաջին էկրանին քարտեզներ։

Հսկայական գլոբալ սթեյթ է։

Պատկերները 2-4 հազար են, առանց «www.cset/sizes»։

Երկար սինխրոն ցիկլերը հիմնական հոսքի վրա։

«entine: none» և կաստոմային ֆոկուսները առանց օպտիմիզացման, խանգարում են ռենդերի ֆտորատորներին։

Անիմացիաները 'top/left "(կոտրում են դասավորությունը և առաջացնում են reflow)։

14) Էկրանի թուղթ

• LCP ≤ 2. 5 c 3G/medile, CLS 380։ 1, INP 35200 ms
• Կրիտիկական ռեսուրսներ ՝ preload/գերակայություններ; մնացած մասը 'www.er/lazy
• Բանդալներ ՝ code-split, ավելորդ կախվածություն չկա։
• Ցուցակների/աղյուսակների վիրտուալիզացիան, որը հետաձգվում է ծանր Wights-ի վերարտադրմամբ
• Պատկեր: AVIF/Windowcset/sizes "," loading = "lazy" "
• Տառատեսակներ: variable + «font-play», preload միայն անհրաժեշտ է։
• CSS: կրիտիկական inline, Purge, «entertent-visibility» և «entain», որտեղ տեղին է։
• Workers/idle ծանր հաշվարկների համար
• Բյուջեներն ու Web-Vitals-ը միացված են dashbordam/alertam-ին։

15) Իրականացման պլանը (3 իտացիա)

Iteration 1 - Արագ հաղթանակներ (1-2 շաբաթ)

Միացրեք Brotli/HTP-2/3, CDN։ Կրիտիկական CSS և preload LCP ռեսուրսներ։

Ծանր տեսիլքներ հասցնել դինամիկ օրինագծերին։

Նկարները wwww.AVIF/WinP + «www.cset»։ Տառատեսակներ ՝ «font-inflay play: swap»։

Iteration 2 - Կառուցվածքային բարելավումներ (3-4 շաբաթ)

Code-split երթուղիներով, խմբավորման վերլուծությունը, «ծանր» շարժիչների հեռացումը։

Ցուցակների վիրտուալացում, visibility բովանդակություն, www.ain-intrinsic-size։

Ներդրել SSR/striming/կղզիներ (որտեղ revanto)։

RUM-ը Web-Vitals-ի հետ, CI բյուջեները։

Iteration 3 - Մասշտաբը և կայունությունը (շարունակաբար)

Workers/wwwww.screen-Kanvas, batching No., starttTransport/wwwww.erredValue։

Ստացիոնար պերֆի աուդիտ, ռեգրեսիայի արագացում, թիմի ուսուցում։

16) Mini-FAQ

Ի՞ նչն է արագացնելու ամենաշատը Altaile-ում։

Սկզբնական JS, SSR/striming և LCP պատկերների օպտիմիզացումը։

Արդյո՞ ք պետք է միշտ SSR-ն։

Ոչ։ Եթե էջը դինամիկ ինտերակտիվ է և վատ է, islands/partial hydration կարող է ավելի լավ լինել։

Ինչու՞ INP-ն վատ է «թեթև» խմբավորման ժամանակ։

Հավանաբար երկար առաջադրանքներ (տեսակավորում, գրաֆիկա) հիմնական հոսքի վրա, տեղադրեք Worker-ում և սեղմեք առաջադրանքները։

Արդյունքը

Արագ UI-ն առարկաների հավաքածու է 'ցանցային գերակայություններ և քեշեր, ավելի փոքր և ուշ խմբեր, կանխատեսելի ռենդեր առանց ցատկելու, տնտեսական պատկերներ և տառատեսակներ, ինչպես նաև իրական աշխարհում մետրերի մշտական վերահսկողություն։ Մուտքագրեք բյուջեները, ավտոմատիզացրեք ստուգումները և սովորեցրեք թիմին մտածել արագության մասին յուրաքանչյուր կետում, այնպես որ ինտերֆեյսը կմնա արագ այսօր և տարի հետո։