网页性能评分参考

Google Lighthouse 是一个开源的自动化工具，用于评估网页质量。以下是四大评分维度的标准、评分规则和优化建议。

Lighthouse 评分等级

90-100
优秀 (绿色)
50-89
一般 (橙色)
0-49
较差 (红色)

每个维度独立评分 0-100 分。总分由各维度加权计算得出（移动端和桌面端权重不同）。建议目标分数为 90 分以上。

性能 (Performance)

衡量网页的加载速度、交互响应速度和视觉稳定性。重点关注 Core Web Vitals 指标：LCP（最大内容绘制）、FID/INP（首次输入延迟/交互到下一绘制）、CLS（累积布局偏移）。

FCP (First Contentful Paint) 10%

首次内容绘制时间 - 浏览器首次渲染文本、图片等DOM内容的时间。
优秀： <= 1.8s | 一般： 1.8s - 3.0s | 较差： > 3.0s
优化：减少关键资源、使用CDN、预加载关键资源

LCP (Largest Contentful Paint) 25%

最大内容绘制时间 - 视口中最大的内容元素完成渲染的时间。
优秀： <= 2.5s | 一般： 2.5s - 4.0s | 较差： > 4.0s
优化：优化图片尺寸和格式、使用懒加载、减少服务端响应时间

TBT (Total Blocking Time) 30%

总阻塞时间 - FCP之后到TTI之间，长任务（>50ms）阻塞主线程的总时间。
优秀： <= 200ms | 一般： 200-600ms | 较差： > 600ms
优化：代码分割、减少第三方脚本、使用Web Worker

CLS (Cumulative Layout Shift) 15%

累积布局偏移 - 页面加载过程中元素意外位置移动的总和。
优秀： <= 0.1 | 一般： 0.1 - 0.25 | 较差： > 0.25
优化：为图片/广告设置尺寸、避免动态插入内容、使用CSS contain

Speed Index 10%

速度指数 - 页面内容逐步显示的速度，综合评估视觉填充速度。
优秀： <= 3.4s | 一般： 3.4-5.8s | 较差： > 5.8s
优化：内联关键CSS、延迟非关键资源、优化字体加载

TTI (Time to Interactive) 10%

可交互时间 - 页面完全可交互的时间，主线程空闲且网络空闲。
优秀： <= 3.8s | 一般： 3.8-7.3s | 较差： > 7.3s
优化：减少JS体积、使用code splitting、减少主线程工作

可访问性 (Accessibility)

衡量网页对所有用户的友好程度，包括视障、听障、运动障碍用户。基于 axe-core 自动化测试工具，涵盖ARIA属性、颜色对比度、键盘导航等。

图片替代文本 高权重

所有有意义的图片都应有描述性的alt属性。
优化：为所有img标签添加alt，装饰性图片使用alt=""

颜色对比度 高权重

文本与背景之间的颜色对比度需满足WCAG标准。
标准：正常文本 >= 4.5:1，大文本 >= 3:1
优化：使用颜色对比度检测工具验证

键盘导航 高权重

所有交互元素应可通过键盘访问和操作。
优化：确保tabindex正确、添加focus样式、使用语义化HTML

ARIA属性 中权重

正确使用ARIA角色、标签和状态。
优化：优先使用语义化HTML，仅在必要时使用ARIA

表单标签 高权重

所有输入字段应关联label标签。
优化：使用label元素或aria-label/aria-labelledby

文档语言 中权重

HTML文档应声明lang属性。
优化：<html lang="zh-CN"> 声明文档主要语言

最佳实践 (Best Practices)

评估网页是否遵循现代Web开发最佳实践，包括安全性、性能优化和开发规范。

HTTPS 关键

页面必须通过HTTPS提供服务。
优化：配置SSL证书，全站启用HTTPS，设置HSTS头

控制台错误 高权重

浏览器控制台不应有错误信息。
优化：修复JavaScript错误、处理Promise rejection、检查资源加载错误

第三方代码 中权重

检查页面中的第三方脚本是否影响性能和安全。
优化：限制第三方脚本数量、使用async/defer、定期审计第三方库

现代图片格式 中权重

优先使用WebP/AVIF等现代图片格式。
优化：使用<picture>标签提供WebP回退、使用CDN自动转换

App Manifest 低权重

PWA应用应配置Web App Manifest。
优化：添加manifest.json、配置theme_color和display

Isolation 低权重

页面应正确使用资源隔离策略。
优化：使用crossorigin属性、配置CORS策略

SEO (Search Engine Optimization)

评估网页的搜索引擎优化程度，帮助网页在搜索结果中获得更好排名。检查meta标签、结构化数据、可爬取性等。

文档标题 高权重

每个页面应有唯一的描述性title标签。
优化：标题控制在50-60字符、包含核心关键词、避免重复标题

Meta Description 高权重

页面应有描述性的meta description。
优化：描述控制在150-160字符、准确概括页面内容、包含行动号召

规范链接 (Canonical) 中权重

指定页面的规范URL，避免重复内容问题。
优化：添加<link rel="canonical">标签指向规范URL

可爬取链接 高权重

页面中的链接应可被搜索引擎爬虫访问。
优化：避免使用nofollow的爬虫陷阱、确保链接有href属性

结构化数据 中权重

使用JSON-LD等格式添加结构化数据。
优化：使用Meta标签生成器创建JSON-LD结构化数据

robots.txt & sitemap 中权重

网站应有robots.txt和sitemap.xml。
优化：配置robots.txt允许搜索引擎抓取、提交sitemap到搜索引擎

关于 Lighthouse

Lighthouse 是 Google 开发的开源自动化审计工具，集成在 Chrome DevTools 中。它从性能、可访问性、最佳实践、SEO 四个维度对网页进行评分，帮助开发者发现并修复常见问题。

评分权重（移动端）

如何使用