Obciążenie leniwe i przyspieszenie UX

1) Cele i zasady

• Zmniejszenie TTI/LCP kosztem ścieżki krytycznej.
• Ustabilizować układ (low CLS) o przewidywalnych wymiarach.
• Zapisz baterię i ruch do telefonu komórkowego.
• Podnieś konwersję - użytkownik widzi akcję wcześniej.

Zasady: priorytet → postęp → przewidywalność. Po pierwsze, zawartość krytyczna, następnie treść progresywna i poprawa po obciążeniu.

2) Ścieżka oddawania krytycznego

Krytyczny HTML: Od razu podaj znacznik „above-the-fold”.
Krytyczny CSS: inline ≤ 10-15 KB; reszta to 'media =' print' + swap/reload.
JS jako bloker: 'defer '/' async', partycjonowanie kawałków, logika obciążenia wzdłuż tras.
Czcionki: 'font-display: swap' optional ', WOFF2 preload, system fallback' oraz.

3) Priorytetowe traktowanie zasobów sieciowych

Preconnect do CDN/czcionki/obrazy (TCP + TLS z wyprzedzeniem).
Prefetch DNS dla domen trzecich.
Wstępne załadowanie obrazów krytycznych/czcionek/skryptów.
Wskazówki priorytetowe ('znaczenie =' high 'low', 'fetchpriority =' high 'dla wizerunku bohatera).
HTTP/3/QUIC: mniej opóźnień; Krawędź CDN jest bliżej użytkownika.
Polityka w zakresie pamięci podręcznej: „niezmienne” dla aktywów wersjonowanych; poprawne ETag/Last-Modified.

4) Progresywne stany renderowania i pobierania

Szkielety/Shimmers zamiast spinners: postęp wizualny bez „skakania”.
Znaczniki o stałym rozmiarze (karty, miniatury) - zero CLS.
Streaming/Chunked HTML: szybko oddać ramkę, a następnie dodać zawartość.
Optymistyczny interfejs użytkownika (ostrożność): natychmiastowe działanie, po którym następuje walidacja.

5) Zawartość nośników leniwego obciążenia

Obrazy: 'loading =' leniwy ',' decoding = 'async',' AVIF/WebP (JPEG/PNG fallback).
Responsive: 'srcset '/' sizes' w różnych DPR/szerokościach; nie ładuj 3 ×, gdzie wystarczy 1 ×.
Przewidywalna wysokość: „szerokość/wysokość” lub CSS „proporcje”.
Wideo: 'preload =' metadane ', plakaty po obciążeniu, automatyczna pauza poza portem widokowym.
Ikony: sprite/inline SVG; unikać niepotrzebnych żądań HTTP.

6) Komponenty i trasy leniwe

Podział kodu: dynamiczny import na trasach/widżetach.
Składniki wyspy/częściowe nawodnienie: Tylko animowane obszary interaktywne.
SSR/SSG + ISR: renderować HTML na serwerze, odświeżać stopniowo.
Suspense/Defer (w zastosowanych ramach): rozkład danych i interfejs użytkownika.

7) Ogromne listy i tabele

windowing-Render tylko obszar widoczny + bufor.
Przeładunek kotwicy: utrzymać pozycję podczas ponownego ładowania opakowań.
Aktualizacje partii: zminimalizuj redrawing podczas przewijania.
Wysokość stałego rzędu lub 'rozmiar wewnętrzny "dla przewidywalnych rozmiarów.

8) akceleratory CSS i przeglądarki

„widoczność końcowa: automatyczna”: przeglądarka pomija niewidoczne (minimalne obliczenia).
„contain ”/„ will-change”: ograniczenie wpływu stylów/układów.
Animacje: tylko transformacja/nieprzezroczystość; unikać efektów układania/malowania.
Cień i rozmycie - słabo, zwłaszcza na listach.

9) Zarządzanie obciążeniem zdarzeń i JS

Słuchacze pasywnego przewijania/tacha ('{pasywne: true}').
Debount/przepustnica do rozmiaru/przewijanie/obsługuje.
Odroczona inicjalizacja widżetów poza portem widokowym (Intersz Observer).
Migracja ciężkich komputerów do Web Workers.

10) Kontekst mobilny

Sieć: powolny 3G/high RTT - leniwe pobieranie jest bardziej agresywne.
Bateria i ciepło: ograniczyć częstotliwość zegarów, zmniejszyć FPS animacji tła.
Kompresja: Brotli dla tekstu, poprawne 'Accept-Encoding'.
Prefetch przez Wi-Fi tylko dla prawdopodobnych przejść (historia kliknięć).

