Loading...
Loading...
Compare original and translation side by side
vercel-react-best-practicesvercel-react-best-practices| 指標 | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5s | 2.5s - 4.0s | > 4.0s |
| INP (Interaction to Next Paint) | < 200ms | 200ms - 500ms | > 500ms |
| CLS (Cumulative Layout Shift) | < 0.1 | 0.1 - 0.25 | > 0.25 |
| FCP (First Contentful Paint) | < 1.8s | 1.8s - 3.0s | > 3.0s |
| TTFB (Time to First Byte) | < 800ms | 800ms - 1800ms | > 1800ms |
| 指标 | 优秀 | 需要改进 | 较差 |
|---|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5s | 2.5s - 4.0s | > 4.0s |
| INP (Interaction to Next Paint) | < 200ms | 200ms - 500ms | > 500ms |
| CLS (Cumulative Layout Shift) | < 0.1 | 0.1 - 0.25 | > 0.25 |
| FCP (First Contentful Paint) | < 1.8s | 1.8s - 3.0s | > 3.0s |
| TTFB (Time to First Byte) | < 800ms | 800ms - 1800ms | > 1800ms |
undefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefinedundefined
---
---npx lighthouse URL --output=json | jq '.audits["largest-contentful-paint-element"]'| 原因 | 対策 |
|---|---|
| ヒーロー画像が重い | |
| Webフォント読み込み | |
| サーバー応答遅い | キャッシュ、CDN、DB最適化 |
| render-blocking JS | 動的インポート、defer |
npx lighthouse URL --output=json | jq '.audits["largest-contentful-paint-element"]'| 原因 | 对策 |
|---|---|
| 首屏英雄图过大 | 使用 |
| Web字体加载延迟 | 使用 |
| 服务器响应缓慢 | 缓存优化、CDN加速、数据库优化 |
| 阻塞渲染的JS代码 | 动态导入、defer属性 |
| 原因 | 対策 |
|---|---|
| 重いイベントハンドラ | |
| 過剰な再レンダリング | React DevTools Profiler確認 |
| 長いJSタスク | タスク分割、 |
| 原因 | 对策 |
|---|---|
| 事件处理器过重 | 使用 |
| 过度重渲染 | 通过React DevTools Profiler排查 |
| JS任务执行时间过长 | 任务拆分、使用 |
npx lighthouse URL --output=json | jq '.audits["layout-shift-elements"]'| 原因 | 対策 |
|---|---|
| 画像サイズ未指定 | |
| 動的コンテンツ挿入 | スケルトンで領域確保 |
| Webフォント切り替え | |
| 広告/埋め込み | 固定サイズコンテナ |
npx lighthouse URL --output=json | jq '.audits["layout-shift-elements"]'| 原因 | 对策 |
|---|---|
| 未指定图片尺寸 | 必须设置 |
| 动态内容插入 | 使用骨架屏预留空间 |
| Web字体切换 | |
| 广告/嵌入内容 | 使用固定尺寸容器 |
| 原因 | 対策 |
|---|---|
| 初期HTMLが大きい | Server Components、ストリーミング |
| render-blocking CSS | Critical CSS inline |
| TTFB が遅い | サーバー最適化 |
| 原因 | 对策 |
|---|---|
| 初始HTML体积过大 | 使用Server Components、流式渲染 |
| 阻塞渲染的CSS | 内联关键CSS |
| TTFB 响应缓慢 | 服务器优化 |