Lazy-loading და UX აჩქარება
1) მიზნები და პრინციპები
Lazy-loading არის სტრატეგია, რომელიც მნიშვნელოვანია დაუყოვნებლივ, ხოლო დანარჩენი საჭიროებისამებრ. მიზნები:- შეამცირეთ TTI/LCP კრიტიკული გზით.
- მოდელის (დაბალი CLS) სტაბილიზაცია პროგნოზირებადი ზომებით.
- დაზოგეთ ბატარეა და ტრეფიკი მობილზე.
- კონვერსიის ამაღლება: მომხმარებელი უფრო ადრე ხედავს მოქმედებას.
პრინციპები: პრიორიტეტი - პროგრესი, პროგნოზირება. ჯერ კრიტიკული შინაარსი, შემდეგ პროგრესული შევსება და გაუმჯობესების შემდგომი დატვირთვა.
2) გაწვევის კრიტიკული გზა
კრიტიკული HTML: დაუყოვნებლივ მიეცით „above-the-fold“ მარკირება.
კრიტიკული CSS: inline - 10-15 KB; დანარჩენი - 'media = „print“' + swap/საწვავი.
JS, როგორც ბლოკერი: 'defer '/' async', ჩანგებად დაყოფა, ლოგიკის დატვირთვა მარშრუტებზე.
შრიფტები: 'font-display: swap' optional ', WOFF2 წინასწარი დატვირთვა, სისტემური fallback' და
3) ქსელის რესურსების პრიორიტეტი
Preconnect CDN/შრიფტები/გამოსახულებები (TCP + TLS წინასწარ).
DNS prefetch მესამე დომენებისთვის.
კრიტიკული სურათების/შრიფტების/სკრიპტების Preload.
Priority Hints (' importance =“ high' low“,' fetchpriority =“ high“ გმირული გამოსახულებისთვის).
HTTP/3/QUIC: ნაკლები ლატენტობა; CDN edge უფრო ახლოს არის მომხმარებელთან.
ქეშის პოლიტიკა: 'immutable' ვერსირებული ასეტებისთვის; სწორი ETag/Last-Modified.
4) პროფესიული რენდინგი და დატვირთვის მდგომარეობა
Skeletons/Shimmer ნაცვლად spinners: ვიზუალური პროგრესი „ნახტომი“ გარეშე.
Placeholders ფიქსირებული ზომით (ბარათები, მინიატურა) - ნულოვანი CLS.
Streaming/Chunked HTML: სწრაფად მიეცით ჩარჩო, შემდეგ შეავსეთ შინაარსი.
Optimistic UI (ფრთხილად): მყისიერი მოქმედება, რასაც მოჰყვა სანდოობა.
5) Lazy-loading მედია
სურათები:' loading =“ lazy“',' decoding =“ async“', AVIF/WebP ფორმატები (JPEG/PNG ფოლბეკი).
Responsive: 'srcset '/' sizes' სხვადასხვა DPR/სიგანეზე; არ ატვირთოთ 3 ×, სადაც საკმარისია 1 ×.
პროგნოზირებადი სიმაღლე: 'width/height' ან CSS 'aspect-ratio'.
ვიდეო: „preload =“ metadata „“, პლაკატების შემდგომი დატვირთვა, ავტოპაუზა viewport- ის გარეთ.
ხატები: sprite/inline SVG; ზედმეტი HTTP მოთხოვნების თავიდან აცილება.
6) ზარმაცი კომპონენტები და მარშრუტები
Code-splitting: დინამიური იმპორტი მარშრუტებზე/ვიჯეტებზე.
კომპონენტები-კუნძულები/ნაწილობრივი ჰიდრაცია: გააცოცხლეთ მხოლოდ ინტერაქტიული ზონები.
SSR/SSG + ISR: გადააკეთეთ HTML სერვერზე, განაახლეთ სავარაუდო.
Suspense/Defer (გამოყენებული ჩარჩოში): მონაცემთა დაშლა და UI.
7) უზარმაზარი სიები და ცხრილი
ვირტუალიზაცია: მხოლოდ ხილული არეალის + ბუფერი.
კითხვარის შევსება: შეინახეთ პოზიცია პაკეტების დატვირთვისას.
Batch განახლებები: ფრჩხილების შემცირება.
პროგნოზირებადი ზომებისთვის Fixed row height ან „contain-intrinsic-size“.
8) CSS და ბრაუზერის ამაჩქარებლები
'შინაარსის ხედვა: auto': ბრაუზერი გადის უხილავ (მინიმალურ გამოთვლებს).
'contain '/' will-change': შეზღუდეთ სტილის/განლაგების გავლენის სფერო.
ანიმაციები: მხოლოდ ტრანსფორმირება/გაფართოება; თავიდან აიცილოთ layout/paint მძიმე ეფექტები.
Shadow და blur ეკონომიურია, განსაკუთრებით სიებში.
9) მოვლენების მართვა და JS დატვირთვა
პასიური მსმენელები skroll/tache ('{passive: true').
Debounce/throttle resize/scroll/დამუშავებისთვის.
ვიჯეტების გადავადებული ინიციალიზაცია viewport- ის გარეთ (IntersectiObserver).
მძიმე გამოთვლების გადაცემა Web Workers- ში.
10) მობილური კონტექსტი
ქსელი: ნელი 3G/მაღალი RTT - უფრო აგრესიული, ვიდრე ზარმაცი დატვირთვა.
ბატარეა და სითბო: შეზღუდეთ ტაიმერების სიხშირე, შეამციროთ FPS ფონის ანიმაციები.
შეკუმშვა: Brotli ტექსტისთვის, სწორი 'Accept-Encoding'.
Prefetch Wi-Fi მხოლოდ სავარაუდო გადასვლებისთვის (დაწკაპუნების ისტორია).
11) წვდომა და SEO
ჩონჩხი - შინაარსი: არ ერევა ეკრანის მკითხველს; ლოგიკური ფოკუსის პროცედურა.
სერვერის HTML საკვანძო ტექსტი - არ დაიმალოთ ყველაფერი JS- სთვის.
ალტ ტექსტები და სათაურები ხელმისაწვდომი რჩება დატვირთვამდე.
ლაზის შინაარსმა არ უნდა დაბლოკოს მარშრუტები კლავიატურიდან.
12) მეტრიკა და მიზნები
LCP (ჰეროიკული სურათი/სათაური): 2.5 ევრო (მობილური).
INP (შეყვანის რეაქცია): 200 ms ევრო.
CLS: ≤ 0,1.
TTFB: 500 ms; TTI: 3 გვ.
Bytes over the wire: მკაცრი ბიუჯეტი (მაგალითად, 200-300 KB Creet). რესურსები).
Scroll-jank: პერსონალის <1%> 16.7 ms.
- 'lazy _ enqueued '/' lazy _ loaded' (id, ხედი, ზომა, ლატენცია),
- 'component _ hydrated' (დრო, წონა JS),
- `virtualized_window_resize`,
- `lcp_candidate_shown`, `skeleton_time_visible`,
- შეცდომები ('img _ error', 'decode _ timeout').
13) ნიმუშები ტიპიური ზონებისთვის
მთავარი/კატალოგი: SSR + skeleton ბარათები, ლაზის სურათები, პროგრესული ფილტრები.
საქონლის/თამაშის ბარათი: preload + high priority გმირის გამოსახულება; გალერეა - ლაზი; მიმოხილვები - დაწკაპუნებით.
გრძელი სტატიები/wiki: TOC, კითხვის პროგრესი, მედია/კოდი ბლოკების ლაზი, შეფერხებული შინაარსები.
Live ლენტები: სტრიქონების ვირტუალიზაცია, „Auto-skroll პაუზა“, ბუფერული ლიმიტი.
14) ანტიპატერები
სპინერი მთელ ეკრანზე> 1-2 პროგრესის გარეშე.
ადგილობრივების გარეშე Lazy არის მოდელის ნახტომი (CLS).
„მხოლოდ JS დაუყოვნებლივ“ დატვირთვა იშვიათი სცენარებისთვის.
მძიმე შრიფტები/სურათები იკითხება კრიტიკულ ნაწილში.
ბარათების არაპროგნოზირებადი ზომა არის „მოხეტიალე“ შინაარსი.
კრიტიკული ზარმაცი დატვირთვა (ლოგო, hero ტექსტი) - არღვევს LCP.
პოზიციის დაბრუნების არარსებობა „უკან“ შემდეგ.
15) განხორციელების სიის სია (ეტაპობრივი)
სპრინტი 1 - დიაგნოზი: გაზომეთ LCP/INP/CLS/TTFB; შეადგინეთ რესურსებისა და კრიტიკული გზის რუკა.
Sprint 2 - კრიტიკა/პრიორიტეტი: კრიტიკული CSS/HTML, „preconnect '/' preload“, შეამცირეთ JS ჩანკები.
სპრინტი 3 - მედია: AVIF/WebP, 'srcset/sizes', ფიქსირებული ზომები, lazy for non-hero.
Sprint 4 - სიები: ვირტუალიზაცია, კითხვარის შევსება, skeletons/shimmer.
სპრინტი 5 - არქიტექტურა: ნაწილობრივი ჰიდრავლიკა/კუნძულები, SSR/SSG/ISR, ნაკადი.
Sprint 6 - თხელი კონფიგურაცია: 'შინაარსის ხედვა', პრიორიტეტი, debounce, Web Workers.
სპრინტი 7 - A/B და ტელემეტრია: შეადარეთ ჩონჩხის ვარიანტები, ლაზის დონე, ბიუჯეტები.
Sprint 8 - გამოშვების ჰიგიენა: ასეტების ვერსიები, ქეშის ბასტინგი, rollback სტრატეგია.
16) გლოსარიუმი (მოკლედ)
Lazy-loading არის უხილავი შინაარსის დაგვიანებული დატვირთვა.
LCP/INP/CLS/TTFB/TTI/TBT არის UX სიჩქარის მთავარი მეტრიკა.
Code-splitting/Hydrania/Island - გამანადგურებელი და აღორძინების ტექნიკა UI.
ვირტუალიზაცია არის სიის თვალსაჩინო ფანჯრის რენდერი.
Priority Hints/Preconnect/Preload - ბრაუზერის მითითებები, თუ რა უნდა ატვირთოთ ადრე.
შინაარსი - ხედვა - უხილავი შინაარსის გამოთვლების გამოტოვება.
17) შედეგი
Lazy-loading - ეს არ არის „loading =“ lazy“ და მზად არის“. ეს არის სისტემა: კრიტიკული გზა, სწორი მედია ფორმატები, კუნძული ინტერაქტიულობა, ვირტუალიზაცია და ტელემეტრია. გახადეთ მნიშვნელოვანი მყისიერი, მეორეხარისხოვანი - უხილავი და იაფი, ხოლო განლაგება - პროგნოზირებადი. შემდეგ პროდუქტი სწრაფად იგრძნობა ნებისმიერ მოწყობილობაში და ნებისმიერ ქსელში.