https://vibe42.ai

页面构成与技术指标

正文

1483

操作候选

3

图片

16

HTML

5 KB

文案

标题字数
23
摘要字数
68
H1
1
H2
8

动作

主要入口

按年订阅(年付立省 30%)

表单
0
站内链接
14
站外链接
9

安全与页面元信息

HTTPS
有
HSTS
无
CSP
无
nosniff
无
viewport
有
图标
有
JSON-LD
无
统计
无

构成

Vite / Tailwind

脚本
2 ext / 2 inline
Alt
1 missing
语言
zh-CN
第三方域
2

Lighthouse

移动端模拟 · 性能评分

81 / 100

2026-09-06 · 实验室数据,非真实用户体验数据。

查看详情

移动端模拟 · 实验室数据,非真实用户体验数据
2026-09-06T10:33:49.115Z · Lighthouse 13.4.1

性能81/ 100
可访问性95/ 100
最佳实践100/ 100
SEO92/ 100
LCP · 主要内容出现2,893 ms
CLS · 布局偏移0.121
TBT · 主线程阻塞52 ms
FCP · 首次内容绘制2,667 ms
SI · 视觉加载速度6,796 ms

分数会受服务器、网络和测试环境影响,独立于品味/转化评分。诊断保留 Lighthouse 原文。

Avoid large layout shifts

1 layout shift found

These are the largest layout shifts observed on the page. Each table item represents a single layout shift, and shows the element that shifted the most. Below each item are possible root causes that led to the layout shift. Some of these layout shifts may not be included in the CLS metric value due to windowing. Learn how to improve CLS

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "page-1-DIV",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,0,SECTION,1,DIV,0,DIV",
        "type": "node",
        "snippet": "<div class=\"relative w-full bg-transparent pt-4 sm:pt-6 pb-2 select-none\">",
        "selector": "main > section.relative > div.mt-6 > div.relative",
        "nodeLabel": "向左滚动",
        "boundingRect": {
          "top": 412,
          "left": 0,
          "right": 412,
          "width": 412,
          "bottom": 619,
          "height": 207
        }
      },
      "score": 0.1210945844433174
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Element",
      "valueType": "node",
      "subItemsHeading": {
        "key": "extra"
      }
    },
    {
      "key": "score",
      "label": "Layout shift score",
      "valueType": "numeric",
      "granularity": 0.001,
      "subItemsHeading": {
        "key": "cause",
        "valueType": "text"
      }
    }
  ]
}

Background and foreground colors do not have a sufficient contrast ratio.