11) Dostępność i SEO

Zawartość szkieletu: nie zakłóca czytników ekranu; logiczny porządek skupienia.
Serwer HTML tekstu klucza - nie ukrywać wszystko za JS.
Teksty i nagłówki Alt pozostają dostępne do przeładowania.
Leniwe treści nie powinny blokować tras z klawiatury.

12) Wskaźniki i cele

LCP (hero-image/header): ≤ 2. 5 s (mobilny).
INP (odpowiedź wejściowa): ≤ 200 ms.
CLS: ≤ 0,1.
TTFB: ≤ 500 ms; TTI: ≤ 3s.
Bajty nad przewodem (pierwszy widok): ścisły budżet (na przykład, ≤ 200-300 KB Kreta. zasoby).
Przewiń-jank: <1% klatki> 16. 7 ms.

• „lazy _ enqueued ”/„ leniwy _ loaded” (id, type, size, latency),
• „komponent _ hydrated” (czas, waga JS),
• „virtualized _ window _ resize”,
• 'lcp _ candidate _ shown', 'skeleton _ time _ visible',
• błędy ('img _ error', 'decode _ timeout').

13) Wzory dla typowych stref

Strona główna/Katalog: SSR + karty szkieletowe, leniwe obrazy, progresywne filtry.
Karta produktu/gry: preload obrazu bohatera + wysoki priorytet; galeria - leniwy; recenzje - klikając.
Długie artykuły/wiki: TOC, postęp w czytaniu, leniwe dla mediów/bloków kodowych, opóźnione tabele treści.
Taśmy na żywo: wirtualizacja linii, pauza automatycznego przewijania, limit bufora.

14) Antypattery

Spinner pełnoekranowy> 1-2 s bez postępu.
Leniwy bez lokalnych uchwytów → skoki układowe (CLS na).
Pobieranie „wszystkie JS na raz” dla rzadkich scenariuszy.
Wbudowane ciężkie czcionki/obrazy do części krytycznej.
Nieprzewidywalne rozmiary kart → treści roamingu.
Leniwe krytyczne ładowanie (logo, tekst bohatera) - łamie LCP.
Brak powrotu pozycji po „powrocie”.

15) Lista kontrolna wdrażania (krok po kroku)

Sprint 1 - Diagnostyka: pomiar LCP/INP/CLS/TTFB; Mapa zasobów i ścieżka krytyczna.
Sprint 2 - Criticism/Priority: Critical CSS/HTML, 'preconnect '/' preload', reduce JS chunks.
Sprint 3 - Media: AVIF/WebP, 'srcset/sizes', stałe wymiary, leniwe dla nie-bohatera.
Sprint 4 - Listy: wirtualizacja, przeładowanie kotwicy, szkielety/migotanie.
Sprint 5 - Architektura: częściowe nawodnienie/wyspy, SSR/SSG/ISR, streaming.
Sprint 6 - Precyzyjne dostrajanie: „widoczność treści”, wskazówki priorytetowe, debiut, pracownicy sieci Web.
Sprint 7 - A/B i telemetria: porównaj opcje szkieletu, leniwe poziomy, budżety.
Sprint 8 - Higiena wydania: wersje aktywów, basting gotówki, strategie rollback.

16) Słownik (krótki)

Leniwe obciążenie - opóźnione załadowanie niewidzialnej zawartości.
LCP/INP/CLS/TTFB/TTI/TBT są głównymi wskaźnikami prędkości UX.
Podział kodów/Nawilżanie/Wyspy - techniki zgniatania i rewitalizacji interfejsu użytkownika.
Wirtualizacja - Render a visible list box.
Wskazówki pierwszeństwa/Preonnect/Preload - instrukcje do przeglądarki co do ładowania wcześniej.
Widoczność treści - pominięcie obliczeń niewidzialnej zawartości.

17) Sedno sprawy

Leniwe obciążenie nie jest "put 'loading =" leniwy" i wykonane. "To jest system: ścieżka krytyczna, odpowiednie formaty mediów, interaktywność wyspy, wirtualizacja i telemetria. Uczynić ważne natychmiastowe, drugorzędne subtelne i tanie, a układ przewidywalny. Następnie produkt będzie czuć się szybko na dowolnym urządzeniu i w każdej sieci.