为什么关注可持续
可持续 Web 设计的目标是以更小的资源消耗，提供同等或更优的用户价值。它贯穿从视觉到工程的全链路：减少传输体积与请求、降低渲染与交互开销、确保在弱网与辅助技术下仍然可用。
与性能不同，可持续不仅追求“更快”，还强调“更少、更稳、更可达”。
目标与衡量
- 传输体积：首包体积与关键路径资源尽可能小（参考:
/blog/bundle-optimization、/blog/code-splitting-practices）。 - Web Vitals：LCP/INP/CLS 达标并稳定（参考:
/blog/web-vitals）。 - 请求复用：命中强/协商缓存，CDN 命中率提升（参考:
/blog/caching-strategy、/blog/http-caching）。 - 媒体能耗：图片/视频格式、尺寸、比特率与懒加载策略合理（参考:
/blog/image-optimization、/blog/video-optimization）。 - 无障碍：语义结构、对比度、焦点可见、键盘可达（参考:
/blog/accessibility-guidelines、/blog/wcag-3-scoring-model、/blog/wcag-2.2-guide）。
设计与内容策略
- 信息优先：首屏只呈现“必须看到”的内容，降低干扰元素密度。
- 色彩与对比：在暗色/低对比环境中保持可读性，兼顾能耗与可达性。
- 字体：限制字重与变体数量，优先系统字体或可缓存的可变字体。
- 动效：默认克制，避免持续性动画；对“减少动态效果”系统偏好予以尊重。
- 组件复用：减少样式分叉；统一卡片、列表、导航等组件规格。
工程落地要点
- 关键渲染路径
- 关键 CSS 内联 + 非关键 CSS 延后；异步加载非首屏 JS。
- 路由级代码分割，拆出编辑器/可视化等重组件。
- 媒体优化
- 默认 AVIF/WebP，保底 JPEG；提供
srcset与明确尺寸，避免 CLS。 - 采用占位（LQIP/SQIP），渐进式加载与延迟加载策略。
- 缓存与网络
- 静态资源强缓存 + 文件指纹；HTML 协商缓存；部署 CDN 边缘缓存。
- 预连接/预加载关键第三方域名与字体。
- 交互与无障碍
- 焦点可见、可键盘操作；拖拽提供替代输入；触控目标可达。
- 表单状态与错误信息清晰，语义化结构与 ARIA 合理。
监控与回归
- 实用户监控（RUM）：采集 LCP/INP/CLS 与错误、版本、网络类型。
- 实验室评估：Lighthouse 与 WebPageTest 建立基线与预算阈值。
- 构建守门：在 CI 中加入体积与 Web Vitals 阈值，避免回归。
落地清单（可勾选）
- 首屏关键 CSS ≤ 20KB，非关键 CSS/JS 延后
- 首包 HTML ≤ 40KB，gzip/br 有效
- 重要图片具备尺寸、采用 AVIF/WebP 与占位
- 所有路由开启代码分割，编辑器与可视化组件按需加载
- 静态资源指纹化 + CDN 边缘缓存命中率监控
- LCP < 2.5s、INP < 200ms、CLS < 0.1（真实用户 75 分位）
- 焦点可见、键盘可达、拖拽有替代（见
/blog/wcag-2.2-guide） - Lighthouse 分数与资源预算在阈值内，超限阻断发布
延伸阅读
- 性能优化总览：
/blog/performance-optimization - 图片优化：
/blog/image-optimization - 代码分割：
/blog/code-splitting-practices - 缓存策略：
/blog/caching-strategy - Web Vitals：
/blog/web-vitals - 无障碍设计：
/blog/accessibility-guidelines、/blog/wcag-2.2-guide
- 返回博客首页：
/blog - 查看无障碍类文章：
/blog?category=无障碍与设计