Low-contrast text is difficult or impossible for many users to read. Learn how to provide sufficient color contrast.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-0-SPAN",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,2,SECTION,0,DIV,1,DIV,0,DIV,0,DIV,1,DIV,1,SPAN",
        "type": "node",
        "snippet": "<span class=\"text-xs text-[#616166] font-mono\">",
        "selector": "div.rounded-2xl > div.space-y-6 > div.flex > span.text-xs",
        "nodeLabel": "$168 / 年",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 2.79 (foreground color: #616166, background color: #1b1b1e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 5939,
          "left": 138,
          "right": 200,
          "width": 62,
          "bottom": 5955,
          "height": 16
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-1-DIV",
              "path": "1,HTML,1,BODY,7,DIV,2,MAIN,2,SECTION,0,DIV,1,DIV,0,DIV",
              "type": "node",
              "snippet": "<div class=\"rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all bg-[#1…\">",
              "selector": "section#pricing > div.rounded-3xl > div.grid > div.rounded-2xl",
              "nodeLabel": "入门\n\n个人日常接入与轻量使用。\n\n$14\n$168 / 年\n可接入终端设备\n2 台\nApp / 网页端同时在线\n5 路\n数据传输带宽\n20 Mbps\n额外网…",
              "boundingRect": {
                "top": 5829,
                "left": 52,
                "right": 360,
                "width": 308,
                "bottom": 6256,
                "height": 427
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-2-SPAN",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,2,SECTION,0,DIV,1,DIV,1,DIV,0,DIV,1,DIV,1,SPAN",
        "type": "node",
        "snippet": "<span class=\"text-xs text-[#616166] font-mono\">",
        "selector": "div.rounded-2xl > div.space-y-6 > div.flex > span.text-xs",
        "nodeLabel": "$504 / 年",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 2.51 (foreground color: #616166, background color: #242428, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 6390,
          "left": 138,
          "right": 200,
          "width": 62,
          "bottom": 6406,
          "height": 16
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-3-DIV",
              "path": "1,HTML,1,BODY,7,DIV,2,MAIN,2,SECTION,0,DIV,1,DIV,1,DIV",
              "type": "node",
              "snippet": "<div class=\"rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all bg-[#2…\">",
              "selector": "section#pricing > div.rounded-3xl > div.grid > div.rounded-2xl",
              "nodeLabel": "专业\n推荐\n\n多机并行,覆盖日常开发与协作。\n\n$42\n$504 / 年\n可接入终端设备\n5 台\nApp / 网页端同时在线\n20 路\n数据传输带宽\n20 M…",
              "boundingRect": {
                "top": 6280,
                "left": 52,
                "right": 360,
                "width": 308,
                "bottom": 6707,
                "height": 427
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-4-SPAN",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,2,SECTION,0,DIV,1,DIV,2,DIV,0,DIV,1,DIV,1,SPAN",
        "type": "node",
        "snippet": "<span class=\"text-xs text-[#616166] font-mono\">",
        "selector": "div.rounded-2xl > div.space-y-6 > div.flex > span.text-xs",
        "nodeLabel": "$1680 / 年",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 2.79 (foreground color: #616166, background color: #1b1b1e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 6841,
          "left": 156,
          "right": 226,
          "width": 70,
          "bottom": 6857,
          "height": 16
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-5-DIV",
              "path": "1,HTML,1,BODY,7,DIV,2,MAIN,2,SECTION,0,DIV,1,DIV,2,DIV",
              "type": "node",
              "snippet": "<div class=\"rounded-2xl p-6 sm:p-8 flex flex-col justify-between transition-all bg-[#1…\">",
              "selector": "section#pricing > div.rounded-3xl > div.grid > div.rounded-2xl",
              "nodeLabel": "生产力\n\n不设接入上限,面向高强度使用。\n\n$140\n$1680 / 年\n可接入终端设备\n不限\nApp / 网页端同时在线\n不限\n数据传输带宽\n100 Mbp…",
              "boundingRect": {
                "top": 6731,
                "left": 52,
                "right": 360,
                "width": 308,
                "bottom": 7158,
                "height": 427
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-6-P",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,2,SECTION,0,DIV,2,DIV,0,P",
        "type": "node",
        "snippet": "<p>",
        "selector": "section#pricing > div.rounded-3xl > div.flex > p",
        "nodeLabel": "内测阶段暂未开放付费。正式定价与更多功能将于正式运营前公布。",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 2.98 (foreground color: #616166, background color: #141416, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 7206,
          "left": 52,
          "right": 360,
          "width": 308,
          "bottom": 7238,
          "height": 32
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-7-DIV",
              "path": "1,HTML,1,BODY,7,DIV,2,MAIN,2,SECTION,0,DIV",
              "type": "node",
              "snippet": "<div class=\"rounded-3xl bg-[#141416] p-6 sm:p-12 space-y-10\">",
              "selector": "div.min-h-screen > main > section#pricing > div.rounded-3xl",
              "nodeLabel": "订阅方案\n\n内测阶段暂未开放付费。正式定价与更多功能将于正式运营前公布。\n\n按年订阅\n(年付立省 30%)\n按月订阅\n入门\n\n个人日常接入与轻量使用。\n\n$1…",
              "boundingRect": {
                "top": 5600,
                "left": 28,
                "right": 384,
                "width": 356,
                "bottom": 7286,
                "height": 1686
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-8-SPAN",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,3,SECTION,0,DIV,1,DIV,1,DIV,1,SPAN",
        "type": "node",
        "snippet": "<span class=\"text-xs text-[#616166] font-mono\">",
        "selector": "div.rounded-3xl > div.space-y-2.5 > div.flex > span.text-xs",
        "nodeLabel": "v0.6.7",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 2.98 (foreground color: #616166, background color: #141416, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 7534,
          "left": 310,
          "right": 354,
          "width": 43,
          "bottom": 7550,
          "height": 16
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-9-DIV",
              "path": "1,HTML,1,BODY,7,DIV,2,MAIN,3,SECTION,0,DIV",
              "type": "node",
              "snippet": "<div class=\"rounded-3xl bg-[#141416] p-5 sm:p-8 space-y-6\">",
              "selector": "div.min-h-screen > main > section#downloads > div.rounded-3xl",
              "nodeLabel": "下载\n\n桌面原生客户端、手机 App 与一行命令的 CLI 安装器,选择你的平台即刻开始。\n\n桌面应用\n下载 macOS · Apple Silicon 版\n…",
              "boundingRect": {
                "top": 7375,
                "left": 28,
                "right": 384,
                "width": 356,
                "bottom": 8156,
                "height": 781
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-10-SPAN",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,3,SECTION,0,DIV,3,DIV,1,DIV,0,DIV,1,DIV,0,DIV,1,SPAN",
        "type": "node",
        "snippet": "<span class=\"font-mono text-[11px] text-[#616166]\">",
        "selector": "div.flex > div.flex > div.flex > span.font-mono",
        "nodeLabel": "v0.6.7",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 2.79 (foreground color: #616166, background color: #1b1b1e, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 7874,
          "left": 311,
          "right": 351,
          "width": 40,
          "bottom": 7890,
          "height": 17
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-11-DIV",
              "path": "1,HTML,1,BODY,7,DIV,2,MAIN,3,SECTION,0,DIV,3,DIV,1,DIV,0,DIV",
              "type": "node",
              "snippet": "<div class=\"flex gap-3 rounded-xl border border-white/[0.06] bg-[#1b1b1e] p-3\">",
              "selector": "div.rounded-3xl > div.space-y-2.5 > div.grid > div.flex",
              "nodeLabel": "iOS\nv0.6.7\nTestFlight\nApp Store\n即将上线",
              "boundingRect": {
                "top": 7857,
                "left": 48,
                "right": 364,
                "width": 316,
                "bottom": 7970,
                "height": 113
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-12-SPAN",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,3,SECTION,0,DIV,3,DIV,1,DIV,0,DIV,1,DIV,2,DIV,0,SPAN",
        "type": "node",
        "snippet": "<span>",
        "selector": "div.flex > div.flex > div.mt-auto > span",
        "nodeLabel": "App Store",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 2.79 (foreground color: #616166, background color: #1b1b1e, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 7933,
          "left": 168,
          "right": 217,
          "width": 49,
          "bottom": 7950,
          "height": 17
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-11-DIV",
              "path": "1,HTML,1,BODY,7,DIV,2,MAIN,3,SECTION,0,DIV,3,DIV,1,DIV,0,DIV",
              "type": "node",
              "snippet": "<div class=\"flex gap-3 rounded-xl border border-white/[0.06] bg-[#1b1b1e] p-3\">",
              "selector": "div.rounded-3xl > div.space-y-2.5 > div.grid > div.flex",
              "nodeLabel": "iOS\nv0.6.7\nTestFlight\nApp Store\n即将上线",
              "boundingRect": {
                "top": 7857,
                "left": 48,
                "right": 364,
                "width": 316,
                "bottom": 7970,
                "height": 113
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-13-SPAN",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,3,SECTION,0,DIV,3,DIV,1,DIV,0,DIV,1,DIV,2,DIV,1,SPAN",
        "type": "node",
        "snippet": "<span>",
        "selector": "div.flex > div.flex > div.mt-auto > span",
        "nodeLabel": "即将上线",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 2.79 (foreground color: #616166, background color: #1b1b1e, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 7933,
          "left": 296,
          "right": 340,
          "width": 44,
          "bottom": 7950,
          "height": 17
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-11-DIV",
              "path": "1,HTML,1,BODY,7,DIV,2,MAIN,3,SECTION,0,DIV,3,DIV,1,DIV,0,DIV",
              "type": "node",
              "snippet": "<div class=\"flex gap-3 rounded-xl border border-white/[0.06] bg-[#1b1b1e] p-3\">",
              "selector": "div.rounded-3xl > div.space-y-2.5 > div.grid > div.flex",
              "nodeLabel": "iOS\nv0.6.7\nTestFlight\nApp Store\n即将上线",
              "boundingRect": {
                "top": 7857,
                "left": 48,
                "right": 364,
                "width": 316,
                "bottom": 7970,
                "height": 113
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-14-SPAN",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,3,SECTION,0,DIV,3,DIV,1,DIV,1,DIV,1,DIV,0,DIV,1,SPAN",
        "type": "node",
        "snippet": "<span class=\"font-mono text-[11px] text-[#616166]\">",
        "selector": "div.flex > div.flex > div.flex > span.font-mono",
        "nodeLabel": "v0.6.7",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 2.79 (foreground color: #616166, background color: #1b1b1e, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 7999,
          "left": 311,
          "right": 351,
          "width": 40,
          "bottom": 8015,
          "height": 17
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-15-DIV",
              "path": "1,HTML,1,BODY,7,DIV,2,MAIN,3,SECTION,0,DIV,3,DIV,1,DIV,1,DIV",
              "type": "node",
              "snippet": "<div class=\"flex gap-3 rounded-xl border border-white/[0.06] bg-[#1b1b1e] p-3\">",
              "selector": "div.rounded-3xl > div.space-y-2.5 > div.grid > div.flex",
              "nodeLabel": "Android\nv0.6.7\n下载 APK\n\n安装 APK 需要允许来自未知来源的应用安装。\n\nGoogle Play\n即将上线",
              "boundingRect": {
                "top": 7982,
                "left": 48,
                "right": 364,
                "width": 316,
                "bottom": 8136,
                "height": 155
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-16-SPAN",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,3,SECTION,0,DIV,3,DIV,1,DIV,1,DIV,1,DIV,3,DIV,0,SPAN",
        "type": "node",
        "snippet": "<span>",
        "selector": "div.flex > div.flex > div.mt-auto > span",
        "nodeLabel": "Google Play",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 2.79 (foreground color: #616166, background color: #1b1b1e, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 8100,
          "left": 168,
          "right": 228,
          "width": 60,
          "bottom": 8116,
          "height": 17
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-15-DIV",
              "path": "1,HTML,1,BODY,7,DIV,2,MAIN,3,SECTION,0,DIV,3,DIV,1,DIV,1,DIV",
              "type": "node",
              "snippet": "<div class=\"flex gap-3 rounded-xl border border-white/[0.06] bg-[#1b1b1e] p-3\">",
              "selector": "div.rounded-3xl > div.space-y-2.5 > div.grid > div.flex",
              "nodeLabel": "Android\nv0.6.7\n下载 APK\n\n安装 APK 需要允许来自未知来源的应用安装。\n\nGoogle Play\n即将上线",
              "boundingRect": {
                "top": 7982,
                "left": 48,
                "right": 364,
                "width": 316,
                "bottom": 8136,
                "height": 155
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-17-SPAN",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,3,SECTION,0,DIV,3,DIV,1,DIV,1,DIV,1,DIV,3,DIV,1,SPAN",
        "type": "node",
        "snippet": "<span>",
        "selector": "div.flex > div.flex > div.mt-auto > span",
        "nodeLabel": "即将上线",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 2.79 (foreground color: #616166, background color: #1b1b1e, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 8100,
          "left": 296,
          "right": 340,
          "width": 44,
          "bottom": 8116,
          "height": 17
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-15-DIV",
              "path": "1,HTML,1,BODY,7,DIV,2,MAIN,3,SECTION,0,DIV,3,DIV,1,DIV,1,DIV",
              "type": "node",
              "snippet": "<div class=\"flex gap-3 rounded-xl border border-white/[0.06] bg-[#1b1b1e] p-3\">",
              "selector": "div.rounded-3xl > div.space-y-2.5 > div.grid > div.flex",
              "nodeLabel": "Android\nv0.6.7\n下载 APK\n\n安装 APK 需要允许来自未知来源的应用安装。\n\nGoogle Play\n即将上线",
              "boundingRect": {
                "top": 7982,
                "left": 48,
                "right": 364,
                "width": 316,
                "bottom": 8136,
                "height": 155
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-18-SPAN",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,4,SECTION,0,DIV,0,DIV,0,DIV,0,H2,1,SPAN",
        "type": "node",
        "snippet": "<span class=\"block text-[#616166]\">",
        "selector": "div.md:flex > div.md:w-2/5 > h2.text-2xl > span.block",
        "nodeLabel": "与解答",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 2.98 (foreground color: #616166, background color: #141416, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1",
        "boundingRect": {
          "top": 8299,
          "left": 52,
          "right": 360,
          "width": 308,
          "bottom": 8329,
          "height": 30
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-19-DIV",
              "path": "1,HTML,1,BODY,7,DIV,2,MAIN,4,SECTION,0,DIV",
              "type": "node",
              "snippet": "<div class=\"rounded-3xl bg-[#141416] p-6 md:p-12\">",
              "selector": "div.min-h-screen > main > section#faq > div.rounded-3xl",
              "nodeLabel": "常见问题\n与解答\n\n关于无需自建服务器、一键安装、厂商锁定与性能的解答。\n\n为什么是「终端优先」?\n+\n我需要自己买云服务器(VPS)或搭建中继节点吗?\n+\n…",
              "boundingRect": {
                "top": 8245,
                "left": 28,
                "right": 384,
                "width": 356,
                "bottom": 8937,
                "height": 692
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-20-SPAN",
        "path": "1,HTML,1,BODY,7,DIV,3,FOOTER,0,DIV,1,DIV,1,SPAN",
        "type": "node",
        "snippet": "<span class=\"text-xs leading-none text-[#616166] select-none font-normal\">",
        "selector": "footer.max-w-[1440px] > div.flex > div.order-2 > span.text-xs",
        "nodeLabel": "© MMXXVI Vibe42",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 3.17 (foreground color: #616166, background color: #0c0c0e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 9078,
          "left": 62,
          "right": 162,
          "width": 100,
          "bottom": 9090,
          "height": 12
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-21-DIV",
              "path": "1,HTML,1,BODY,7,DIV",
              "type": "node",
              "snippet": "<div class=\"min-h-screen bg-[#0c0c0e] text-[#d0d0d0] selection:bg-white/20 selection:t…\">",
              "selector": "body.bg-[#0a0a0c] > div.min-h-screen",
              "nodeLabel": "Vibe42\n进入工作区\n连上家里电脑,\n随时随地猛猛蹬。\n\nVibe42 是你的随身终端优先工作台。手机直连电脑,随时随地跑 Agent、审代码、控终端。免…",
              "boundingRect": {
                "top": 0,
                "left": 0,
                "right": 412,
                "width": 412,
                "bottom": 9158,
                "height": 9158
              }
            }
          }
        ]
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.color",
      "wcag2aa",
      "wcag143",
      "TTv5",
      "TT13.c",
      "EN-301-549",
      "EN-9.1.4.3",
      "ACT",
      "RGAAv4",
      "RGAA-3.2.1"
    ],
    "type": "debugdata",
    "impact": "serious"
  }
}

SVG elements with an `img` role do not have an accessible text alternative

Ensures SVG elements with an `img`, `graphics-document` or `graphics-symbol` role have an accessible text alternative. Learn more about SVG alt text.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-22-svg",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,3,SECTION,0,DIV,3,DIV,1,DIV,0,DIV,0,DIV,0,svg",
        "type": "node",
        "snippet": "<svg height=\"72\" width=\"72\" viewBox=\"0 0 29 29\" role=\"img\">",
        "selector": "div.grid > div.flex > div.h-fit > svg",
        "nodeLabel": "div.grid > div.flex > div.h-fit > svg",
        "explanation": "Fix any of the following:\n  Element has no child that is a title\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute",
        "boundingRect": {
          "top": 7876,
          "left": 67,
          "right": 139,
          "width": 72,
          "bottom": 7948,
          "height": 72
        }
      }
    },
    {
      "node": {
        "lhId": "1-23-svg",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,3,SECTION,0,DIV,3,DIV,1,DIV,1,DIV,0,DIV,0,svg",
        "type": "node",
        "snippet": "<svg height=\"72\" width=\"72\" viewBox=\"0 0 45 45\" role=\"img\">",
        "selector": "div.grid > div.flex > div.h-fit > svg",
        "nodeLabel": "div.grid > div.flex > div.h-fit > svg",
        "explanation": "Fix any of the following:\n  Element has no child that is a title\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute",
        "boundingRect": {
          "top": 8001,
          "left": 67,
          "right": 139,
          "width": 72,
          "bottom": 8073,
          "height": 72
        }
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.text-alternatives",
      "wcag2a",
      "wcag111",
      "section508",
      "section508.22.a",
      "TTv5",
      "TT7.a",
      "EN-301-549",
      "EN-9.1.1.1",
      "ACT",
      "RGAAv4",
      "RGAA-1.1.5"
    ],
    "type": "debugdata",
    "impact": "serious"
  }
}

Reduce unused JavaScript

Est savings of 41 KiB

Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity. Learn how to reduce unused JavaScript.

对应元素与资源
{
  "type": "opportunity",
  "items": [
    {
      "url": "https://vibe42.ai/assets/jsx-runtime-Dyj-HpQn.js",
      "totalBytes": 44276,
      "wastedBytes": 21764,
      "wastedPercent": 49.15512421872546
    },
    {
      "url": "https://vibe42.ai/assets/entry.client-BHOJDzmE.js",
      "totalBytes": 59893,
      "wastedBytes": 20538,
      "wastedPercent": 34.29113450542404
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url",
      "subItemsHeading": {
        "key": "source",
        "valueType": "code"
      }
    },
    {
      "key": "totalBytes",
      "label": "Transfer Size",
      "valueType": "bytes",
      "subItemsHeading": {
        "key": "sourceBytes"
      }
    },
    {
      "key": "wastedBytes",
      "label": "Est Savings",
      "valueType": "bytes",
      "subItemsHeading": {
        "key": "sourceWastedBytes"
      }
    }
  ],
  "sortedBy": [
    "wastedBytes"
  ],
  "debugData": {
    "type": "debugdata",
    "metricSavings": {
      "FCP": 150,
      "LCP": 150
    }
  },
  "overallSavingsMs": 150,
  "overallSavingsBytes": 42302
}

robots.txt is not valid

86 errors found

If your robots.txt file is malformed, crawlers may not be able to understand how you want your website to be crawled or indexed. Learn more about robots.txt.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "line": "<!DOCTYPE html><html lang=\"zh-CN\" class=\"dark scroll-smooth\"><head><meta charSet=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/><script async=\"\" defer=\"\" src=\"https://vibecafe.ai/telemetry/v1.js\" data-vc-product-id=\"cmsd01ldn00000al1ze0xlztd\" data-vc-auth-key=\"vc_web_9wprdvPpgBmExvAF1SBdFvfBWtsUzuG_fyTRtKREff8\"></script><title>Vibe42 — The Network for Agents</title><meta name=\"description\" content=\"Zero-config cross-device remote development network.\"/><meta property=\"og:title\" content=\"Vibe42 — The Network for Agents\"/><meta property=\"og:description\" content=\"Zero-config cross-device remote development network.\"/><link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\"/><link rel=\"preconnect\" href=\"https://fonts.googleapis.com\"/><link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin=\"anonymous\"/><link rel=\"modulepreload\" href=\"/assets/entry.client-BHOJDzmE.js\"/><link rel=\"modulepreload\" href=\"/assets/jsx-runtime-Dyj-HpQn.js\"/><link rel=\"modulepreload\" href=\"/assets/index-BPjdmoRX.js\"/><link rel=\"modulepreload\" href=\"/assets/root-3TAFfv6d.js\"/><link rel=\"modulepreload\" href=\"/assets/QueryClientProvider-B41i5k7B.js\"/><link rel=\"modulepreload\" href=\"/assets/locale-CtN9meVX.js\"/><link rel=\"modulepreload\" href=\"/assets/LandingPage-CmD2jhY8.js\"/><link rel=\"stylesheet\" href=\"/assets/root-DVXRIv-h.css\"/></head><body class=\"bg-[#0a0a0c] text-[#f2f2f5] min-h-screen antialiased\"><script>",
      "index": "62",
      "message": "Unknown directive"
    },
    {
      "line": "              console.log(",
      "index": "63",
      "message": "Syntax not understood"
    },
    {
      "line": "                \"💿 Hey developer 👋. You can provide a way better UX than this \" +",
      "index": "64",
      "message": "Syntax not understood"
    },
    {
      "line": "                \"when your app is loading JS modules and/or running `clientLoader` \" +",
      "index": "65",
      "message": "Syntax not understood"
    },
    {
      "line": "                \"functions. Check out https://reactrouter.com/start/framework/route-module#hydratefallback \" +",
      "index": "66",
      "message": "Unknown directive"
    },
    {
      "line": "                \"for more information.\"",
      "index": "67",
      "message": "Syntax not understood"
    },
    {
      "line": "              );",
      "index": "68",
      "message": "Syntax not understood"
    },
    {
      "line": "            </script><script>window.__reactRouterContext = {\"basename\":\"/\",\"future\":{\"unstable_optimizeDeps\":false,\"v8_passThroughRequests\":false,\"v8_trailingSlashAwareDataRequests\":false,\"unstable_previewServerPrerendering\":false,\"v8_middleware\":false,\"v8_splitRouteModules\":false,\"v8_viteEnvironmentApi\":false},\"routeDiscovery\":{\"mode\":\"lazy\",\"manifestPath\":\"/__manifest\"},\"ssr\":true,\"isSpaMode\":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());</script><script type=\"module\" async=\"\">;",
      "index": "69",
      "message": "Unknown directive"
    },
    {
      "line": "import * as route0 from \"/assets/root-3TAFfv6d.js\";",
      "index": "70",
      "message": "Syntax not understood"
    },
    {
      "line": "import * as route1 from \"/assets/locale-CtN9meVX.js\";",
      "index": "71",
      "message": "Syntax not understood"
    },
    {
      "line": "  window.__reactRouterManifest = {",
      "index": "72",
      "message": "Syntax not understood"
    },
    {
      "line": "  \"entry\": {",
      "index": "73",
      "message": "Unknown directive"
    },
    {
      "line": "    \"module\": \"/assets/entry.client-BHOJDzmE.js\",",
      "index": "74",
      "message": "Unknown directive"
    },
    {
      "line": "    \"imports\": [",
      "index": "75",
      "message": "Unknown directive"
    },
    {
      "line": "      \"/assets/jsx-runtime-Dyj-HpQn.js\",",
      "index": "76",
      "message": "Syntax not understood"
    },
    {
      "line": "      \"/assets/index-BPjdmoRX.js\"",
      "index": "77",
      "message": "Syntax not understood"
    },
    {
      "line": "    ],",
      "index": "78",
      "message": "Syntax not understood"
    },
    {
      "line": "    \"css\": []",
      "index": "79",
      "message": "Unknown directive"
    },
    {
      "line": "  },",
      "index": "80",
      "message": "Syntax not understood"
    },
    {
      "line": "  \"routes\": {",
      "index": "81",
      "message": "Unknown directive"
    },
    {
      "line": "    \"root\": {",
      "index": "82",
      "message": "Unknown directive"
    },
    {
      "line": "      \"id\": \"root\",",
      "index": "83",
      "message": "Unknown directive"
    },
    {
      "line": "      \"path\": \"\",",
      "index": "84",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasAction\": false,",
      "index": "85",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasLoader\": false,",
      "index": "86",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasClientAction\": false,",
      "index": "87",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasClientLoader\": false,",
      "index": "88",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasClientMiddleware\": false,",
      "index": "89",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasDefaultExport\": true,",
      "index": "90",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasErrorBoundary\": true,",
      "index": "91",
      "message": "Unknown directive"
    },
    {
      "line": "      \"module\": \"/assets/root-3TAFfv6d.js\",",
      "index": "92",
      "message": "Unknown directive"
    },
    {
      "line": "      \"imports\": [",
      "index": "93",
      "message": "Unknown directive"
    },
    {
      "line": "        \"/assets/jsx-runtime-Dyj-HpQn.js\",",
      "index": "94",
      "message": "Syntax not understood"
    },
    {
      "line": "        \"/assets/index-BPjdmoRX.js\",",
      "index": "95",
      "message": "Syntax not understood"
    },
    {
      "line": "        \"/assets/QueryClientProvider-B41i5k7B.js\"",
      "index": "96",
      "message": "Syntax not understood"
    },
    {
      "line": "      ],",
      "index": "97",
      "message": "Syntax not understood"
    },
    {
      "line": "      \"css\": [",
      "index": "98",
      "message": "Unknown directive"
    },
    {
      "line": "        \"/assets/root-DVXRIv-h.css\"",
      "index": "99",
      "message": "Syntax not understood"
    },
    {
      "line": "      ]",
      "index": "100",
      "message": "Syntax not understood"
    },
    {
      "line": "    },",
      "index": "101",
      "message": "Syntax not understood"
    },
    {
      "line": "    \"routes/locale\": {",
      "index": "102",
      "message": "Unknown directive"
    },
    {
      "line": "      \"id\": \"routes/locale\",",
      "index": "103",
      "message": "Unknown directive"
    },
    {
      "line": "      \"parentId\": \"root\",",
      "index": "104",
      "message": "Unknown directive"
    },
    {
      "line": "      \"path\": \":lang\",",
      "index": "105",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasAction\": false,",
      "index": "106",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasLoader\": false,",
      "index": "107",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasClientAction\": false,",
      "index": "108",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasClientLoader\": true,",
      "index": "109",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasClientMiddleware\": false,",
      "index": "110",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasDefaultExport\": true,",
      "index": "111",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasErrorBoundary\": false,",
      "index": "112",
      "message": "Unknown directive"
    },
    {
      "line": "      \"module\": \"/assets/locale-CtN9meVX.js\",",
      "index": "113",
      "message": "Unknown directive"
    },
    {
      "line": "      \"imports\": [",
      "index": "114",
      "message": "Unknown directive"
    },
    {
      "line": "        \"/assets/jsx-runtime-Dyj-HpQn.js\",",
      "index": "115",
      "message": "Syntax not understood"
    },
    {
      "line": "        \"/assets/LandingPage-CmD2jhY8.js\",",
      "index": "116",
      "message": "Syntax not understood"
    },
    {
      "line": "        \"/assets/index-BPjdmoRX.js\",",
      "index": "117",
      "message": "Syntax not understood"
    },
    {
      "line": "        \"/assets/QueryClientProvider-B41i5k7B.js\"",
      "index": "118",
      "message": "Syntax not understood"
    },
    {
      "line": "      ],",
      "index": "119",
      "message": "Syntax not understood"
    },
    {
      "line": "      \"css\": []",
      "index": "120",
      "message": "Unknown directive"
    },
    {
      "line": "    },",
      "index": "121",
      "message": "Syntax not understood"
    },
    {
      "line": "    \"routes/home\": {",
      "index": "122",
      "message": "Unknown directive"
    },
    {
      "line": "      \"id\": \"routes/home\",",
      "index": "123",
      "message": "Unknown directive"
    },
    {
      "line": "      \"parentId\": \"root\",",
      "index": "124",
      "message": "Unknown directive"
    },
    {
      "line": "      \"index\": true,",
      "index": "125",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasAction\": false,",
      "index": "126",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasLoader\": false,",
      "index": "127",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasClientAction\": false,",
      "index": "128",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasClientLoader\": false,",
      "index": "129",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasClientMiddleware\": false,",
      "index": "130",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasDefaultExport\": true,",
      "index": "131",
      "message": "Unknown directive"
    },
    {
      "line": "      \"hasErrorBoundary\": false,",
      "index": "132",
      "message": "Unknown directive"
    },
    {
      "line": "      \"module\": \"/assets/home-HMd4y8ql.js\",",
      "index": "133",
      "message": "Unknown directive"
    },
    {
      "line": "      \"imports\": [",
      "index": "134",
      "message": "Unknown directive"
    },
    {
      "line": "        \"/assets/jsx-runtime-Dyj-HpQn.js\",",
      "index": "135",
      "message": "Syntax not understood"
    },
    {
      "line": "        \"/assets/LandingPage-CmD2jhY8.js\",",
      "index": "136",
      "message": "Syntax not understood"
    },
    {
      "line": "        \"/assets/index-BPjdmoRX.js\",",
      "index": "137",
      "message": "Syntax not understood"
    },
    {
      "line": "        \"/assets/QueryClientProvider-B41i5k7B.js\"",
      "index": "138",
      "message": "Syntax not understood"
    },
    {
      "line": "      ],",
      "index": "139",
      "message": "Syntax not understood"
    },
    {
      "line": "      \"css\": []",
      "index": "140",
      "message": "Unknown directive"
    },
    {
      "line": "    }",
      "index": "141",
      "message": "Syntax not understood"
    },
    {
      "line": "  },",
      "index": "142",
      "message": "Syntax not understood"
    },
    {
      "line": "  \"url\": \"/assets/manifest-e7b9e77c.js\",",
      "index": "143",
      "message": "Unknown directive"
    },
    {
      "line": "  \"version\": \"e7b9e77c\"",
      "index": "144",
      "message": "Unknown directive"
    },
    {
      "line": "};",
      "index": "145",
      "message": "Syntax not understood"
    },
    {
      "line": "  window.__reactRouterRouteModules = {\"root\":route0,\"routes/locale\":route1};",
      "index": "146",
      "message": "Unknown directive"
    },
    {
      "line": "import(\"/assets/entry.client-BHOJDzmE.js\");</script><!--$--><script>window.__reactRouterContext.streamController.enqueue(\"[{\\\"_1\\\":2,\\\"_3\\\":-5,\\\"_4\\\":-5},\\\"loaderData\\\",{},\\\"actionData\\\",\\\"errors\\\"]\\n\");</script><!--$--><script>window.__reactRouterContext.streamController.close();</script><!--/$--><!--/$--></body></html>",
      "index": "148",
      "message": "Unknown directive"
    }
  ],
  "headings": [
    {
      "key": "index",
      "label": "Line #",
      "valueType": "text"
    },
    {
      "key": "line",
      "label": "Content",
      "valueType": "code"
    },
    {
      "key": "message",
      "label": "Error",
      "valueType": "code"
    }
  ]
}

Use efficient cache lifetimes

Est savings of 4 KiB

A long cache lifetime can speed up repeat visits to your page. Learn more about caching.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "url": "https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495",
      "totalBytes": 10338,
      "wastedBytes": 4135.2,
      "cacheLifetimeMs": 86400000
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "Request",
      "valueType": "url"
    },
    {
      "key": "cacheLifetimeMs",
      "label": "Cache TTL",
      "valueType": "ms",
      "displayUnit": "duration"
    },
    {
      "key": "totalBytes",
      "label": "Transfer Size",
      "valueType": "bytes",
      "displayUnit": "kb",
      "granularity": 1
    }
  ],
  "sortedBy": [
    "wastedBytes"
  ],
  "debugData": {
    "type": "debugdata",
    "wastedBytes": 4135.2
  },
  "skipSumming": [
    "cacheLifetimeMs"
  ]
}

Layout shift culprits

Layout shifts occur when elements move absent any user interaction. Investigate the causes of layout shifts, such as elements being added, removed, or their fonts changing as the page loads.

对应元素与资源
{
  "type": "list",
  "items": [
    {
      "type": "table",
      "items": [
        {
          "node": {
            "type": "text",
            "value": "Total"
          },
          "score": 0.1210945844433174
        },
        {
          "node": {
            "lhId": "page-1-DIV",
            "path": "1,HTML,1,BODY,7,DIV,2,MAIN,0,SECTION,1,DIV,0,DIV",
            "type": "node",
            "snippet": "<div class=\"relative w-full bg-transparent pt-4 sm:pt-6 pb-2 select-none\">",
            "selector": "main > section.relative > div.mt-6 > div.relative",
            "nodeLabel": "向左滚动",
            "boundingRect": {
              "top": 412,
              "left": 0,
              "right": 412,
              "width": 412,
              "bottom": 619,
              "height": 207
            }
          },
          "score": 0.1210945844433174
        }
      ],
      "headings": [
        {
          "key": "node",
          "label": "Element",
          "valueType": "node",
          "subItemsHeading": {
            "key": "extra"
          }
        },
        {
          "key": "score",
          "label": "Layout shift score",
          "valueType": "numeric",
          "granularity": 0.001,
          "subItemsHeading": {
            "key": "cause",
            "valueType": "text"
          }
        }
      ]
    }
  ]
}

Forced reflow

A forced reflow occurs when JavaScript queries geometric properties (such as offsetWidth) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about forced reflows and possible mitigations.

对应元素与资源
{
  "type": "list",
  "items": [
    {
      "type": "table",
      "items": [
        {
          "source": {
            "url": "https://vibe42.ai/assets/entry.client-BHOJDzmE.js",
            "line": 13,
            "type": "source-location",
            "column": 1395,
            "urlProvider": "network"
          },
          "reflowTime": 71.189
        }
      ],
      "headings": [
        {
          "key": "source",
          "label": "Top function call",
          "valueType": "source-location"
        },
        {
          "key": "reflowTime",
          "label": "Total reflow time",
          "valueType": "ms",
          "granularity": 1
        }
      ]
    },
    {
      "type": "table",
      "items": [
        {
          "source": {
            "url": "https://vibe42.ai/assets/LandingPage-CmD2jhY8.js",
            "line": 110,
            "type": "source-location",
            "column": 14999,
            "urlProvider": "network"
          },
          "reflowTime": 71.189
        }
      ],
      "headings": [
        {
          "key": "source",
          "label": "Source",
          "valueType": "source-location"
        },
        {
          "key": "reflowTime",
          "label": "Total reflow time",
          "valueType": "ms",
          "granularity": 1
        }
      ]
    }
  ]
}

Improve image delivery

Est savings of 1,121 KiB

Reducing the download time of images can improve the perceived load time of the page and LCP. Learn more about optimizing image size

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "url": "https://vibe42.ai/images/x/hero-slides/slide-macos-btop.webp",
      "node": {
        "lhId": "page-7-IMG",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,0,SECTION,1,DIV,0,DIV,1,DIV,0,DIV,0,DIV,0,FIGURE,0,IMG",
        "type": "node",
        "snippet": "<img alt=\"macOS 原生客户端:btop 实时系统监控与 Codex 终端流\" width=\"2400\" height=\"1800\" class=\"w-full h-full object-cover block\" loading=\"lazy\" src=\"/images/x/hero-slides/slide-macos-btop.webp\">",
        "selector": "div.grid > div.group/tile > figure.w-full > img.w-full",
        "nodeLabel": "macOS 原生客户端:btop 实时系统监控与 Codex 终端流",
        "boundingRect": {
          "top": 433,
          "left": 33,
          "right": 136,
          "width": 103,
          "bottom": 511,
          "height": 78
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (2043x1537) for its displayed dimensions (121x78). Use responsive images to reduce the image download size.",
            "wastedBytes": 269234
          }
        ]
      },
      "totalBytes": 270040,
      "wastedBytes": 269234
    },
    {
      "url": "https://vibe42.ai/images/x/all-platform-real.webp",
      "node": {
        "lhId": "page-8-IMG",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,1,DIV,2,SECTION,1,DIV,0,FIGURE,0,IMG",
        "type": "node",
        "snippet": "<img alt=\"Vibe42 全平台实景:电脑与手机会话无缝协同\" width=\"2400\" height=\"1800\" class=\"w-full h-auto object-cover block\" loading=\"lazy\" src=\"/images/x/all-platform-real.webp\">",
        "selector": "section.grid > div.order-2 > figure.overflow-hidden > img.w-full",
        "nodeLabel": "Vibe42 全平台实景:电脑与手机会话无缝协同",
        "boundingRect": {
          "top": 3004,
          "left": 40,
          "right": 372,
          "width": 332,
          "bottom": 3253,
          "height": 249
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (2400x1800) for its displayed dimensions (332x249). Use responsive images to reduce the image download size.",
            "wastedBytes": 221720
          }
        ]
      },
      "totalBytes": 226046,
      "wastedBytes": 221720
    },
    {
      "url": "https://vibe42.ai/images/x/hero-slides/slide-mobile-codex-notify.webp",
      "node": {
        "lhId": "page-9-IMG",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,0,SECTION,1,DIV,0,DIV,1,DIV,0,DIV,1,DIV,0,FIGURE,0,IMG",
        "type": "node",
        "snippet": "<img alt=\"iOS 手机端:真实系统通知推送与 OpenAI Codex 终端流\" width=\"1260\" height=\"2736\" class=\"w-full h-full object-cover block\" loading=\"lazy\" src=\"/images/x/hero-slides/slide-mobile-codex-notify.webp\">",
        "selector": "div.grid > div.group/tile > figure.w-full > img.w-full",
        "nodeLabel": "iOS 手机端:真实系统通知推送与 OpenAI Codex 终端流",
        "boundingRect": {
          "top": 433,
          "left": 154,
          "right": 258,
          "width": 103,
          "bottom": 511,
          "height": 78
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "Increasing the image compression factor could improve this image's download size.",
            "wastedBytes": 9206
          },
          {
            "reason": "This image file is larger than it needs to be (1260x953) for its displayed dimensions (103x224). Use responsive images to reduce the image download size.",
            "wastedBytes": 205234
          }
        ]
      },
      "totalBytes": 209276,
      "wastedBytes": 205412
    },
    {
      "url": "https://vibe42.ai/images/x/hero-slides/slide-windows-session.webp",
      "node": {
        "lhId": "page-10-IMG",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,0,SECTION,1,DIV,0,DIV,1,DIV,0,DIV,2,DIV,0,FIGURE,0,IMG",
        "type": "node",
        "snippet": "<img alt=\"Windows 原生客户端:GLM-5.3 终端输出与状态流\" width=\"2400\" height=\"1800\" class=\"w-full h-full object-cover block\" loading=\"lazy\" src=\"/images/x/hero-slides/slide-windows-session.webp\">",
        "selector": "div.grid > div.group/tile > figure.w-full > img.w-full",
        "nodeLabel": "Windows 原生客户端:GLM-5.3 终端输出与状态流",
        "boundingRect": {
          "top": 433,
          "left": 276,
          "right": 379,
          "width": 103,
          "bottom": 511,
          "height": 78
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (1903x1438) for its displayed dimensions (107x78). Use responsive images to reduce the image download size.",
            "wastedBytes": 178805
          }
        ]
      },
      "totalBytes": 179346,
      "wastedBytes": 178805
    },
    {
      "url": "https://vibe42.ai/images/x/ghostty-kitty.webp",
      "node": {
        "lhId": "page-11-IMG",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,1,DIV,3,SECTION,0,DIV,0,DIV,0,FIGURE,0,IMG",
        "type": "node",
        "snippet": "<img alt=\"Ghostty 原生终端渲染 Kitty 图形协议真实截图\" width=\"1260\" height=\"2736\" class=\"w-full h-full object-cover block\" loading=\"lazy\" src=\"/images/x/ghostty-kitty.webp\">",
        "selector": "div.order-2 > div.w-full > figure.w-full > img.w-full",
        "nodeLabel": "Ghostty 原生终端渲染 Kitty 图形协议真实截图",
        "boundingRect": {
          "top": 3982,
          "left": 40,
          "right": 296,
          "width": 256,
          "bottom": 4538,
          "height": 556
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (1260x2736) for its displayed dimensions (256x556). Use responsive images to reduce the image download size.",
            "wastedBytes": 99220
          }
        ]
      },
      "totalBytes": 103492,
      "wastedBytes": 99220
    },
    {
      "url": "https://vibe42.ai/images/x/hero-slides/slide-mobile-markdown.webp",
      "node": {
        "lhId": "page-12-IMG",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,0,SECTION,1,DIV,0,DIV,1,DIV,0,DIV,3,DIV,0,FIGURE,0,IMG",
        "type": "node",
        "snippet": "<img alt=\"iOS 手机端:工作区 Markdown 与代码文件高精查看器\" width=\"1260\" height=\"2736\" class=\"w-full h-full object-cover block\" loading=\"lazy\" src=\"/images/x/hero-slides/slide-mobile-markdown.webp\">",
        "selector": "div.grid > div.group/tile > figure.w-full > img.w-full",
        "nodeLabel": "iOS 手机端:工作区 Markdown 与代码文件高精查看器",
        "boundingRect": {
          "top": 529,
          "left": 33,
          "right": 136,
          "width": 103,
          "bottom": 606,
          "height": 78
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (1260x936) for its displayed dimensions (103x224). Use responsive images to reduce the image download size.",
            "wastedBytes": 86502
          }
        ]
      },
      "totalBytes": 88236,
      "wastedBytes": 86502
    },
    {
      "url": "https://vibe42.ai/images/x/desktop.webp",
      "node": {
        "lhId": "page-13-IMG",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,0,SECTION,1,DIV,0,DIV,1,DIV,0,DIV,4,DIV,0,FIGURE,0,IMG",
        "type": "node",
        "snippet": "<img alt=\"Vibe42 桌面端:多会话工作区与终端\" width=\"2400\" height=\"1570\" class=\"w-full h-full object-cover block\" loading=\"lazy\" src=\"/images/x/desktop.webp\">",
        "selector": "div.grid > div.group/tile > figure.w-full > img.w-full",
        "nodeLabel": "Vibe42 桌面端:多会话工作区与终端",
        "boundingRect": {
          "top": 529,
          "left": 154,
          "right": 258,
          "width": 103,
          "bottom": 606,
          "height": 78
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (1128x837) for its displayed dimensions (119x78). Use responsive images to reduce the image download size.",
            "wastedBytes": 52197
          }
        ]
      },
      "totalBytes": 52710,
      "wastedBytes": 52197
    },
    {
      "url": "https://vibe42.ai/images/x/mobile.webp",
      "node": {
        "lhId": "page-14-IMG",
        "path": "1,HTML,1,BODY,7,DIV,2,MAIN,1,DIV,1,SECTION,1,DIV,0,DIV,0,FIGURE,0,IMG",
        "type": "node",
        "snippet": "<img alt=\"Vibe42 手机端终端与系统推送\" width=\"1260\" height=\"2736\" class=\"w-full h-full object-cover block\" loading=\"lazy\" src=\"/images/x/mobile.webp\">",
        "selector": "div.order-2 > div.w-full > figure.w-full > img.w-full",
        "nodeLabel": "Vibe42 手机端终端与系统推送",
        "boundingRect": {
          "top": 1820,
          "left": 40,
          "right": 296,
          "width": 256,
          "bottom": 2376,
          "height": 556
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (589x1280) for its displayed dimensions (256x556). Use responsive images to reduce the image download size.",
            "wastedBytes": 35013
          }
        ]
      },
      "totalBytes": 43168,
      "wastedBytes": 35013
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "",
      "valueType": "node"
    },
    {
      "key": "url",
      "label": "URL",
      "valueType": "url",
      "subItemsHeading": {
        "key": "reason",
        "valueType": "text"
      }
    },
    {
      "key": "totalBytes",
      "label": "Resource Size",
      "valueType": "bytes"
    },
    {
      "key": "wastedBytes",
      "label": "Est Savings",
      "valueType": "bytes",
      "subItemsHeading": {
        "key": "wastedBytes",
        "valueType": "bytes"
      }
    }
  ],
  "debugData": {
    "type": "debugdata",
    "wastedBytes": 1148103
  }
}

