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"并准备就绪。"这是一个系统：关键路径，正确的媒体格式，岛屿交互性，虚拟化和遥测。做一个重要的瞬间，次要是不可思议和便宜，布局是可以预测的。然后在任何设备和网络上都能快速感受到产品。