Lazy-loading和UX加速

1）目標和原則

• 以關鍵路徑為代價削減TTI/LCP。
• 以可預測的大小穩定布局（低CLS）。
• 將電池和流量保持在移動狀態。
• 提高轉換：用戶更早看到動作。

原則：優先事項→進展→可預測性。首先是關鍵內容，然後是漸進式填充和後期增強。

2）關鍵渲染路徑

批評HTML：立即給出「對折」標記。
關鍵CSS：inline ≤ 10-15 KB；剩下的是'media='print'+ swap/分載。
JS作為鎖定器：「defer」/「async」，分為錢卡，在路線上加載邏輯。
字體：「字體顯示：交換」optional「，預加載WOFF2，系統後退」和。

3）網絡資源優先排序

Preconnect到CDN/字體/圖像（TCP+TLS提前）。
第三域的DNS-prefetch。
預覽關鍵圖像/字體/腳本。
Priority Hints（對於英雄圖像，「importance=」high'low「，」fetchpriority=「high」）。
HTTP/3/QUIC：減少潛在性；CDN邊緣更接近用戶。
緩存策略：轉化代理的「immutable」；正確的ETag/最後修改。

4）漸進式渲染和下載狀態

Skeletons/Shimmer代替微調：視覺進步沒有「跳躍」。
固定尺寸的Placeholders（卡片，縮影）為零CLS。
Streaming/Chunked HTML：快速提供框架,然後添加內容。
Optimistic UI（小心）：即時動作，然後驗證。

5） lazy-loading媒體內容

圖像：'loading='lazy'，'decoding='async'，AVIF/WebP格式（JPEG/PNG民傳）。
響應：不同的DPR/寬度下的 「srcset」/「sizes」；不要裝載3 × 1 ×足夠的地方。
可預見的高度：「width/height」或CSS 「aspect-ratio」。
視頻："preload="metadata"，海報後裝載，觀景臺外的自動停靠站。
圖標：sprite/inline SVG；避免多余的HTTP請求。

6）懶惰的組件和路線

代碼分割：沿路徑/小部件動態導入。
元件-島嶼/部分加氫：僅讓交互式區域恢復活力。
SSR/SSG+ISR：在服務器上渲染HTML，增量刷新。
Suspense/Defer（在使用的框架中）：數據解構和UI。

7）巨大的列表和表

虛擬化（Windowsing）：僅可見區域渲染+緩沖區。
錨定裝載：裝載包時保持位置。
Batch更新：在滾動時盡量減少重繪。
可預測尺寸的固定行重型或「contain-intrinsic尺寸」。

8） CSS和瀏覽器加速器

「content-visibility： auto」：瀏覽器跳過不可見（最小計算）。
「contain」/「will-change」：限制樣式/布局的影響範圍。
動畫：僅轉換/opacity；避免使用layout/paint重效應。
Shadow和blur是經濟的，尤其是在列表中。

9）事件管理和JS負載

被動滾動聽眾/tacha（'{passive： true}'）。
resize/scroll/處理程序上的 Debounce/throttle。
延遲初始化viewport外的小部件（IntersectionObserver）。
將重型計算遷移到Web Workers。

10）移動環境

網絡：慢速3G/高 RTT-更激進的懶惰下載。
電池和熱量：限制計時器頻率，降低背景動畫的FPS。
壓縮：文本的Brotli，正確的「接受編碼」。
Wi-Fi預測僅適用於可能的過渡（點擊歷史）。

11）可用性和SEO

骨架≠內容：不會幹擾屏幕讀者；合乎邏輯的焦點順序。
服務器關鍵文本HTML-不要將所有內容隱藏在JS後面。
Alt文本和標題在加載之前仍然可用。
懶惰的內容不應阻止鍵盤上的路由。

12）度量指標和目標值

LCP（英雄圖像/標題）：≤ 2.5秒（移動）。
INP（輸入響應）：≤ 200毫秒。

CLS: ≤ 0,1.

TTFB：≤ 500毫秒；TTI：≤ 3秒。
電線上的字節（第一次查看）：嚴格的預算（例如，≤ 200-300 KB的克裏特島。資源）。
Scroll-jank： <1%影格>16.7毫秒。

• 'lazy_enqueued'/'lazy_loaded' （id, view, size, latency）,
• 「component_hydrated」（時間，JS重量），
• `virtualized_window_resize`,
• `lcp_candidate_shown`, `skeleton_time_visible`,
• 錯誤（「img_error」，「decode_timeout」）。

13）模範區域的模式

首頁/目錄：SSR+skeleton卡片,lazy圖像,漸進過濾器。
商品/遊戲卡：preload+high priority的英雄形象；畫廊-lazy；評論-按點擊。
冗長的文章/wiki：TOC，閱讀進展，媒體/代碼塊的懶惰，延遲目錄。
Live磁帶：行虛擬化、「自動滾動暫停」、緩沖區限制。

14）反模式

旋轉到整個屏幕>1-2沒有進展。
Lazy沒有定位器→模擬跳躍（CLS ↑）。
加載「所有JS立即」以獲取稀有腳本。
將重字體/圖像插入關鍵部分。
不可預測的卡尺寸→「漫遊」內容。
懶惰加載關鍵（徽標、英雄文本）-打破LCP。
「後退」後沒有返回位置。

15）實施支票（逐步）

沖刺1-診斷：測量LCP/INP/CLS/TTFB；繪制資源和關鍵路徑圖。
Sprint 2-批評/優先級：關鍵CSS/HTML，「preconnect」/「preload」，減少JS錢卡。
Sprint 3-媒體：AVIF/WebP，「srcset/sizes」，固定尺寸，懶惰的非英雄。
Sprint 4-列表：虛擬化,錨定加載,skeletons/shimmer。
Sprint 5-體系結構：部分水合/島嶼，SSR/SSG/ISR，流式傳輸。

Sprint 6-微調： 「內容可見性」,優先選擇,debounce, Web Workers.

Sprint 7-A/B和遙測：比較骨架變體，懶惰水平，預算。
Sprint 8-發布衛生：assets版本,緩存,rollback策略。

16）詞匯表（簡述）

Lazy-loading-延遲下載隱形內容。
LCP/INP/CLS/TTFB/TTI/TBT是UX速度的主要指標。
代碼分離/水合/島嶼-UI破碎和振興技術。
虛擬化-可見列表窗口的渲染。
Priority Hints/Preconnect/Preload-指示瀏覽器更早裝載。
內容可視性-跳過不可見內容的計算。

17）結果

Lazy-loading不是"設置"loading="lazy"並準備就緒。"這是一個系統：關鍵路徑，正確的媒體格式，島嶼交互性，虛擬化和遙測。做一個重要的瞬間，次要是不可思議和便宜，布局是可以預測的。然後在任何設備和網絡上都能快速感受到產品。