VibeCheck
https://teenage.engineering

页面构成与技术指标

正文

261

操作候选

5

图片

39

HTML

272 KB

文案

标题字数
19
摘要字数
117
H1
0
H2
0

动作

主要入口

explore all products

表单
0/ 2 输入
站内链接
82
站外链接
1

安全与页面元信息

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

构成

Vite / Tailwind

脚本
5 ext / 9 inline
Alt
39 missing
语言
en
第三方域
3

Lighthouse

移动端模拟 · 性能评分

68 / 100

2026-09-05 · 实验室数据，非真实用户体验数据。

查看详情

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

性能68/ 100
可访问性91/ 100
最佳实践77/ 100
SEO100/ 100
LCP · 主要内容出现6,577 ms
CLS · 布局偏移0.001
TBT · 主线程阻塞66 ms
FCP · 首次内容绘制3,876 ms
SI · 视觉加载速度3,876 ms

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

Uses third-party cookies

2 cookies found

Third-party cookies may be blocked in some contexts. Learn more about preparing for third-party cookie restrictions.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "url": "https://cdn.fonts.net/t/trackingCode.js",
      "name": "__cf_bm"
    },
    {
      "url": "https://googleads.g.doubleclick.net/pagead/viewthroughconversion/924686147/?random=1788580833678&cv=11&fst=1788580833678&bg=ffffff&guid=ON&async=1&en=gtag.config&gtm=45be6921v896201052za200zb895054246zd895054246xec&gcd=13n3n3n3n5l1&dma=0&tag_exp=115616985~115938466~115938469~118897920~118897930~120213116~120385422~120469145~120469153&u_w=412&u_h=823&url=https%3A%2F%2Fteenage.engineering%2F&rcb=14&frm=0&tiba=teenage%20engineering&hn=www.googleadservices.com&npa=0&pscdl=noapi&auid=1104661150.1788580834&uaa=&uab=64&uafvl=Chromium%3B151.0.7922.34%7CNot%253DA%253FBrand%3B99.0.0.0&uamb=1&uam=moto%20g%20power%20(2022)&uap=Android&uapv=11.0&uaw=0&data=event%3Dgtag.config&ept=9&rfmt=3&fmt=4",
      "name": "test_cookie"
    }
  ],
  "headings": [
    {
      "key": "name",
      "label": "Name",
      "valueType": "text"
    },
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    }
  ]
}

Missing source maps for large first-party JavaScript

Source maps translate minified code to the original source code. This helps developers debug in production. In addition, Lighthouse is able to provide further insights. Consider deploying source maps to take advantage of these benefits. Learn more about source maps.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "error": "Large JavaScript file is missing a source map"
          }
        ]
      },
      "scriptUrl": "https://teenage.engineering/assets/video.5wnEmqKD.js"
    }
  ],
  "headings": [
    {
      "key": "scriptUrl",
      "label": "URL",
      "valueType": "url",
      "subItemsHeading": {
        "key": "error"
      }
    },
    {
      "key": "sourceMapUrl",
      "label": "Map URL",
      "valueType": "url"
    }
  ]
}

Links do not have a discernible name

Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn how to make links accessible.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-0-A",
        "path": "1,HTML,1,BODY,0,DIV,3,MAIN,1,DIV,1,DIV,0,A",
        "type": "node",
        "snippet": "<a class=\"abox lnk\" href=\"/products/ep\" data-discover=\"true\">",
        "selector": "main._main_2d6cs_1 > div.page > div.cond > a.abox",
        "nodeLabel": "main._main_2d6cs_1 > div.page > div.cond > a.abox",
        "explanation": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\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": 0,
          "left": 412,
          "right": 412,
          "width": 0,
          "bottom": 0,
          "height": 0
        }
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.name-role-value",
      "wcag2a",
      "wcag244",
      "wcag412",
      "section508",
      "section508.22.a",
      "TTv5",
      "TT6.a",
      "EN-301-549",
      "EN-9.2.4.4",
      "EN-9.4.1.2",
      "ACT",
      "RGAAv4",
      "RGAA-6.2.1"
    ],
    "type": "debugdata",
    "impact": "serious"
  }
}

