VibeCheck
https://superhi.com

页面构成与技术指标

正文

1345

操作候选

9

图片

29

HTML

307 KB

文案

标题字数
61
摘要字数
137
H1
1
H2
11

动作

主要入口

See our catalog

表单
2/ 2 输入
站内链接
35
站外链接
51

安全与页面元信息

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

构成

Next.js / Tailwind

脚本
33 ext / 43 inline
语言
en
第三方域
无

Lighthouse

移动端模拟 · 性能评分

63 / 100

2026-09-05 · 本次测试有警告，结果可能不完整。

查看详情

移动端模拟 · 实验室数据，非真实用户体验数据
2026-09-05T04:05:03.171Z · Lighthouse 13.4.1

本次测试有警告，结果可能不完整： The page may not be loading as expected because your test URL (https://superhi.com/) was redirected to https://www.superhi.com/. Try testing the second URL directly.

性能63/ 100
可访问性100/ 100
最佳实践96/ 100
SEO100/ 100
LCP · 主要内容出现8,623 ms
CLS · 布局偏移0.005
TBT · 主线程阻塞107 ms
FCP · 首次内容绘制2,747 ms
SI · 视觉加载速度7,969 ms

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

Avoid multiple page redirects

Est savings of 1,270 ms

Redirects introduce additional delays before the page can be loaded. Learn how to avoid page redirects.

对应元素与资源
{
  "type": "opportunity",
  "items": [
    {
      "url": "https://superhi.com/",
      "wastedMs": 1274.091
    },
    {
      "url": "https://www.superhi.com/",
      "wastedMs": 0
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    },
    {
      "key": "wastedMs",
      "label": "Time Spent",
      "valueType": "timespanMs"
    }
  ],
  "overallSavingsMs": 1274.091
}

Minimize main-thread work

9.3 s

Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. Learn how to minimize main-thread work

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "group": "scriptEvaluation",
      "duration": 6108.307999997853,
      "groupLabel": "Script Evaluation"
    },
    {
      "group": "other",
      "duration": 1497.2359999999526,
      "groupLabel": "Other"
    },
    {
      "group": "styleLayout",
      "duration": 877.4480000000005,
      "groupLabel": "Style & Layout"
    },
    {
      "group": "paintCompositeRender",
      "duration": 458.45200000001194,
      "groupLabel": "Rendering"
    },
    {
      "group": "scriptParseCompile",
      "duration": 199.86399999999972,
      "groupLabel": "Script Parsing & Compilation"
    },
    {
      "group": "garbageCollection",
      "duration": 105.55200000000015,
      "groupLabel": "Garbage Collection"
    },
    {
      "group": "parseHTML",
      "duration": 28.028000000000006,
      "groupLabel": "Parse HTML & CSS"
    }
  ],
  "headings": [
    {
      "key": "groupLabel",
      "label": "Category",
      "valueType": "text"
    },
    {
      "key": "duration",
      "label": "Time Spent",
      "valueType": "ms",
      "granularity": 1
    }
  ],
  "sortedBy": [
    "duration"
  ]
}

Reduce JavaScript execution time

6.1 s

Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. Learn how to reduce Javascript execution time.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "url": "https://www.superhi.com/_next/static/chunks/1610-97e1f2d9ea6dee41.js",
      "total": 5097.519999999561,
      "scripting": 4874.843999999561,
      "scriptParseCompile": 19.096
    },
    {
      "url": "https://www.superhi.com/_next/static/chunks/8deba62f-73dbafd693bede5e.js",
      "total": 1826.8200000000948,
      "scripting": 717.6080000000971,
      "scriptParseCompile": 8.036
    },
    {
      "url": "https://www.superhi.com/",
      "total": 1069.3560000000016,
      "scripting": 18.13199999999993,
      "scriptParseCompile": 12.035999999999987
    },
    {
      "url": "Unattributable",
      "total": 535.4160000000088,
      "scripting": 50.19600000000001,
      "scriptParseCompile": 0
    },
    {
      "url": "https://www.superhi.com/_next/static/chunks/edf16067-e06cae0e0a2ea1db.js",
      "total": 212.59999999998337,
      "scripting": 197.65599999998338,
      "scriptParseCompile": 9.943999999999999
    },
    {
      "url": "https://www.superhi.com/_next/static/chunks/webpack-6b3dccb0bb096bf6.js",
      "total": 192.53199999999944,
      "scripting": 186.79599999999945,
      "scriptParseCompile": 0.448
    },
    {
      "url": "https://www.superhi.com/_next/static/chunks/4421-5ba23013672d5d28.js",
      "total": 154.8280000000002,
      "scripting": 30.596000000000124,
      "scriptParseCompile": 6.3
    }
  ],
  "summary": {
    "wastedMs": 6131.687999999641
  },
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    },
    {
      "key": "total",
      "label": "Total CPU Time",
      "valueType": "ms",
      "granularity": 1
    },
    {
      "key": "scripting",
      "label": "Script Evaluation",
      "valueType": "ms",
      "granularity": 1
    },
    {
      "key": "scriptParseCompile",
      "label": "Script Parse",
      "valueType": "ms",
      "granularity": 1
    }
  ],
  "sortedBy": [
    "total"
  ]
}

