WorkBuddy技能评测 #187 | 前端性能规范集：Core Web Vitals、SEO、可访问性，静态站也能用

2026-11-05silcano

基本信息

• 技能名：前端性能与可访问性合集（best-practices、core-web-vitals、performance、seo、accessibility、web-quality-audit、vercel-react-best-practices、web-design-guidelines、react-best-practices、tailwind-best-practices）
• 来源仓库 Star 数：19,057 / 20,225 / 20,640 / 25,837
• 分类：Frontend / Content & Design
• 数据来源：SkillKit 中央技能库（第三方技能市场，非 WorkBuddy 官方自研）

它解决了什么痛点

前端「优化」最容易变成玄学：都说得加缓存、都说要懒加载，但哪个指标影响真实体验？这批技能把它量化成指标——LCP（最大内容绘制）、CLS（布局偏移）、INP（交互响应），并给出「每个指标差了，该改什么」的对应表。seo 与 accessibility 两份同理：前者讲结构化数据与语义标签，后者讲对比度、焦点顺序、aria 的正确用法。

web-quality-audit 是这组的入口：它给的不是清单，而是一套检查顺序（先看体积、再看关键渲染路径、最后看第三方脚本），避免你在细枝末节上耗时间。

对我有没有用（技术 / 自媒体 / AI / 读书）

自媒体：强推。你所有内容都跑在自己搭的静态页上——聚合页、评测文、实验室页。这些页面的加载速度、可读性、被搜索引擎理解的程度，直接决定阅读量。技术：直接可用，尤其是今天这种排版排查场景：CLS 讲的就是「图片没有尺寸导致布局跳动」，跟图片压字是同一类问题（缺约束）。读书：间接（长篇阅读页的字号、行高、对比度，accessibility 那份有具体数值）。AI：弱。

Vercel 那两份（react-best-practices、tailwind-best-practices）偏向 React 生态，你的页面是手写 HTML/CSS，参考价值有限；best-practices / core-web-vitals / seo / accessibility 这四份与技术栈无关，都能用。

典型场景

聚合页现在内嵌 168 篇数据，将来要到 300 篇。做法：装 core-web-vitals + web-quality-audit，让 AI 先量当前页面的 HTML 体积、首屏渲染时间、图片是否带 width/height，再给优化顺序（数据外置成 JSON + 骨架屏 + 图片固定尺寸）。成果：在页面变卡之前就把它拆开，而不是等读者抱怨「打开要三秒」。

一句话结论

做自建站的话这是刚需四件套：best-practices、core-web-vitals、seo、accessibility。React 那两份可以跳过。

📊 完整对比数据见在线总表：WorkBuddy 技能市场全量调研总表（腾讯文档）