UI შესრულების ოპტიმიზაცია

1) რა არის „სწრაფი“?

TTFB (პირველი ბაიტის დაწყებამდე დრო) არის სერვერის/CDN სწრაფი პასუხი.
LCP (Largest Contentful Paint) - „მთავარი“ შინაარსი სწრაფად გამოჩნდა.
INP (Interaction to Next Paint) - რეაგირება ურთიერთქმედებაში.
CLS (Cumulative Layout Shift) - ინტერფეისის „მოსავლის“ არარსებობა.
TTI (დრო ინტერაქტიული) - როდესაც ყველაფერი უკვე პასუხობს.
რეკომენდებული მითითებები: LCP-2. 5 გვ, INP - 200 ms, CLS - 0. 1 (რეალური მომხმარებლების 75-ე percentille).

2) პროცესი: გაზომეთ, იპოვეთ ვიწრო ადგილები და დააფიქსირეთ ბიუჯეტები

1. გაზომეთ: RUM (რეალური მომხმარებლები, შეაფასეს ქვეყნები/ქსელები/მოწყობილობები) + სინთეზური (Lighthouse/დამკვირვებლები).
2. მოძებნეთ: პროფილის Performance (გრძელი დავალებები> 50 ms, layout thrashing, დამატებითი გამყიდველები).
3. დაფიქსირება: ბიუჯეტები (წონა JS/CSS/შრიფტები, LCP/INP) და წითელი ხაზები CI- ში.

3) ქსელი და რესურსების დატვირთვა

3. 1 HTTP და პრიორიტეტები

ჩართეთ HTTP/2/3, Brotli შეკუმშვა.
'preconnect' კრიტიკულ დომენებზე; 'dn-prefetch' მეორეხარისხოვანი.
'preload' კრიტიკული რესურსებისთვის (გმირი, სურათი, მთავარი შრიფტი).
' fetchpriority =“ high/low“ და' priority 'მინიშნებები, სადაც მხარდაჭერილია.

3. 2 ქეშირება

ფაილის ჰაშის სტატიკა: 'Cache-Control: public, max-age = 31536000, immutable'.
HTML - მოკლე TTL + stale-while-revalidate CDN- ის საშუალებით.
ETag/Last-Modified და Service Worker ოფლაინ/განმეორებითი ვიზიტებისთვის.

4) კოდი: ნაკლები, მოგვიანებით, „გლუვი“

4. 1 შეკრება

Tree-shaking, minify (в т.ч. dead-code-elim).
კოდირება მარშრუტებზე/ვიჯეტებზე, დინამიური იმპორტი.
თავიდან აიცილოთ „გლობალური“ მძიმე პაკეტები საბაზო ბანდლში (moment) Intl/Day. js).

4. 2 Rendering და HTML მიწოდება

SSR/ISR/ნაკადი: პირველი ჩარჩოს მიცემა და მთავარი შინაარსი.
Partial/Islands hydration: მხოლოდ ინტერაქტიული საიტების გაპრიალება.
defer არის ყველა არაკრიტიკული: '<script ტიპი = „მოდული“ defer>'.

4. 3 რეაქტიული სპეციფიკა (თუ იყენებთ React- ს)