Elements with visible text labels do not have matching accessible names.

Visible text labels that do not match the accessible name can result in a confusing experience for screen reader users. Learn more about accessible names.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-0-BUTTON",
        "path": "1,HTML,1,BODY,50,DIV,1,DIV,0,BUTTON",
        "type": "node",
        "snippet": "<button class=\"\" id=\"rcc-decline-button\" aria-label=\"Decline cookies\" style=\"background: rgb(0, 0, 0); border: 0px; border-radius: 2em;\">",
        "selector": "body > div.CookieConsent > div > button#rcc-decline-button",
        "nodeLabel": "Essential cookies only",
        "explanation": "Fix any of the following:\n  Text inside the element is not included in the accessible name",
        "boundingRect": {
          "top": 777,
          "left": 15,
          "right": 211,
          "width": 196,
          "bottom": 808,
          "height": 31
        }
      }
    },
    {
      "node": {
        "lhId": "1-1-BUTTON",
        "path": "1,HTML,1,BODY,50,DIV,1,DIV,1,BUTTON",
        "type": "node",
        "snippet": "<button class=\"\" id=\"rcc-confirm-button\" aria-label=\"Accept cookies\" style=\"background: rgb(255, 255, 255); border: 0px; border-radius: 2em;\">",
        "selector": "body > div.CookieConsent > div > button#rcc-confirm-button",
        "nodeLabel": "Sure thing",
        "explanation": "Fix any of the following:\n  Text inside the element is not included in the accessible name",
        "boundingRect": {
          "top": 777,
          "left": 224,
          "right": 335,
          "width": 111,
          "bottom": 808,
          "height": 31
        }
      }
    },
    {
      "node": {
        "lhId": "1-2-A",
        "path": "1,HTML,1,BODY,51,DIV,0,DIV,0,DIV,0,DIV,0,A",
        "type": "node",
        "snippet": "<a class=\"Link_default__VBYZf Link_discreet__Qrwpa SiteBanner_mounted__0vBHr\" aria-label=\"Sale\" href=\"/sale\">",
        "selector": "div.SiteWrapper_wrapper__hYMzX > div.SiteBanner_siteBanner__XcmVh > div.SiteBanner_container__moGWm > a.Link_default__VBYZf",
        "nodeLabel": "GET 50% OFF ALL COURSES AND WORKSHOPS!\nGET 50% OFF ALL COURSES AND WORKSHOPS!\nG…",
        "explanation": "Fix any of the following:\n  Text inside the element is not included in the accessible name",
        "boundingRect": {
          "top": 0,
          "left": 0,
          "right": 412,
          "width": 412,
          "bottom": 32,
          "height": 32
        }
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.semantics",
      "wcag21a",
      "wcag253",
      "EN-301-549",
      "EN-9.2.5.3",
      "RGAAv4",
      "RGAA-6.1.5",
      "experimental"
    ],
    "type": "debugdata",
    "impact": "serious"
  }
}

Reduce unused JavaScript

Est savings of 219 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://www.superhi.com/_next/static/chunks/43128e58-f9054838ef914ad6.js",
      "totalBytes": 91544,
      "wastedBytes": 61857,
      "wastedPercent": 67.57118170256751
    },
    {
      "url": "https://www.superhi.com/_next/static/chunks/a258c5eb-e54c9157f3e025aa.js",
      "totalBytes": 103812,
      "wastedBytes": 54166,
      "wastedPercent": 52.176475887720564
    },
    {
      "url": "https://www.superhi.com/_next/static/chunks/83e49ca7.c3326ae487491daf.js",
      "totalBytes": 87164,
      "wastedBytes": 48767,
      "wastedPercent": 55.9481503842096
    },
    {
      "url": "https://www.superhi.com/_next/static/chunks/1610-97e1f2d9ea6dee41.js",
      "totalBytes": 78618,
      "wastedBytes": 31292,
      "wastedPercent": 39.802860218360756
    },
    {
      "url": "https://www.superhi.com/_next/static/chunks/5145-ed3c3ca93672c8cf.js",
      "totalBytes": 62298,
      "wastedBytes": 28681,
      "wastedPercent": 46.03826941882285
    }
  ],
  "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": 0,
      "LCP": 900
    }
  },
  "overallSavingsMs": 900,
  "overallSavingsBytes": 224763
}