LCP breakdown

Each subpart has specific improvement strategies. Ideally, most of the LCP time should be spent on loading the resources, not within delays.

对应元素与资源
{
  "type": "list",
  "items": [
    {
      "type": "table",
      "items": [
        {
          "label": "Time to first byte",
          "subpart": "timeToFirstByte",
          "duration": 1400.448
        },
        {
          "label": "Element render delay",
          "subpart": "elementRenderDelay",
          "duration": 2479.435
        }
      ],
      "headings": [
        {
          "key": "label",
          "label": "Subpart",
          "valueType": "text"
        },
        {
          "key": "duration",
          "label": "Duration",
          "valueType": "ms"
        }
      ]
    },
    {
      "lhId": "page-0-P",
      "path": "1,HTML,1,BODY,7,DIV,2,MAIN,1,DIV,0,DIV,0,DIV,0,DIV,1,P",
      "type": "node",
      "snippet": "<p class=\"text-sm sm:text-base text-[#8e8e93] leading-relaxed max-w-2xl\">",
      "selector": "div.rounded-3xl > div.grid > div.lg:col-span-7 > p.text-sm",
      "nodeLabel": "通勤路上、咖啡馆里,我们用手机连回家里电脑,驱动 Coding Agent 写代码、调协议、发版本——Vibe42 本身就是这样一天天做出来的。自己的产品每天…",
      "boundingRect": {
        "top": 779,
        "left": 60,
        "right": 352,
        "width": 292,
        "bottom": 893,
        "height": 114
      }
    }
  ]
}
测试环境与原始指标
{
  "finalUrl": "https://vibe42.ai/zh-HANS",
  "userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/151.0.0.0 Safari/537.36",
  "formFactor": "mobile",
  "throttlingMethod": "simulate",
  "throttling": {
    "rttMs": 150,
    "throughputKbps": 1638.4,
    "requestLatencyMs": 562.5,
    "uploadThroughputKbps": 675,
    "cpuSlowdownMultiplier": 4,
    "downloadThroughputKbps": 1474.5600000000002
  },
  "metrics": [
    {
      "id": "largest-contentful-paint",
      "unit": "millisecond",
      "value": 2892.709
    },
    {
      "id": "cumulative-layout-shift",
      "unit": "unitless",
      "value": 0.1210945844433174
    },
    {
      "id": "total-blocking-time",
      "unit": "millisecond",
      "value": 52
    },
    {
      "id": "first-contentful-paint",
      "unit": "millisecond",
      "value": 2667.209
    },
    {
      "id": "speed-index",
      "unit": "millisecond",
      "value": 6795.7892107879825
    }
  ]
}

