Încărcare leneşă şi accelerare UX

1) Obiective și principii

• Reducerea TTI/LCP în detrimentul căii critice.
• Stabilizați aspectul (CLS scăzut) cu dimensiuni previzibile.
• Economisiți bateria și traficul către mobil.
• Raise Conversion - Utilizatorul vede acțiunea mai devreme.

Principii: prioritate → progres → predictibilitate. În primul rând, conținut critic, apoi conținut progresiv și îmbunătățiri post-încărcare.

2) Calea de redare critică

Critic HTML: Da „deasupra-ori” marcaj imediat.
CSS critic: inline ≤ 10-15 KB; restul este "media =" print' "+ swap/reîncărcare.
JS ca blocant: "amânați "/" async', partiționarea bucăților, încărcați logica de-a lungul rutelor.
Fonturi: 'font-display: swap' opțional ', WOFF2 preîncărcare, rezervă de sistem' și.

3) Prioritizarea resurselor rețelei

Preconectați-vă la CDN/fonturi/imagini (TCP + TLS în avans).
Prefetch DNS pentru domenii terțe.
Preîncărcați imagini critice/fonturi/scripturi.
Priority Hints („importanță =” high 'low „”, „fetchpriority =” high „” pentru imaginea eroului).
HTTP/3/QUIC: mai puțină latență; CDN-edge este mai aproape de utilizator.
Politici cache: „imuabile” pentru active versionate; corectă ETag/Ultima modificare.

4) Statele de redare și descărcare progresivă

Schelete/Shimmers în loc de spinners: progresul vizual fără „sărituri”.
Înlocuitori de dimensiuni fixe (carduri, miniaturi) - zero CLS.
Streaming/Chunked HTML: dați rapid cadrul, apoi adăugați conținut.
Interfață interfață optimistă (prudență): acțiune instantanee urmată de validare.

5) conținut media de încărcare leneș

Imagini: 'loading =' lenes '', 'decoding =' async', formate AVIF/WebP (JPEG/PNG fallback).
Responsive: „srcset ”/„ dimensiuni” sub diferite DPR/lățimi; nu încărcați 3 × în cazul în care 1 × este suficient.
Înălțime previzibilă: „lățime/înălțime” sau CSS „raport de aspect”.
Video: 'preîncărcare = „metadate”', postere post-încărcare, vizualizare automată în afara pauzei.
Pictograme: sprite/inline SVG; evitați cererile HTTP inutile.

6) Componente și rute leneșe

Împărțirea codului: import dinamic pe rute/widget-uri.
Componente insulare/Hidratare parțială: Animați numai zonele interactive.
SSR/SSG + ISR: redă HTML pe server, reîmprospătează treptat.
Suspans/Defer (în cadrul utilizat): descompunerea datelor și UI.

7) liste și tabele uriașe

windowing-Randare numai zona vizibilă + tampon.
Reîncărcarea ancorei: mențineți poziția la reîncărcarea ambalajelor.
Actualizări lot: minimiza redesenarea atunci când defilare.
Înălțime fixă sau „contain-intrinsec-size” pentru dimensiuni previzibile.

8) CSS și acceleratoare de browser

'content-vizibilitate: auto': browserul sare peste invizibil (calcul minim).
„contain ”/„ will-change”: limitarea influenței stilurilor/aspectului.
Animaţii: numai transformare/opacitate; evitați efectele de aspect/vopsea-grele.
Umbră și blur - rar, mai ales pe liste.

9) Gestionarea încărcării evenimentelor și JS

Ascultători pasivi de derulare/taha ('{pasiv: adevărat}').
Debounce/accelerație pentru a redimensiona/defila/manipulatori.
Inițializarea amânată a widget-urilor în afara portului de vizualizare (IntersectionObserver).
Migrarea de calcul grele pentru lucrătorii Web.

10) Context mobil

Rețea: lent 3G/high RTT - descărcare leneș este mai agresiv.
Baterie și căldură: limitați frecvența cronometrelor, reduceți FPS-ul animațiilor de fundal.
Compresie: Brotli pentru text, corect 'Accept-Encoding'.
Prefetch peste Wi-Fi numai pentru tranziții probabile (istoricul de clicuri).