Issues were logged in the `Issues` panel in Chrome Devtools

Issues logged to the `Issues` panel in Chrome Devtools indicate unresolved problems. They can come from network request failures, insufficient security controls, and other browser concerns. Open up the Issues panel in Chrome DevTools for more details on each issue.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "subItems": {
        "type": "subitems",
        "items": []
      },
      "issueType": "Content security policy"
    }
  ],
  "headings": [
    {
      "key": "issueType",
      "label": "Issue type",
      "valueType": "text",
      "subItemsHeading": {
        "key": "url",
        "valueType": "url"
      }
    }
  ]
}

Page prevented back/forward cache restoration

3 failure reasons

Many navigations are performed by going back to a previous page, or forwards again. The back/forward cache (bfcache) can speed up these return navigations. Learn more about the bfcache

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "reason": "Pages with cache-control:no-store header cannot enter back/forward cache.",
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "frameUrl": "https://www.superhi.com/"
          }
        ]
      },
      "failureType": "Actionable",
      "protocolReason": "CacheControlNoStoreHTTPOnlyCookieModified"
    },
    {
      "reason": "Pages whose main resource has cache-control:no-store cannot enter back/forward cache.",
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "frameUrl": "https://www.superhi.com/"
          }
        ]
      },
      "failureType": "Not actionable",
      "protocolReason": "MainResourceHasCacheControlNoStore"
    },
    {
      "reason": "Back/forward cache is disabled because some JavaScript network request received resource with Cache-Control: no-store header.",
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "frameUrl": "https://www.superhi.com/"
          }
        ]
      },
      "failureType": "Not actionable",
      "protocolReason": "JsNetworkRequestReceivedCacheControlNoStoreResource"
    }
  ],
  "headings": [
    {
      "key": "reason",
      "label": "Failure reason",
      "valueType": "text",
      "subItemsHeading": {
        "key": "frameUrl",
        "valueType": "url"
      }
    },
    {
      "key": "failureType",
      "label": "Failure type",
      "valueType": "text"
    }
  ]
}

Use efficient cache lifetimes

Est savings of 9 KiB

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

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "url": "https://image.mux.com/J1jxMEz3qf0270045CogNQhFbkHk8xUmEq/thumbnail.jpg",
      "totalBytes": 87207,
      "wastedBytes": 8720.699999999999,
      "cacheLifetimeMs": 604800000
    }
  ],
  "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": 8720.699999999999
  },
  "skipSumming": [
    "cacheLifetimeMs"
  ]
}

Document request latency

Est savings of 330 ms

Your first network request is the most important. Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.

对应元素与资源
{
  "type": "checklist",
  "items": {
    "noRedirects": {
      "label": "Had redirects (1 redirects, +325 ms)",
      "value": false
    },
    "usesCompression": {
      "label": "Applies text compression",
      "value": true
    },
    "serverResponseIsFast": {
      "label": "Server responds quickly (observed 101 ms)",
      "value": true
    }
  },
  "debugData": {
    "type": "debugdata",
    "wastedBytes": 0,
    "redirectDuration": 325,
    "serverResponseTime": 101,
    "uncompressedResponseBytes": 0
  }
}

Improve image delivery

Est savings of 81 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://image.mux.com/J1jxMEz3qf0270045CogNQhFbkHk8xUmEq/thumbnail.jpg",
      "node": {
        "lhId": "page-7-IMG",
        "path": "1,HTML,1,BODY,51,DIV,0,DIV,1,MAIN,1,DIV,2,DIV,0,DIV,1,DIV,1,DIV,0,DIV,0,A,0,DIV,0,DIV,0,DIV,0,MEDIA-CONTROLLER,0,MEDIA-POSTER-IMAGE,a,#document-fragment,1,IMG",
        "type": "node",
        "snippet": "<img part=\"poster img\" aria-hidden=\"true\" id=\"image\" src=\"https://image.mux.com/J1jxMEz3qf0270045CogNQhFbkHk8xUmEq/thumbnail.jpg\">",
        "selector": "img#image",
        "nodeLabel": "img#image",
        "boundingRect": {
          "top": 1091,
          "left": 16,
          "right": 396,
          "width": 380,
          "bottom": 1305,
          "height": 214
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (1920x1080) for its displayed dimensions (380x214). Use responsive images to reduce the image download size.",
            "wastedBytes": 83382
          }
        ]
      },
      "totalBytes": 86781,
      "wastedBytes": 83382
    }
  ],
  "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": 83382
  }
}
测试环境与原始指标
{
  "finalUrl": "https://www.superhi.com/",
  "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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": 8622.694000000001
    },
    {
      "id": "cumulative-layout-shift",
      "unit": "unitless",
      "value": 0.0046577783828862275
    },
    {
      "id": "total-blocking-time",
      "unit": "millisecond",
      "value": 106.5
    },
    {
      "id": "first-contentful-paint",
      "unit": "millisecond",
      "value": 2747.1220000000003
    },
    {
      "id": "speed-index",
      "unit": "millisecond",
      "value": 7969.33055050135
    }
  ]
}