01 / 值得借鉴

好设计,具体好在哪

精准的技术定位与高说服力的自用实测

围绕 Kitty 协议、Ghostty 终端内核渲染以及 APNs/FCM 无后台系统级推送展开,直击高频终端玩家的核心痛点,没有空泛的 AI 套话。

扎实清晰的深色 OLED 设计语言

基于 #0a0a0c 背景、精细的微透明边框与多设备真实终端会话截图,在桌面与移动端均呈现出纯正的极客工具质感。

02 / 下一步

值得继续打磨的地方

  1. 01

    在移动端适配首屏核心下载操作

    在 390px 手机视口下,主操作按钮依然显示为“下载 macOS · Intel 版”。手机用户无法在手机上安装 Mac 桌面包,首屏转化路径直接中断。

    检测 navigator.userAgent 或平台特征。在 iOS 下默认展示 TestFlight 或在浏览器中打开,在 Android 下默认提供 APK 下载,桌面端则依据架构推荐 Apple Silicon / x64 并保留下拉选择。

  2. 02

    调和内测阶段与定价卡片按钮状态

    定价方案中各个档位展示了具体美元金额和可点击的“选择”按钮,但卡片上下均提示内测暂未开放付费,导致用户不明确点击后是收费还是排队。

    将各个档位按钮的“选择”文案改为“免费体验内测”或“加入候补”,点击后统一跳转到客户端下载区或工作区登录流程。

