网站开发规则
性能
- 图片是网站变慢的头号原因——使用WebP/AVIF格式，对首屏下方图片进行懒加载，并设置明确的宽高以避免布局偏移
- 阻塞渲染的CSS会延迟首次绘制——将关键CSS内联在
<head>中，其余部分延迟加载 - 第三方脚本（分析工具、聊天组件）通常会增加500ms以上的加载时间——使用
async或defer加载，并定期审查 - 字体导致不可见文本闪烁（FOIT）——使用
font-display: swap并预加载关键字体 - 在无痕模式下使用Lighthouse进行测量——浏览器扩展会干扰结果
移动优先
- 从移动端样式开始编写CSS，通过
min-width媒体查询增加复杂度——向上扩展比向下剥离更容易 - 触摸目标最小需要44x44px——手指不精确，小按钮会让用户沮丧
- 在真实设备上测试，不仅仅使用浏览器DevTools——节流模拟无法捕捉真实世界的卡顿
- 水平滚动是一个严重错误——至少在320px宽度下测试每个页面
viewportmeta标签是必需的：<meta name="viewport" content="width=device-width, initial-scale=1">
无障碍
- 每个
<img>都需要alt文本——装饰性图片使用空alt=""，有意义的图片使用描述性文本 - 正文文本颜色对比度至少为4.5:1——使用WebAIM对比度检查器
- 表单输入必须关联
<label>元素——仅使用占位符是不够的 - 键盘导航必须正常工作——使用Tab键测试每个交互元素
- 屏幕阅读器会朗读标题层级——按逻辑顺序使用H1-H6，切勿跳级
HTML结构
- 每个页面只有一个
<h1>——它是页面标题，不是样式工具 - 使用语义化元素：
<nav>、<main>、<article>、<aside>、<footer>——它们向浏览器和辅助技术传达结构信息 - 使用
<button>处理操作，<a>处理导航——不要使用带点击处理器的div - 外部链接应添加
rel="noopener"——防止与target="_blank"相关的安全漏洞 - 验证HTML——错误的标记会导致不同浏览器出现不可预测的渲染
CSS模式
- 避免使用
!important——它会破坏层叠规则并导致调试困难。应修复选择器优先级 - 文本使用相对单位（
rem、em、%）而不是固定的px——尊重用户的字体大小偏好 - CSS自定义属性（变量）减少重复——定义一次颜色和间距，到处使用
- Flexbox用于一维布局，Grid用于二维布局——不要强迫一种方法去做另一种的工作
- 在不加载CSS的情况下测试——内容即使以纯HTML形式也应可读
常见错误
- 缺少favicon会在服务器日志中产生大量404错误——始终包含一个，即使是简单的PNG图片
- 未设置
<html lang="en">会破坏屏幕阅读器的发音 - 硬编码
http://链接在HTTPS站点上会出错——使用协议相对路径//或始终使用https:// - 假设JavaScript始终可用——核心内容应能在没有JS的情况下正常工作（渐进增强）
- 忘记打印样式——为用户可能打印的页面（如收据、文章）添加
@media print
SEO / 索引
- 规范URL必须与实际服务器提供的URL匹配——不匹配（例如，带尾部斜杠与不带尾部斜杠）会混淆Google并可能导致无法索引
- 每个内容页面至少需要有一个内部链接指向它——仅存在于站点地图但无引用页面的页面会被Google爬虫降级
- 模板中的内容过滤可能会静默地将某些页面排除在导航之外——通过从首页跟随链接验证所有页面是否可访问，而不仅仅检查站点地图
- Search Console中的"已发现 - 当前未索引"通常表示没有内部链接，而不是技术阻塞——在请求索引之前先修复链接
上线前检查
- 测试所有表单是否确实能提交——损坏的联系表单会悄悄丢失潜在客户
- 检查404页面是否存在且有用——默认的服务器404页面显得不专业
- 使用Open Graph标签验证社交分享预览——在Facebook/Twitter调试器中测试
- 向Google Search Console提交站点地图——加快索引速度
- 设置正常运行时间监控——在用户通知您之前知道您的网站何时宕机