`[user-scalable="no"]` is used in the `<meta name="viewport">` element or the `[maximum-scale]` attribute is less than 5.

Disabling zooming is problematic for users with low vision who rely on screen magnification to properly see the contents of a web page. Learn more about the viewport meta tag.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-1-META",
        "path": "1,HTML,0,HEAD,2,META",
        "type": "node",
        "snippet": "<meta name=\"viewport\" content=\"width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,viewpor…\">",
        "selector": "head > meta",
        "nodeLabel": "head > meta",
        "explanation": "Fix any of the following:\n  maximum-scale on <meta> tag disables zooming on mobile devices",
        "boundingRect": {
          "top": 0,
          "left": 0,
          "right": 0,
          "width": 0,
          "bottom": 0,
          "height": 0
        }
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.sensory-and-visual-cues",
      "wcag2aa",
      "wcag144",
      "EN-301-549",
      "EN-9.1.4.4",
      "ACT",
      "RGAAv4",
      "RGAA-10.4.2"
    ],
    "type": "debugdata",
    "impact": "moderate"
  }
}

Reduce unused JavaScript

Est savings of 279 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://teenage.engineering/assets/video.5wnEmqKD.js",
      "totalBytes": 158288,
      "wastedBytes": 137075,
      "wastedPercent": 86.59854123443054
    },
    {
      "url": "https://www.googletagmanager.com/gtag/js?id=G-BJE1ZP05H0",
      "totalBytes": 193746,
      "wastedBytes": 76253,
      "wastedPercent": 39.35715126916015
    },
    {
      "url": "https://www.googletagmanager.com/gtag/js?id=AW-924686147&cx=c&gtm=4e6921",
      "totalBytes": 123388,
      "wastedBytes": 47679,
      "wastedPercent": 38.64140302728573
    },
    {
      "url": "https://teenage.engineering/assets/chunk-EVOBXE3Y.BkirKpUd.js",
      "totalBytes": 37697,
      "wastedBytes": 25046,
      "wastedPercent": 66.43899848128999
    }
  ],
  "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": 900,
      "LCP": 900
    }
  },
  "overallSavingsMs": 900,
  "overallSavingsBytes": 286053
}

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": [
          {
            "url": "https://cdn.fonts.net/t/trackingCode.js"
          },
          {
            "url": "https://cdn.fonts.net/t/1.css?apiType=css&projectid=ec359835-db4c-4edb-b05d-072b249c9df0"
          },
          {
            "url": "https://googleads.g.doubleclick.net/pagead/viewthroughconversion/924686147/?random=1788580833678&cv=11&fst=1788580833678&bg=ffffff&guid=ON&async=1&en=gtag.config&gtm=45be6921v896201052za200zb895054246zd895054246xec&gcd=13n3n3n3n5l1&dma=0&tag_exp=115616985~115938466~115938469~118897920~118897930~120213116~120385422~120469145~120469153&u_w=412&u_h=823&url=https%3A%2F%2Fteenage.engineering%2F&rcb=14&frm=0&tiba=teenage%20engineering&hn=www.googleadservices.com&npa=0&pscdl=noapi&auid=1104661150.1788580834&uaa=&uab=64&uafvl=Chromium%3B151.0.7922.34%7CNot%253DA%253FBrand%3B99.0.0.0&uamb=1&uam=moto%20g%20power%20(2022)&uap=Android&uapv=11.0&uaw=0&data=event%3Dgtag.config&ept=9&rfmt=3&fmt=4"
          }
        ]
      },
      "issueType": "Cookie"
    }
  ],
  "headings": [
    {
      "key": "issueType",
      "label": "Issue type",
      "valueType": "text",
      "subItemsHeading": {
        "key": "url",
        "valueType": "url"
      }
    }
  ]
}

Improve image delivery