03 / 设计语言

把气质拆成可复用的参数

色彩

背景

#0a0a0c

文字

#f2f2f2

强调

#ffffff

边线

#d0d0d0

字体与尺度

标题字体
-apple-system
正文字体
-apple-system
标题 / 正文
36px / 16px

间距与形状

区块间距
0px
组件内距
0px
卡片圆角
0px
按钮圆角
3.35544e+07px

表达也可以更准确

文案润色对照

现在

下载 macOS · Intel 版

建议表达

下载客户端 / 手机端快速开始

在现代 Mac 环境下默认推荐 Intel 版显得过时,且在手机端直接展示桌面下载会造成困惑。
现在

选择

建议表达

参与内测

页面已明确说明内测期暂未收费,使用“选择”带有购买暗示,改成“参与内测”更契合当前阶段。

04 / 检查依据

观察与实测依据

逐项查看观察、建议与采集记录。

转化3 项观察

分享卡片不完整

高优先级

在 X、Slack 或微信里展开成空白或套话,等于浪费已经拿到的点击。这是分发,不是装饰。

补上 og:title、og:description,以及一张和线上标题一致的 1200x630 图。

og:title=yes og:image=no

线上页没有统计

中优先级

看不到谁跳出,就不知道下一次修改有没有用。没有计数就等于盲飞。