`React. lazy '+' Suspense 'ზარმაცი ვიჯეტებისთვის.
'Starttransition' და 'useDeferredValue' მძიმე ფილტრების/ძებნის მიზნით.
RSC (Server Components) - სერვერზე გათვლები, კლიენტზე JS- ზე ნაკლები.
States in state (zustand/redux): ხელი მოაწერეთ კომპონენტებს ფრაგმენტებზე და არა მთელ ნაკადზე.

5) რენდერი და მდგომარეობა: სად „შენელდება“

5. 1 მოჭიდავეთა იზოლაცია

ამოიღეთ დიდი კომპონენტები, ამოიცანით ('memo', 'useMemo', 'useCallback').
სიების გასაღებები სტაბილურია; არ შექმნათ ახალი ფუნქციები/ობიექტები საჭიროების გარეშე.
მოერიდეთ „გლობალურ“ კონტექსტს ხშირად ცვალებადი მონაცემებისთვის - გამოიყენეთ სელექტორები ან ღონისძიების საბურავები.

5. 2 ვირტუალიზაცია და დიდი სიები

ფურცლები/ცხრილები - ვირტუალიზაცია (render window).
Paginite/infinite-scroll ერთად backpressure (დაუყოვნებლივ არ დატვირთოთ 100k სტრიქონი).
მძიმე ვიჯეტების გადავადებული ინიციალიზაცია ვიუპორტის გარეთ.

5. 3 Layout & paint

content-visibility: auto; ფარული სექციებისთვის (ბრაუზერი არ აკეთებს უხილავს).
contain და 'contain-intrinsic-size' პროგნოზირებადი ზომებისთვის.
თავიდან აიცილეთ layout- ის ხშირი კითხვა-ჩანაწერები; ჯგუფური გაზომვები.
გამოიყენეთ will-change დოზირებული (წინააღმდეგ შემთხვევაში ზედმეტი მეხსიერება/ფენები).

6) სურათები და გრაფიკა

ფორმატები: AVIF/WebP (fallback PNG/JPEG).
Responsive მიდგომა: 'srcset' + 'sizes', რეტინისთვის დენსიტი.
' loading =“ lazy“' არა გმირული სურათებისთვის; priority/preload - მხოლოდ LCP კანდიდატისთვის.
პლეიშოლდერები ფიქსირებული ზომით - CLS ნახტომი არ არის.
Canvas/charts: offscreen tanvas და Web Worker დასახლებებისთვის; Batching platching.

7) შრიფტები და ტექსტი

მრავალი ნიშნის ნაცვლად ერთი ან ორი variable font.
'font-display: swap '/' optional', preload მთავარი ნიშნისთვის.
'size-adjust' შრიფტის შეცვლისას შემცირების „ნახტომი“.
ადგილობრივი fallback შრიფტები მსგავსი მეტრიკებით.

8) CSS და ანიმაცია

კრიტიკული CSS ინლაინი (<14-20 კბ), დანარჩენი გადადება.
გამოუყენებელი სტილის წაშლა (Purge/CSSTree).
ანიმაციები, თუ ეს შესაძლებელია ტრანსფორმაციისთვის/ოპერაციისთვის; პატივისცემა 'prefers-reduced-motion'.
თავიდან აიცილოთ ღრმა კასკადები და ფეთქებადი სელექტორები.

9) Web Workers, ნაკადი და რთული დავალებები

ყველა CPU მძიმე - Worker- ში (პარსინგი, დახარისხება, აგრეგაცია, ML).
ნაკადის API ('ReadablesStream', 'fetch' ნაკადებით) გრძელი პასუხებისთვის.
"RequestIdleCallback '/მიკროტასკების საშუალებით მონეტების დავალებების გამკაცრება რეაგირების შესანარჩუნებლად.

10) განლაგების სტაბილურობა (CLS)

შეინახეთ ადგილი LCP ელემენტის ქვეშ (სურათი/ვიჯეტი).
არ ჩადოთ ბანერები/ფირები ფიქსირებული ზომების გარეშე.
ასიმეტრიული ტულტიპები/სადღეგრძელოები - არ გადაიტანოთ შინაარსი; გამოიყენეთ ფენები/პორტალები.

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-N KB, CSS-M KB, initial-chunk-K KB.
Web-Vitals in CI (ემულირებული) + RUM-alerts (percentils).
Bandle- ის ანალიზი: წყარო-map-explorer/ანალიზატორი PR- ში.
კომპონენტების სპექტაკლი-ბენეფიციარები (10k ელემენტების გამყიდველი, რეაქციის დრო).

13) ანტი შაბლონები

დატვირთეთ „ყველაფერი და დაუყოვნებლივ“: გრაფიკები, რედაქტორები, ბარათები პირველ ეკრანზე.
უზარმაზარი გლობალური სტეიტი - კასკადის გამყიდველები.
2-4 × სასურველი ზომის სურათები, 'srcset/sizes- ის გარეშე.
გრძელი სინქრონული ციკლები მთავარ ნაკადზე.
'outline: none' და კასტომიური ხრიკები ოპტიმიზაციის გარეშე - ხელს უშლის რენდერის ინდიკატორებს.
ანიმაციები 'top/left' (არღვევს განლაგებას და იწვევს რეფლოუს).

14) ეკრანის ჩეკის სია

• LCP ≤ 2. 5 წმ 3G/mobile ტრაფიკზე, CLS-0. 1, INP - 200 ms
• კრიტიკული რესურსები: preload/პრიორიტეტები; დანარჩენი - defer/lazy
• Bandles: code-split, არ არსებობს ზედმეტი დამოკიდებულება
• ჩამონათვალის/ცხრილების ვირტუალიზაცია, მძიმე ვიჯეტების გადავადებული ინიციალიზაცია
• სურათები: AVIF/WebP, 'srcset/sizes', 'loading = "lazy" "
• შრიფტები: variable + 'font-display', preload მხოლოდ აუცილებელი
• CSS: კრიტიკული ინლაინი, Purge, 'შინაარსის ხედვა' და 'contain' იქ, სადაც შესაფერისია
• სამუშაო/idle მძიმე გამოთვლებისთვის
• ბიუჯეტები და ვებ - ვიტალები დაკავშირებულია დაშბორდებთან/ალერტებთან

15) განხორციელების გეგმა (3 გამეორება)

განმეორება 1 - სწრაფი გამარჯვებები (1-2 კვირა)

ჩართეთ Brotli/HTTP-2/3, CDN. კრიტიკული CSS და preload LCP რესურსები.
მძიმე ვიჯეტების დინამიურ იმპორტში გადატანა.
სურათები AVIF/WebP + 'srcset'. შრიფტები: 'font-display: swap'.

გამეორება 2 - სტრუქტურული გაუმჯობესება (3-4 კვირა)

მარშრუტების კოდი, ბანდლის ანალიზი, „მძიმე“ ლიბიის მოცილება.
სიების ვირტუალიზაცია, შინაარსის ვიზუალიზაცია, კონტეინერი-ინტრანსმიტალური-სიზი.
დანერგეთ SSR/ნაკადი/კუნძულები (სადაც არის შესაბამისი).
RUM Web-Vitals- ით, CI ბიუჯეტები.

გამეორება 3 - მასშტაბები და სტაბილურობა (მუდმივად)

Workers/offscreen tanvas, ანგარიშსწორება, starttranstion/deferredValue.
რეგულარული პერფორალური აუდიტი, რეგრესიების აპარატურა, გუნდის ტრენინგი.

16) მინი-FAQ

რა დააჩქარებს ყველაზე მეტად მობილურ ტელეფონზე?
ორიგინალური JS, SSR/ნაკადის შემცირება და LCP გამოსახულების ოპტიმიზაცია.

საჭიროა SSR ყოველთვის?
არა. თუ გვერდი დინამიურად ინტერაქტიულია და ცუდად არის გაჟღენთილი - islands/partial hydration შეიძლება უკეთესი იყოს.

რატომ არის INP ცუდი „მსუბუქი“ ბანდლთან?
ალბათ, მთავარ ნაკადზე გრძელი დავალებები (დახარისხება, გრაფიკა) - შეასრულეთ დავალებები Worker- ში და დაარღვიეთ დავალებები.

შედეგი

სწრაფი UI არის დისციპლინების ერთობლიობა: ქსელის პრიორიტეტები და ქეში, მცირე და გვიან ბანდლები, პროგნოზირებადი რენდერი ნახტომი, ეკონომიკური სურათები და შრიფტები, ასევე რეალურ სამყაროში მეტრიკის მუდმივი კონტროლი. შეიყვანეთ ბიუჯეტები, შეამოწმეთ შემოწმებები და ასწავლეთ გუნდს იფიქროს სიჩქარეზე თითოეულ ეტაპზე - ასე რომ, ინტერფეისი დარჩება სწრაფი დღეს და ერთ წელიწადში.