[{"data":1,"prerenderedAt":542},["ShallowReactive",2],{"content-/blog/sustainable-web-design":3,"related-blog":515},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":509,"_id":510,"_source":511,"_file":512,"_stem":513,"_extension":514},"/blog/sustainable-web-design","blog",false,"","可持续 Web 设计指南","围绕能耗、性能与无障碍的系统化可持续设计实践与工程落地。","sustainable web design, 可持续, 性能优化, 无障碍, 绿色低碳","HTMLPAGE","2025-12-01","无障碍与设计","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":500},"root",[18,26,32,37,42,145,150,178,183,192,205,214,235,244,257,266,279,284,302,308,396,401,471,475],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"为什么关注可持续",[24],{"type":25,"value":22},"text",{"type":19,"tag":27,"props":28,"children":29},"p",{},[30],{"type":25,"value":31},"可持续 Web 设计的目标是以更小的资源消耗，提供同等或更优的用户价值。它贯穿从视觉到工程的全链路：减少传输体积与请求、降低渲染与交互开销、确保在弱网与辅助技术下仍然可用。",{"type":19,"tag":27,"props":33,"children":34},{},[35],{"type":25,"value":36},"与性能不同，可持续不仅追求“更快”，还强调“更少、更稳、更可达”。",{"type":19,"tag":20,"props":38,"children":40},{"id":39},"目标与衡量",[41],{"type":25,"value":39},{"type":19,"tag":43,"props":44,"children":45},"ul",{},[46,69,81,100,119],{"type":19,"tag":47,"props":48,"children":49},"li",{},[50,52,59,61,67],{"type":25,"value":51},"传输体积：首包体积与关键路径资源尽可能小（参考: ",{"type":19,"tag":53,"props":54,"children":56},"code",{"className":55},[],[57],{"type":25,"value":58},"/blog/bundle-optimization",{"type":25,"value":60},"、",{"type":19,"tag":53,"props":62,"children":64},{"className":63},[],[65],{"type":25,"value":66},"/blog/code-splitting-practices",{"type":25,"value":68},"）。",{"type":19,"tag":47,"props":70,"children":71},{},[72,74,80],{"type":25,"value":73},"Web Vitals：LCP/INP/CLS 达标并稳定（参考: ",{"type":19,"tag":53,"props":75,"children":77},{"className":76},[],[78],{"type":25,"value":79},"/blog/web-vitals",{"type":25,"value":68},{"type":19,"tag":47,"props":82,"children":83},{},[84,86,92,93,99],{"type":25,"value":85},"请求复用：命中强/协商缓存，CDN 命中率提升（参考: ",{"type":19,"tag":53,"props":87,"children":89},{"className":88},[],[90],{"type":25,"value":91},"/blog/caching-strategy",{"type":25,"value":60},{"type":19,"tag":53,"props":94,"children":96},{"className":95},[],[97],{"type":25,"value":98},"/blog/http-caching",{"type":25,"value":68},{"type":19,"tag":47,"props":101,"children":102},{},[103,105,111,112,118],{"type":25,"value":104},"媒体能耗：图片/视频格式、尺寸、比特率与懒加载策略合理（参考: ",{"type":19,"tag":53,"props":106,"children":108},{"className":107},[],[109],{"type":25,"value":110},"/blog/image-optimization",{"type":25,"value":60},{"type":19,"tag":53,"props":113,"children":115},{"className":114},[],[116],{"type":25,"value":117},"/blog/video-optimization",{"type":25,"value":68},{"type":19,"tag":47,"props":120,"children":121},{},[122,124,130,131,137,138,144],{"type":25,"value":123},"无障碍：语义结构、对比度、焦点可见、键盘可达（参考: ",{"type":19,"tag":53,"props":125,"children":127},{"className":126},[],[128],{"type":25,"value":129},"/blog/accessibility-guidelines",{"type":25,"value":60},{"type":19,"tag":53,"props":132,"children":134},{"className":133},[],[135],{"type":25,"value":136},"/blog/wcag-3-scoring-model",{"type":25,"value":60},{"type":19,"tag":53,"props":139,"children":141},{"className":140},[],[142],{"type":25,"value":143},"/blog/wcag-2.2-guide",{"type":25,"value":68},{"type":19,"tag":20,"props":146,"children":148},{"id":147},"设计与内容策略",[149],{"type":25,"value":147},{"type":19,"tag":43,"props":151,"children":152},{},[153,158,163,168,173],{"type":19,"tag":47,"props":154,"children":155},{},[156],{"type":25,"value":157},"信息优先：首屏只呈现“必须看到”的内容，降低干扰元素密度。",{"type":19,"tag":47,"props":159,"children":160},{},[161],{"type":25,"value":162},"色彩与对比：在暗色/低对比环境中保持可读性，兼顾能耗与可达性。",{"type":19,"tag":47,"props":164,"children":165},{},[166],{"type":25,"value":167},"字体：限制字重与变体数量，优先系统字体或可缓存的可变字体。",{"type":19,"tag":47,"props":169,"children":170},{},[171],{"type":25,"value":172},"动效：默认克制，避免持续性动画；对“减少动态效果”系统偏好予以尊重。",{"type":19,"tag":47,"props":174,"children":175},{},[176],{"type":25,"value":177},"组件复用：减少样式分叉；统一卡片、列表、导航等组件规格。",{"type":19,"tag":20,"props":179,"children":181},{"id":180},"工程落地要点",[182],{"type":25,"value":180},{"type":19,"tag":184,"props":185,"children":186},"ol",{},[187],{"type":19,"tag":47,"props":188,"children":189},{},[190],{"type":25,"value":191},"关键渲染路径",{"type":19,"tag":43,"props":193,"children":194},{},[195,200],{"type":19,"tag":47,"props":196,"children":197},{},[198],{"type":25,"value":199},"关键 CSS 内联 + 非关键 CSS 延后；异步加载非首屏 JS。",{"type":19,"tag":47,"props":201,"children":202},{},[203],{"type":25,"value":204},"路由级代码分割，拆出编辑器/可视化等重组件。",{"type":19,"tag":184,"props":206,"children":208},{"start":207},2,[209],{"type":19,"tag":47,"props":210,"children":211},{},[212],{"type":25,"value":213},"媒体优化",{"type":19,"tag":43,"props":215,"children":216},{},[217,230],{"type":19,"tag":47,"props":218,"children":219},{},[220,222,228],{"type":25,"value":221},"默认 AVIF/WebP，保底 JPEG；提供 ",{"type":19,"tag":53,"props":223,"children":225},{"className":224},[],[226],{"type":25,"value":227},"srcset",{"type":25,"value":229}," 与明确尺寸，避免 CLS。",{"type":19,"tag":47,"props":231,"children":232},{},[233],{"type":25,"value":234},"采用占位（LQIP/SQIP），渐进式加载与延迟加载策略。",{"type":19,"tag":184,"props":236,"children":238},{"start":237},3,[239],{"type":19,"tag":47,"props":240,"children":241},{},[242],{"type":25,"value":243},"缓存与网络",{"type":19,"tag":43,"props":245,"children":246},{},[247,252],{"type":19,"tag":47,"props":248,"children":249},{},[250],{"type":25,"value":251},"静态资源强缓存 + 文件指纹；HTML 协商缓存；部署 CDN 边缘缓存。",{"type":19,"tag":47,"props":253,"children":254},{},[255],{"type":25,"value":256},"预连接/预加载关键第三方域名与字体。",{"type":19,"tag":184,"props":258,"children":260},{"start":259},4,[261],{"type":19,"tag":47,"props":262,"children":263},{},[264],{"type":25,"value":265},"交互与无障碍",{"type":19,"tag":43,"props":267,"children":268},{},[269,274],{"type":19,"tag":47,"props":270,"children":271},{},[272],{"type":25,"value":273},"焦点可见、可键盘操作；拖拽提供替代输入；触控目标可达。",{"type":19,"tag":47,"props":275,"children":276},{},[277],{"type":25,"value":278},"表单状态与错误信息清晰，语义化结构与 ARIA 合理。",{"type":19,"tag":20,"props":280,"children":282},{"id":281},"监控与回归",[283],{"type":25,"value":281},{"type":19,"tag":43,"props":285,"children":286},{},[287,292,297],{"type":19,"tag":47,"props":288,"children":289},{},[290],{"type":25,"value":291},"实用户监控（RUM）：采集 LCP/INP/CLS 与错误、版本、网络类型。",{"type":19,"tag":47,"props":293,"children":294},{},[295],{"type":25,"value":296},"实验室评估：Lighthouse 与 WebPageTest 建立基线与预算阈值。",{"type":19,"tag":47,"props":298,"children":299},{},[300],{"type":25,"value":301},"构建守门：在 CI 中加入体积与 Web Vitals 阈值，避免回归。",{"type":19,"tag":20,"props":303,"children":305},{"id":304},"落地清单可勾选",[306],{"type":25,"value":307},"落地清单（可勾选）",{"type":19,"tag":43,"props":309,"children":312},{"className":310},[311],"contains-task-list",[313,326,335,344,353,362,371,387],{"type":19,"tag":47,"props":314,"children":317},{"className":315},[316],"task-list-item",[318,324],{"type":19,"tag":319,"props":320,"children":323},"input",{"disabled":321,"type":322},true,"checkbox",[],{"type":25,"value":325}," 首屏关键 CSS ≤ 20KB，非关键 CSS/JS 延后",{"type":19,"tag":47,"props":327,"children":329},{"className":328},[316],[330,333],{"type":19,"tag":319,"props":331,"children":332},{"disabled":321,"type":322},[],{"type":25,"value":334}," 首包 HTML ≤ 40KB，gzip/br 有效",{"type":19,"tag":47,"props":336,"children":338},{"className":337},[316],[339,342],{"type":19,"tag":319,"props":340,"children":341},{"disabled":321,"type":322},[],{"type":25,"value":343}," 重要图片具备尺寸、采用 AVIF/WebP 与占位",{"type":19,"tag":47,"props":345,"children":347},{"className":346},[316],[348,351],{"type":19,"tag":319,"props":349,"children":350},{"disabled":321,"type":322},[],{"type":25,"value":352}," 所有路由开启代码分割，编辑器与可视化组件按需加载",{"type":19,"tag":47,"props":354,"children":356},{"className":355},[316],[357,360],{"type":19,"tag":319,"props":358,"children":359},{"disabled":321,"type":322},[],{"type":25,"value":361}," 静态资源指纹化 + CDN 边缘缓存命中率监控",{"type":19,"tag":47,"props":363,"children":365},{"className":364},[316],[366,369],{"type":19,"tag":319,"props":367,"children":368},{"disabled":321,"type":322},[],{"type":25,"value":370}," LCP \u003C 2.5s、INP \u003C 200ms、CLS \u003C 0.1（真实用户 75 分位）",{"type":19,"tag":47,"props":372,"children":374},{"className":373},[316],[375,378,380,385],{"type":19,"tag":319,"props":376,"children":377},{"disabled":321,"type":322},[],{"type":25,"value":379}," 焦点可见、键盘可达、拖拽有替代（见 ",{"type":19,"tag":53,"props":381,"children":383},{"className":382},[],[384],{"type":25,"value":143},{"type":25,"value":386},"）",{"type":19,"tag":47,"props":388,"children":390},{"className":389},[316],[391,394],{"type":19,"tag":319,"props":392,"children":393},{"disabled":321,"type":322},[],{"type":25,"value":395}," Lighthouse 分数与资源预算在阈值内，超限阻断发布",{"type":19,"tag":20,"props":397,"children":399},{"id":398},"延伸阅读",[400],{"type":25,"value":398},{"type":19,"tag":43,"props":402,"children":403},{},[404,415,425,435,445,455],{"type":19,"tag":47,"props":405,"children":406},{},[407,409],{"type":25,"value":408},"性能优化总览：",{"type":19,"tag":53,"props":410,"children":412},{"className":411},[],[413],{"type":25,"value":414},"/blog/performance-optimization",{"type":19,"tag":47,"props":416,"children":417},{},[418,420],{"type":25,"value":419},"图片优化：",{"type":19,"tag":53,"props":421,"children":423},{"className":422},[],[424],{"type":25,"value":110},{"type":19,"tag":47,"props":426,"children":427},{},[428,430],{"type":25,"value":429},"代码分割：",{"type":19,"tag":53,"props":431,"children":433},{"className":432},[],[434],{"type":25,"value":66},{"type":19,"tag":47,"props":436,"children":437},{},[438,440],{"type":25,"value":439},"缓存策略：",{"type":19,"tag":53,"props":441,"children":443},{"className":442},[],[444],{"type":25,"value":91},{"type":19,"tag":47,"props":446,"children":447},{},[448,450],{"type":25,"value":449},"Web Vitals：",{"type":19,"tag":53,"props":451,"children":453},{"className":452},[],[454],{"type":25,"value":79},{"type":19,"tag":47,"props":456,"children":457},{},[458,460,465,466],{"type":25,"value":459},"无障碍设计：",{"type":19,"tag":53,"props":461,"children":463},{"className":462},[],[464],{"type":25,"value":129},{"type":25,"value":60},{"type":19,"tag":53,"props":467,"children":469},{"className":468},[],[470],{"type":25,"value":143},{"type":19,"tag":472,"props":473,"children":474},"hr",{},[],{"type":19,"tag":43,"props":476,"children":477},{},[478,489],{"type":19,"tag":47,"props":479,"children":480},{},[481,483],{"type":25,"value":482},"返回博客首页：",{"type":19,"tag":53,"props":484,"children":486},{"className":485},[],[487],{"type":25,"value":488},"/blog",{"type":19,"tag":47,"props":490,"children":491},{},[492,494],{"type":25,"value":493},"查看无障碍类文章：",{"type":19,"tag":53,"props":495,"children":497},{"className":496},[],[498],{"type":25,"value":499},"/blog?category=无障碍与设计",{"title":7,"searchDepth":237,"depth":237,"links":501},[502,503,504,505,506,507,508],{"id":22,"depth":207,"text":22},{"id":39,"depth":207,"text":39},{"id":147,"depth":207,"text":147},{"id":180,"depth":207,"text":180},{"id":281,"depth":207,"text":281},{"id":304,"depth":207,"text":307},{"id":398,"depth":207,"text":398},"markdown","content:blog:sustainable-web-design.md","content","blog/sustainable-web-design.md","blog/sustainable-web-design","md",[516,526,534],{"_path":517,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":518,"description":519,"keywords":520,"author":11,"date":521,"category":522,"image":14,"_type":509,"_id":523,"_source":511,"_file":524,"_stem":525,"_extension":514},"/blog/2025-q1-updates","2025 Q1 产品更新","第一季度重大功能发布：AI 生成优化、新模板上线、编辑器增强等","2025 Q1 产品更新, Blog, HTMLPAGE","2025-11-26","待分类","content:blog:2025-q1-updates.md","blog/2025-q1-updates.md","blog/2025-q1-updates",{"_path":527,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":528,"description":529,"keywords":530,"author":11,"date":521,"category":522,"image":14,"_type":509,"_id":531,"_source":511,"_file":532,"_stem":533,"_extension":514},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":535,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":536,"description":537,"keywords":538,"author":11,"date":521,"category":522,"image":14,"_type":509,"_id":539,"_source":511,"_file":540,"_stem":541,"_extension":514},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945283870]