Est savings of 117 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://assets.teenage.engineering/_img/69b2de3ac4b7c86057ec493c_1024.webp",
      "node": {
        "lhId": "page-3-IMG",
        "path": "1,HTML,1,BODY,0,DIV,3,MAIN,1,DIV,1,DIV,1,DIV,6,A,0,DIV,0,DIV,0,PICTURE,2,IMG",
        "type": "node",
        "snippet": "<img src=\"https://assets.teenage.engineering/_img/69b2de3ac4b7c86057ec493c_1024.webp\" style=\"position: absolute; width: 100%; height: auto; pointer-events: none;\" alt=\"\" loading=\"lazy\" fetchpriority=\"auto\" height=\"4096\" width=\"4096\">",
        "selector": "div.box > div.img-wrapper > picture > img",
        "nodeLabel": "div.box > div.img-wrapper > picture > img",
        "boundingRect": {
          "top": 1391,
          "left": 19,
          "right": 393,
          "width": 374,
          "bottom": 1765,
          "height": 374
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (1024x1024) for its displayed dimensions (374x374). Use responsive images to reduce the image download size.",
            "wastedBytes": 93212
          }
        ]
      },
      "totalBytes": 107574,
      "wastedBytes": 93212
    },
    {
      "url": "https://assets.teenage.engineering/_img/6a5c9ccec88f5551e8d09f8e_1024.webp",
      "node": {
        "lhId": "page-4-IMG",
        "path": "1,HTML,1,BODY,0,DIV,3,MAIN,1,DIV,1,DIV,1,DIV,4,A,0,DIV,0,DIV,0,PICTURE,2,IMG",
        "type": "node",
        "snippet": "<img src=\"https://assets.teenage.engineering/_img/6a5c9ccec88f5551e8d09f8e_1024.webp\" style=\"position: absolute; width: 100%; height: auto; pointer-events: none;\" alt=\"\" loading=\"lazy\" fetchpriority=\"auto\" height=\"7000\" width=\"7000\">",
        "selector": "div.box > div.img-wrapper > picture > img",
        "nodeLabel": "div.box > div.img-wrapper > picture > img",
        "boundingRect": {
          "top": 933,
          "left": -39,
          "right": 451,
          "width": 491,
          "bottom": 1424,
          "height": 491
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (1024x1024) for its displayed dimensions (374x374). Use responsive images to reduce the image download size.",
            "wastedBytes": 26296
          }
        ]
      },
      "totalBytes": 30348,
      "wastedBytes": 26296
    }
  ],
  "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": 119508
  }
}

LCP request discovery

Optimize LCP by making the LCP image discoverable from the HTML immediately, and avoiding lazy-loading

对应元素与资源
{
  "type": "list",
  "items": [
    {
      "type": "checklist",
      "items": {
        "eagerlyLoaded": {
          "label": "LCP resources should not use loading=lazy",
          "value": false
        },
        "priorityHinted": {
          "label": "fetchpriority=high should be applied",
          "value": false
        },
        "requestDiscoverable": {
          "label": "Request is discoverable in initial document",
          "value": true
        }
      }
    },
    {
      "lhId": "page-0-IMG",
      "path": "1,HTML,1,BODY,0,DIV,3,MAIN,1,DIV,1,DIV,0,A,0,DIV,0,DIV,0,PICTURE,0,IMG",
      "type": "node",
      "snippet": "<img src=\"https://assets.teenage.engineering/_img/6a3bdc2638fc31151a900e4d_opt.svg\" style=\"position: absolute; width: 100%; height: auto; pointer-events: none;\" alt=\"\" loading=\"lazy\" fetchpriority=\"auto\" height=\"722\" width=\"980\">",
      "selector": "div.box > div.img-wrapper > picture > img",
      "nodeLabel": "div.box > div.img-wrapper > picture > img",
      "boundingRect": {
        "top": 58,
        "left": -6,
        "right": 418,
        "width": 423,
        "bottom": 369,
        "height": 312
      }
    }
  ]
}

Network dependency tree

Avoid chaining critical requests by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.