01 / 值得借鉴

好设计，具体好在哪

几何图形定义轻松气质

黄色多边形、红色圆与蓝色笑脸在边缘构图，正文区仍然保持安静。

目录与试听并列

看课程目录与免费课程分别满足已明确目标和仍在试探的访客。

02 / 下一步

值得继续打磨的地方

  1. 01

    降低促销条的持续干扰

    桌面顶端重复出现同一句折扣信息，与中间的课程价值说明竞争注意力。

    桌面只保留一条清楚的优惠信息与关闭入口，避免反复滚动；到期后按真实状态移除。

03 / 设计语言

把气质拆成可复用的参数

色彩

背景

#ffffff

文字

#111118

强调

#2727e6

字体与尺度

标题字体
__haasGrotDisp_332926
正文字体
__haasGrotText_7ea857
标题 / 正文
92px / 16px

间距与形状

区块间距
0px
组件内距
—
卡片圆角
—
按钮圆角
48px

参数来自页面元素采样，空值表示未取得；不将单个元素的参数当作全站规范。

04 / 检查依据

观察与实测依据

数据来自同次页面采集；字体、圆角和间距为具体元素采样，不代表全站唯一设计规范。空值为未取得。HTML 为源码体积，不是压缩传输量；脚本数为 DOM 标签数，不是请求数。

品味1 项观察

降低促销条的持续干扰

桌面顶端重复出现同一句折扣信息，与中间的课程价值说明竞争注意力。

桌面只保留一条清楚的优惠信息与关闭入口，避免反复滚动；到期后按真实状态移除。

desktop.png: repeated offer across top strip
上线1 项观察

没有 Referrer-Policy

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

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

referrer-policy missing
链接分享预览

Online code, design, and project management courses • SuperHi

Learn code, design, and project management skills with flexible online courses. Join a global community, and curate your creative career.

05 / 开始动手

把下一步，交给你的 AI

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

查看完整指令
请基于 https://superhi.com 的 2026-09-05T03:29:06.307Z 页面快照优化当前项目。先确认当前实现与快照差异，不要把已变化的内容重新改回旧版。

设计基线
促销条与窄导航位于顶部，中央主标题强调创意职业，课程目录与免费课程两条路径成组出现；后续进入课程内容。桌面几何图形围绕文字，手机减少边缘图形并保留居中的短行标题。参考品牌形状、留白和双行动层级，促销信息与学员数量必须使用真实数据。
{
  "colors": [
    {
      "role": "bg",
      "hex": "#ffffff"
    },
    {
      "role": "ink",
      "hex": "#111118"
    },
    {
      "role": "accent",
      "hex": "#2727e6"
    }
  ],
  "fonts": {
    "body": "__haasGrotText_7ea857",
    "display": "__haasGrotDisp_332926",
    "stack": [
      "__haasGrotText_7ea857",
      "__haasGrotDisp_332926",
      "__martianMono_eeab0a"
    ]
  },
  "radius": {
    "button": "48px",
    "card": "",
    "field": ""
  },
  "space": {
    "section": "0px",
    "card": ""
  },
  "type": {
    "h1": "92px",
    "body": "16px",
    "weight": "400",
    "lineHeight": "21.6px",
    "letterSpacing": "-2.76px"
  }
}
数据来自同次页面采集；字体、圆角和间距为具体元素采样，不代表全站唯一设计规范。空值为未取得。HTML 为源码体积，不是压缩传输量；脚本数为 DOM 标签数，不是请求数。

执行事项
1. 降低促销条的持续干扰
桌面只保留一条清楚的优惠信息与关闭入口，避免反复滚动；到期后按真实状态移除。
依据: desktop.png: repeated offer across top strip

2. 没有 Referrer-Policy
设置 Referrer-Policy: strict-origin-when-cross-origin。
依据: referrer-policy missing

验收
- 在 1440×900 和 390×844 分别核对文字、布局和主要操作“See our catalog”。
- 保留已有品牌、登录和业务链路，不从静态截图推断交互故障。
- 只修复有证据的项；涉及安全响应头时先用报告模式验证现有资源及认证兼容性。
- 对比修改前后的截图，并执行相关功能测试。不要声称未经测试的功能已通过。