网站测速
网站测速工具 ⚡
Section titled “网站测速工具 ⚡”专业的网站速度测试工具，全面分析网站加载性能。
- 🌐 多节点测试 - 全球多个测试节点
- 📊 详细报告 - 瀑布流、性能指标
- 🎯 优化建议 - 具体的优化方案
- 📱 移动端测试 - 模拟移动设备
- 📈 历史记录 - 追踪性能变化
- 🔍 资源分析 - 分析每个资源的加载
测试网站速度
Section titled “测试网站速度”-
输入网址
- 输入要测试的网站 URL
- 选择 http 或 https
-
选择测试位置
- 国内节点（北京、上海、广州）
- 海外节点（香港、美国、欧洲）
-
选择设备类型
- 桌面端
- 移动端
-
开始测试
- 等待测试完成
- 查看详细报告
首字节时间 (TTFB)
Section titled “首字节时间 (TTFB)”优秀: < 200ms良好: 200-500ms需改进: 500-1000ms差: > 1000msTTFB 影响因素：
- DNS 解析时间
- 服务器响应时间
- 网络延迟
首次内容绘制 (FCP)
Section titled “首次内容绘制 (FCP)”优秀: < 1.0s良好: 1.0-1.8s需改进: 1.8-3.0s差: > 3.0s最大内容绘制 (LCP)
Section titled “最大内容绘制 (LCP)”优秀: < 2.5s良好: 2.5-4.0s需改进: > 4.0sLCP 元素通常是：
- 首屏最大图片
- 首屏最大文本块
- 视频海报图
首次输入延迟 (FID)
Section titled “首次输入延迟 (FID)”优秀: < 100ms良好: 100-300ms需改进: > 300ms累积布局偏移 (CLS)
Section titled “累积布局偏移 (CLS)”优秀: < 0.1良好: 0.1-0.25需改进: > 0.25CLS 常见原因：
- 图片没有尺寸属性
- 广告嵌入
- 字体加载导致文字闪烁
总阻塞时间 (TBT)
Section titled “总阻塞时间 (TBT)”优秀: < 200ms良好: 200-600ms需改进: > 600ms| 指标 | 说明 | 目标值 |
|---|---|---|
| DOM 就绪 | DOM 解析完成 | < 1.5s |
| 页面完全加载 | 所有资源加载完成 | < 3s |
| 页面大小 | 总传输大小 | < 2MB |
| 请求数 | HTTP 请求总数 | < 50 |
时间轴 → 0ms 500ms 1000ms 1500ms 2000ms--------------------------------------------------DNS 查询 ████TCP 连接 ████SSL 握手 ████请求发送 ██等待响应 ████████接收数据 ████████████资源类型分析
Section titled “资源类型分析”| 类型 | 数量 | 大小 | 占比 |
|---|---|---|---|
| HTML | 1 | 45 KB | 2% |
| CSS | 3 | 120 KB | 6% |
| JavaScript | 8 | 850 KB | 42% |
| 图片 | 25 | 950 KB | 47% |
| 字体 | 2 | 65 KB | 3% |
| 总计 | 39 | 2,030 KB | 100% |
优化前: banner.jpg (850 KB)优化后: banner.webp (120 KB)节省: 730 KB (86%)使用现代格式
Section titled “使用现代格式”- WebP - 比 JPEG 小 25-35%
- AVIF - 比 JPEG 小 50%
<picture> <source srcset="image.avif" type="image/avif"> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="描述" loading="lazy"></picture><img src="image.jpg" loading="lazy" alt="描述">CSS 优化
Section titled “CSS 优化”关键 CSS 内联
Section titled “关键 CSS 内联”<head> <style> /* 关键 CSS - 首屏所需 */ body { margin: 0; font-family: Arial; } .header { background: #333; } </style> <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"></head>移除未使用的 CSS
Section titled “移除未使用的 CSS”总 CSS: 150 KB使用: 35 KB未使用: 115 KB (77%)建议: 使用 PurgeCSS 移除未使用样式JavaScript 优化
Section titled “JavaScript 优化”// 按需加载const module = await import('./heavy-module.js');<script src="analytics.js" defer></script><script src="non-critical.js" async></script>优化前: app.js (450 KB)优化后: app.min.js (120 KB)节省: 330 KB (73%)# Nginx 配置gzip on;gzip_types text/plain text/css application/json application/javascript;gzip_min_length 1000;使用 CDN
Section titled “使用 CDN”优化前: 服务器响应 500ms优化后: CDN 响应 50ms提升: 90%# 静态资源缓存location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 1y; add_header Cache-Control "public, immutable";}<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>完整字体: 2.5 MB子集化后: 45 KB节省: 98%字体显示策略
Section titled “字体显示策略”@font-face { font-family: 'CustomFont'; src: url('font.woff2') format('woff2'); font-display: swap; /* 使用备用字体，加载后替换 */}| 节点 | 运营商 | 位置 |
|---|---|---|
| 北京 | 电信/联通/移动 | 华北 |
| 上海 | 电信/联通/移动 | 华东 |
| 广州 | 电信/联通/移动 | 华南 |
| 成都 | 电信 | 西南 |
| 武汉 | 联通 | 华中 |
| 节点 | 位置 | 用途 |
|---|---|---|
| 香港 | 亚洲 | 海外用户访问 |
| 东京 | 日本 | 日本用户 |
| 新加坡 | 东南亚 | 东南亚用户 |
| 洛杉矶 | 美国西部 | 北美用户 |
| 法兰克福 | 德国 | 欧洲用户 |
| 指标 | 预算 | 说明 |
|---|---|---|
| 页面大小 | < 2 MB | 移动端 < 1 MB |
| 请求数 | < 50 | 移动端 < 30 |
| 首屏时间 | < 1.5s | 3G 网络 |
| 完全加载 | < 3s | 3G 网络 |
设置性能监控告警：
告警规则:- LCP > 2.5s: 发送邮件- CLS > 0.1: 发送 Slack 消息- 错误率 > 1%: 发送短信Q: 为什么每次测试结果不同？
Section titled “Q: 为什么每次测试结果不同？”A: 网络状况、服务器负载、CDN 缓存等因素都会影响结果。建议：
- 多次测试取平均值
- 在不同时间段测试
- 使用多个节点测试
Q: 移动端和桌面端差异大吗？
Section titled “Q: 移动端和桌面端差异大吗？”A: 通常移动端更慢，因为：
- 网络条件较差
- 设备性能较低
- 需要额外优化
Q: 如何持续监控性能？
Section titled “Q: 如何持续监控性能？”A: 建议：
- 使用真实用户监控 (RUM)
- 设置定期自动化测试
- 集成到 CI/CD 流程
Q: Lighthouse 分数和实际体验一致吗？
Section titled “Q: Lighthouse 分数和实际体验一致吗？”A: Lighthouse 是实验室数据，可能与真实用户有差异。建议结合：
- Core Web Vitals (真实用户数据)
- 实际用户反馈
- 业务指标（跳出率、转化率）