11) Disponibilitate și SEO

Conținutul scheletului ≠: nu interferează cu cititoarele de ecran; ordinea logică a focalizării.
Server HTML de text cheie - nu ascunde totul în spatele JS.
Textele și antetele Alt rămân disponibile până la reîncărcare.
Conținutul leneș nu ar trebui să blocheze rutele de la tastatură.

12) Măsurători și obiective

LCP (erou-imagine/antet): ≤ 2. 5 s (mobil).
INP (răspuns de intrare): ≤ 200 ms.
CLS: ≤ 0,1.
TTFB: ≤ 500 ms; TTI: ≤ 3s.
Octeți peste sârmă (prima vizualizare): buget strict (de exemplu, ≤ 200-300 KB Creta. resurse).
Scroll-jank: <1% cadre> 16. 7 ms.

• 'lazy _ enqueued '/' lazy _ loaded' (id, type, size, latency),
• 'component _ hydrated' (timp, greutate JS)
• 'vrtualized _ window _ redimensionare',
• 'lcp _ candidate _ aratat', 'schelet _ time _ vizibil',
• erori ('img _ error', 'decode _ timeout').

13) Modele pentru zone tipice

Acasă/Director: Carduri schelet SSR +, imagini leneşe, filtre progresive.
Produs/carte de joc: erou imagine preîncărcare + prioritate mare; galerie - leneș; recenzii - prin clic.
Articole lungi/wiki: TOC, progresul citirii, leneș pentru blocuri media/cod, tabele întârziate ale conținutului.
Casete live: virtualizare linie, auto-derulare pauză, limită tampon.

14) Antipattern

Spinner cu ecran complet> 1-2 s fără progres.
Leneș fără suporturi locale → salturi de aspect (CLS ↑).
Descărcarea „toate JS dintr-o dată” pentru scenarii rare.
Fonturi/imagini grele în linie în partea critică.
Dimensiuni imprevizibile ale cardurilor → conținut în roaming.
Încărcare critică leneșă (logo, text erou) - pauze LCP.
Nicio poziţie nu se întoarce după „înapoi”.

15) Lista de verificare a implementării (pas cu pas)

Sprint 1 - Diagnostic: Măsura LCP/INP/CLS/TTFB; Harta resurselor și calea critică.
Sprint 2 - Critică/Prioritate: Critical CSS/HTML, „preconnect ”/„ preîncărcare”, reduce bucăți JS.
Sprint 3 - Media: AVIF/WebP, „srcset/mărimi”, dimensiuni fixe, leneș pentru non-erou.
Sprint 4 - Liste: virtualizare, reîncărcare ancoră, schelete/strălucire.
Sprint 5 - Arhitectură: hidratare parțială/insule, SSR/SSG/ISR, streaming.
Sprint 6 - Reglaj fin: „conținut-vizibilitate”, indicii prioritare, debunch, Web Workers.
Sprint 7 - A/B și telemetrie: comparați opțiunile scheletului, nivelurile leneșe, bugetele.
Sprint 8 - Igiena de lansare: versiuni de active, basting de numerar, strategii de rollback.

16) Glosar (scurt)

Lazy-loading - încărcare întârziată a conținutului invizibil.
LCP/INP/CLS/TTFB/TTI/TBT sunt principalele valori ale ratei UX.
Cod-divizare/Hidratare/Insule - UI tehnici de zdrobire și revitalizare.
Virtualizare - Redare casetă listă vizibilă.
Priority Hints/Preconnect/Preload - instrucțiuni către browser despre ce să încărcați mai devreme.
Conținut-vizibilitate - sărind peste calcule pentru conținut invizibil.

17) Linia de jos

Lazy-încărcare nu este "pune" încărcare = "leneș" "și făcut. "Acesta este sistemul: calea critică, formatele media potrivite, interactivitatea insulară, virtualizarea și telemetria. Asigurați-instant important, secundar subtil și ieftin, și aspectul previzibil. Apoi, produsul se va simți rapid pe orice dispozitiv și pe orice rețea.