在公开页放上 Plausible、PostHog 或 GA4。一段脚本就够。

no gtag / plausible / posthog / umami

移动端视口显示桌面端 macOS 下载按钮

高优先级

手机端访客点击首屏最显眼的下载按钮,获取到的是桌面端安装文件,无法直接在手机上运行。

在首屏 Hero 区域引入客户端操作系统检测,按终端类型切换 iOS/Android/桌面下载链接。

下载 macOS · Intel 版
上线4 项观察

没有 HSTS 响应头

中优先级

没有 Strict-Transport-Security,第一次访问仍可能被降到 http。浏览器不会钉死 HTTPS。

在边缘设置 Strict-Transport-Security: max-age=31536000; includeSubDomains。

strict-transport-security missing

没有 Content-Security-Policy

CSP 是限制脚本源的标准做法。vibe 页面常常什么都加载,包括被注入的脚本。

先开 report-only CSP,再收成 default-src 'self' 和明确的 script-src。

content-security-policy missing

没有 X-Content-Type-Options

没有 nosniff,浏览器可能按错误类型解释文件。这是一行响应头。

设置 X-Content-Type-Options: nosniff。

x-content-type-options missing

没有 Referrer-Policy

默认 referrer 可能把站内路径和查询串漏给第三方。

设置 Referrer-Policy: strict-origin-when-cross-origin。

referrer-policy missing
链接分享预览

05 / 开始动手

把下一步,交给你的 AI

优化指令用于调整这个页面;设计指令用于借鉴它的视觉语言。「做同款」会附带截图与实施步骤。复制后粘贴到你的代码助手中。

查看完整指令
更新首屏 Hero 区域的下载操作组件,增加平台检测逻辑。在 iOS 设备上展示‘获取 iOS 客户端 (TestFlight)’,在 Android 设备上展示‘下载 Android APK’,桌面端则根据系统架构智能推荐 Apple Silicon 或 Intel。同时将定价板块中三个档位卡片底部的‘选择’按钮文案统一替换为‘免费体验内测’,点击平滑滚动至 #download 下载区域,保留现有参数表格、暗色样式与设计 Token。