对应元素与资源
{
  "type": "list",
  "items": [
    {
      "type": "list-section",
      "value": {
        "type": "network-tree",
        "chains": {
          "0F9C7A4DB24AB553A9028B768B0D552D": {
            "url": "https://teenage.engineering/",
            "children": {
              "44876.48": {
                "url": "https://teenage.engineering/assets/root.NRW9iUxr.css",
                "children": {
                  "44876.169": {
                    "url": "https://teenage.engineering/assets/TE20T.C-qNTEkY.woff2",
                    "children": {},
                    "transferSize": 19666,
                    "navStartToEndTime": 846
                  },
                  "44876.172": {
                    "url": "https://teenage.engineering/assets/TE40L.BfLkqdKa.woff2",
                    "children": {},
                    "isLongest": true,
                    "transferSize": 24556,
                    "navStartToEndTime": 846
                  }
                },
                "isLongest": true,
                "transferSize": 5142,
                "navStartToEndTime": 529
              },
              "44876.49": {
                "url": "https://teenage.engineering/assets/app-context.Dq8eP25W.css",
                "children": {},
                "transferSize": 2796,
                "navStartToEndTime": 528
              },
              "44876.50": {
                "url": "https://teenage.engineering/assets/form.DWmR17wv.css",
                "children": {},
                "transferSize": 2032,
                "navStartToEndTime": 527
              },
              "44876.51": {
                "url": "https://teenage.engineering/assets/block.2tPiDhcW.css",
                "children": {},
                "transferSize": 1305,
                "navStartToEndTime": 529
              },
              "44876.52": {
                "url": "https://teenage.engineering/assets/flex.C4wW179p.css",
                "children": {},
                "transferSize": 1088,
                "navStartToEndTime": 529
              },
              "44876.53": {
                "url": "https://teenage.engineering/assets/button.B8x4Racb.css",
                "children": {},
                "transferSize": 1193,
                "navStartToEndTime": 530
              },
              "44876.54": {
                "url": "https://teenage.engineering/assets/container.dVm2W4Ta.css",
                "children": {},
                "transferSize": 997,
                "navStartToEndTime": 530
              },
              "44876.55": {
                "url": "https://teenage.engineering/assets/grid.BPtO4oiR.css",
                "children": {},
                "transferSize": 1287,
                "navStartToEndTime": 618
              },
              "44876.56": {
                "url": "https://teenage.engineering/assets/image.B2cBDLbL.css",
                "children": {},
                "transferSize": 772,
                "navStartToEndTime": 618
              },
              "44876.57": {
                "url": "https://teenage.engineering/assets/spinner.CDDf_qcL.css",
                "children": {},
                "transferSize": 1592,
                "navStartToEndTime": 618
              },
              "44876.58": {
                "url": "https://teenage.engineering/assets/error-page.8k_twQst.css",
                "children": {},
                "transferSize": 817,
                "navStartToEndTime": 618
              },
              "44876.59": {
                "url": "https://teenage.engineering/assets/link.vCOxmn-l.css",
                "children": {},
                "transferSize": 972,
                "navStartToEndTime": 618
              },
              "44876.60": {
                "url": "https://teenage.engineering/assets/not-found-page.Cbb_jp4j.css",
                "children": {},
                "transferSize": 817,
                "navStartToEndTime": 618
              },
              "44876.61": {
                "url": "https://teenage.engineering/assets/layout.B4ksf3_z.css",
                "children": {},
                "transferSize": 3725,
                "navStartToEndTime": 619
              },
              "44876.62": {
                "url": "https://teenage.engineering/assets/te013.uBLyftda.css",
                "children": {},
                "transferSize": 7325,
                "navStartToEndTime": 619
              },
              "44876.63": {
                "url": "https://teenage.engineering/assets/theme.CNHA7zMS.css#",
                "children": {},
                "transferSize": 960,
                "navStartToEndTime": 620
              },
              "44876.64": {
                "url": "https://teenage.engineering/assets/video.DyYfRNFE.css#",
                "children": {},
                "transferSize": 12876,
                "navStartToEndTime": 620
              },
              "44876.168": {
                "url": "https://teenage.engineering/site.webmanifest",
                "children": {},
                "transferSize": 1063,
                "navStartToEndTime": 620
              }
            },
            "isLongest": true,
            "transferSize": 51878,
            "navStartToEndTime": 341
          }
        },
        "longestChain": {
          "duration": 846
        }
      }
    },
    {
      "type": "list-section",
      "title": "Preconnected origins",
      "value": {
        "type": "table",
        "items": [
          {
            "origin": "https://assets.teenage.engineering/",
            "source": {
              "lhId": "page-2-LINK",
              "path": "1,HTML,0,HEAD,10,LINK",
              "type": "node",
              "snippet": "<link rel=\"preconnect\" href=\"https://assets.teenage.engineering\" crossorigin=\"\">",
              "selector": "head > link",
              "nodeLabel": "head > link",
              "boundingRect": {
                "top": 0,
                "left": 0,
                "right": 0,
                "width": 0,
                "bottom": 0,
                "height": 0
              }
            },
            "subItems": {
              "type": "subitems",
              "items": []
            }
          }
        ],
        "headings": [
          {
            "key": "origin",
            "label": "Origin",
            "valueType": "text",
            "subItemsHeading": {
              "key": "warning"
            }
          },
          {
            "key": "source",
            "label": "Source",
            "valueType": "node"
          }
        ]
      },
      "description": "[preconnect](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/) hints help the browser establish a connection earlier in the page load, saving time when the first request for that origin is made. The following are the origins that the page preconnected to."
    },
    {
      "type": "list-section",
      "title": "Preconnect candidates",
      "value": {
        "type": "text",
        "value": "No additional origins are good candidates for preconnecting"
      },
      "description": "Add [preconnect](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/) hints to your most important origins, but try to use no more than 4."
    }
  ]
}

