推荐答案
Lighthouse 的评分指标主要包括以下几个方面:
- Performance(性能)
- Accessibility(可访问性)
- Best Practices(最佳实践)
- SEO(搜索引擎优化)
- PWA(渐进式网页应用)
本题详细解读
Performance(性能)
Performance 指标衡量网页的加载速度和交互响应速度。它包括以下几个关键指标:
- First Contentful Paint (FCP): 首次内容绘制时间,表示页面首次渲染内容的时间。
- Speed Index: 速度指数,衡量页面内容填充的速度。
- Largest Contentful Paint (LCP): 最大内容绘制时间,表示页面最大内容元素渲染完成的时间。
- Time to Interactive (TTI): 可交互时间,表示页面从开始加载到主要子资源加载完成并能快速响应用户输入的时间。
- Total Blocking Time (TBT): 总阻塞时间,表示页面在 FCP 和 TTI 之间,主线程被阻塞的时间总和。
- Cumulative Layout Shift (CLS): 累积布局偏移,衡量页面在加载过程中布局的稳定性。
Accessibility(可访问性)
Accessibility 指标评估网页对残障用户的友好程度。它包括以下方面:
- ARIA 属性: 确保网页元素具有正确的 ARIA 属性。
- 颜色对比度: 确保文本和背景颜色之间有足够的对比度。
- 键盘可访问性: 确保所有功能都可以通过键盘操作。
- 语义化 HTML: 使用正确的 HTML 标签来增强可访问性。
Best Practices(最佳实践)
Best Practices 指标评估网页是否符合现代 Web 开发的最佳实践。它包括以下方面:
- HTTPS: 确保网页通过 HTTPS 提供服务。
- 避免使用已知有害的 API: 如
document.write
。 - 图片优化: 使用适当的图片格式和压缩。
- 避免重定向: 减少不必要的重定向。
SEO(搜索引擎优化)
SEO 指标评估网页对搜索引擎的友好程度。它包括以下方面:
- Meta 标签: 确保网页具有正确的 meta 标签,如
title
和description
。 - 结构化数据: 使用结构化数据标记来帮助搜索引擎理解页面内容。
- 移动友好性: 确保网页在移动设备上表现良好。
- 可索引性: 确保网页内容可以被搜索引擎索引。
PWA(渐进式网页应用)
PWA 指标评估网页是否符合渐进式网页应用的标准。它包括以下方面:
- Service Worker: 确保网页注册了 Service Worker。
- 离线支持: 确保网页在离线状态下仍能提供基本功能。
- 快速加载: 确保网页在 3G 网络下也能快速加载。
- 安装提示: 确保网页可以添加到主屏幕并提供安装提示。