SuperAPI AI 工具集

performance-as-design

设计与创作

查看项目

更新于 10-15 21:12

技能介绍

用途:把网页性能当作设计问题来处理,主张“慢就是设计失败”,强调加载慢的漂亮页面不如加载快的朴素页面。

主要能力:

  1. Core Web Vitals 指标与目标:LCP < 2.5s(最大内容渲染)、INP < 200ms(交互响应)、CLS < 0.1(视觉稳定性,无布局偏移)。
  2. 性能预算:设计前先设限,包括页面总重 < 1MB(理想 < 500KB)、字体最多 2 个字族共 3-4 个字重、图片用 WebP/AVIF 且尺寸合适、JavaScript < 200KB(gzip 后)、首次内容绘制 < 1.5s。
  3. 影响性能的设计决策及代价:自定义字体每个文件 20-100KB;主视觉视频 2-10MB+;动画库 20-80KB JS;图片轮播会加载多张大图;无限滚动导致 DOM 与内存增长;实时功能需 WebSocket 连接与状态更新。
  4. 感知性能:骨架屏比加载转圈感觉更快;乐观更新比等待确认感觉更快;渐进式图片加载(模糊占位)比空白区域感觉更快;即时导航(悬停预取)比等待感觉更快。

使用方式:资料未提供具体安装命令或代码用法,暂未提供。

适用场景:网页与前端设计评审、性能预算制定、设计决策权衡。

限制:资料未说明平台、收费或价格信息,暂未提供。