Render-blocking requests

Est savings of 90 ms

Requests are blocking the page's initial render, which may delay LCP. Deferring or inlining can move these network requests out of the critical path.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "url": "https://teenage.engineering/assets/video.DyYfRNFE.css#",
      "totalBytes": 12876
    },
    {
      "url": "https://teenage.engineering/assets/theme.CNHA7zMS.css#",
      "totalBytes": 960
    },
    {
      "url": "https://teenage.engineering/assets/te013.uBLyftda.css",
      "totalBytes": 7325
    },
    {
      "url": "https://teenage.engineering/assets/layout.B4ksf3_z.css",
      "wastedMs": 150,
      "totalBytes": 3725
    },
    {
      "url": "https://teenage.engineering/assets/grid.BPtO4oiR.css",
      "totalBytes": 1287
    },
    {
      "url": "https://teenage.engineering/assets/link.vCOxmn-l.css",
      "totalBytes": 972
    },
    {
      "url": "https://teenage.engineering/assets/error-page.8k_twQst.css",
      "totalBytes": 817
    },
    {
      "url": "https://teenage.engineering/assets/spinner.CDDf_qcL.css",
      "totalBytes": 1592
    },
    {
      "url": "https://teenage.engineering/assets/image.B2cBDLbL.css",
      "totalBytes": 772
    },
    {
      "url": "https://teenage.engineering/assets/not-found-page.Cbb_jp4j.css",
      "totalBytes": 817
    },
    {
      "url": "https://teenage.engineering/assets/button.B8x4Racb.css",
      "totalBytes": 1193
    },
    {
      "url": "https://teenage.engineering/assets/container.dVm2W4Ta.css",
      "totalBytes": 997
    },
    {
      "url": "https://teenage.engineering/assets/flex.C4wW179p.css",
      "totalBytes": 1088
    },
    {
      "url": "https://teenage.engineering/assets/block.2tPiDhcW.css",
      "totalBytes": 1305
    },
    {
      "url": "https://teenage.engineering/assets/root.NRW9iUxr.css",
      "totalBytes": 5142
    },
    {
      "url": "https://teenage.engineering/assets/app-context.Dq8eP25W.css",
      "totalBytes": 2796
    },
    {
      "url": "https://teenage.engineering/assets/form.DWmR17wv.css",
      "totalBytes": 2032
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    },
    {
      "key": "totalBytes",
      "label": "Transfer Size",
      "valueType": "bytes"
    },
    {
      "key": "wastedMs",
      "label": "Duration",
      "valueType": "timespanMs"
    }
  ]
}
测试环境与原始指标
{
  "finalUrl": "https://teenage.engineering/",
  "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": 6576.799000000003
    },
    {
      "id": "cumulative-layout-shift",
      "unit": "unitless",
      "value": 0.0007842749571654909
    },
    {
      "id": "total-blocking-time",
      "unit": "millisecond",
      "value": 65.5
    },
    {
      "id": "first-contentful-paint",
      "unit": "millisecond",
      "value": 3876.4570000000003
    },
    {
      "id": "speed-index",
      "unit": "millisecond",
      "value": 3876.4570000000003
    }
  ]
}

01 / 值得借鉴

好设计，具体好在哪

图形承担导航识别

桌面每组导航拥有独立黑色几何符号，文字只负责补充分类。

宣传与货架有明确节奏

上部漫画建立情绪，下方按 EP、field system、pocket operator 等产品系列组织实际入口。

02 / 下一步

值得继续打磨的地方

  1. 01

    手机导航需要更清楚的文字辅助

    手机顶栏主要依靠图标，新访客不易立即理解入口。

    为手机菜单和商店图标补齐可访问名称，并在展开后保留产品分类文字；用键盘及读屏实际验证。

03 / 设计语言

把气质拆成可复用的参数

色彩

背景

#ffffff

文字

#000000

字体与尺度

标题字体
te-20
正文字体
te-20
标题 / 正文
— / 16px

间距与形状

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

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

04 / 检查依据

观察与实测依据

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

转化1 项观察

手机导航需要更清楚的文字辅助

手机顶栏主要依靠图标，新访客不易立即理解入口。

为手机菜单和商店图标补齐可访问名称，并在展开后保留产品分类文字；用键盘及读屏实际验证。

mobile.png: icon-only header
上线1 项观察

没有 Content-Security-Policy

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

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

content-security-policy missing
链接分享预览

teenage engineering

teenage engineering creates high quality, well designed, electronic products for all people who love sound and music.

05 / 开始动手

把下一步，交给你的 AI

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

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

设计基线
顶部用几何图标区分产品、商店、动态和支持；首屏以压缩黑体和漫画传达 EP 更新主题，向下接产品系列与购买入口。手机将导航收为图标，宣传图后紧接产品卡。参考重点是图形导航、极端字重与精细器材图之间的反差，而非复制漫画人物。
{
  "colors": [
    {
      "role": "bg",
      "hex": "#ffffff"
    },
    {
      "role": "ink",
      "hex": "#000000"
    }
  ],
  "fonts": {
    "body": "te-20",
    "display": "te-20",
    "stack": [
      "te-20"
    ]
  },
  "radius": {
    "button": "0px",
    "card": "",
    "field": ""
  },
  "space": {
    "section": "0px",
    "card": ""
  },
  "type": {
    "h1": "",
    "body": "16px",
    "weight": "",
    "lineHeight": "24px",
    "letterSpacing": ""
  }
}
数据来自同次页面采集；字体、圆角和间距为具体元素采样，不代表全站唯一设计规范。空值为未取得。HTML 为源码体积，不是压缩传输量；脚本数为 DOM 标签数，不是请求数。

执行事项
1. 手机导航需要更清楚的文字辅助
为手机菜单和商店图标补齐可访问名称，并在展开后保留产品分类文字；用键盘及读屏实际验证。
依据: mobile.png: icon-only header

2. 没有 Content-Security-Policy
先开 report-only CSP，再收成 default-src 'self' 和明确的 script-src。
依据: content-security-policy missing

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