Max Potential First Input Delay
130 ms
The maximum potential First Input Delay that your users could experience is the duration of the longest task. Learn more about the Maximum Potential First Input Delay metric.
页面构成与技术指标
正文
1465
操作候选
27
图片
174
HTML
3695 KB
文案
标题字数
20
摘要字数
34偏短
H1
1
H2
7
动作
主要入口
免费试用 Craft
表单
0
站内链接
89
站外链接
19
安全与页面元信息
HTTPS
有
HSTS
无
CSP
有
nosniff
有
viewport
有
图标
有
JSON-LD
有
统计
Plausible · PostHog
构成
Next.js / shadcn/ui / Tailwind
脚本
47 ext / 409 inline
Alt
7 missing
语言
zh-CN
第三方域
3
Lighthouse
移动端模拟 · 性能评分
56 / 100
2026-09-05 · 本次测试有警告，结果可能不完整。
查看详情
移动端模拟 · 实验室数据，非真实用户体验数据
2026-09-05T04:05:54.468Z · Lighthouse 13.4.1
本次测试有警告，结果可能不完整： The page may not be loading as expected because your test URL (https://craft.do/) was redirected to https://www.craft.do/zh-CN. Try testing the second URL directly.
性能56/ 100
可访问性85/ 100
最佳实践92/ 100
SEO100/ 100
LCP · 主要内容出现35,117 ms
CLS · 布局偏移0.000
TBT · 主线程阻塞101 ms
FCP · 首次内容绘制5,544 ms
SI · 视觉加载速度8,902 ms
分数会受服务器、网络和测试环境影响，独立于品味／转化评分。诊断保留 Lighthouse 原文。
Browser errors were logged to the console
Errors logged to the console indicate unresolved problems. They can come from network request failures and other browser concerns. Learn more about this errors in console diagnostic audit
对应元素与资源
{
"type": "table",
"items": [
{
"source": "exception",
"description": "Error: Minified React error #418; visit https://react.dev/errors/418?args[]=HTML&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.\n at rP (https://www.craft.do/_next/static/chunks/4bd1b696-56d68283fbd06ea3.js:1:34103)\n at oU (https://www.craft.do/_next/static/chunks/4bd1b696-56d68283fbd06ea3.js:1:83631)\n at ic (https://www.craft.do/_next/static/chunks/4bd1b696-56d68283fbd06ea3.js:1:112390)\n at https://www.craft.do/_next/static/chunks/4bd1b696-56d68283fbd06ea3.js:1:108438\n at u5 (https://www.craft.do/_next/static/chunks/4bd1b696-56d68283fbd06ea3.js:1:108539)\n at iH (https://www.craft.do/_next/static/chunks/4bd1b696-56d68283fbd06ea3.js:1:129983)\n at MessagePort.w (https://www.craft.do/_next/static/chunks/1684-51bc775c593e52fb.js:1:55003)",
"sourceLocation": {
"url": "https://www.craft.do/_next/static/chunks/1684-51bc775c593e52fb.js",
"line": 0,
"type": "source-location",
"column": 150209,
"urlProvider": "network"
}
}
],
"headings": [
{
"key": "sourceLocation",
"label": "Source",
"valueType": "source-location"
},
{
"key": "description",
"label": "Description",
"valueType": "code"
}
]
}Reduce initial server response time
Root document took 720 ms
Keep the server response time for the main document short because all other requests depend on it. Learn more about the Time to First Byte metric.
对应元素与资源
{
"type": "opportunity",
"items": [
{
"url": "https://www.craft.do/zh-CN",
"responseTime": 715
}
],
"headings": [
{
"key": "url",
"label": "URL",
"valueType": "url"
},
{
"key": "responseTime",
"label": "Time Spent",
"valueType": "timespanMs"
}
],
"overallSavingsMs": 615
}Time to Interactive
35.2 s
Time to Interactive is the amount of time it takes for the page to become fully interactive. Learn more about the Time to Interactive metric.
Avoid multiple page redirects
Est savings of 2,090 ms
Redirects introduce additional delays before the page can be loaded. Learn how to avoid page redirects.
对应元素与资源
{
"type": "opportunity",
"items": [
{
"url": "https://craft.do/",
"wastedMs": 1161.13
},
{
"url": "https://www.craft.do/",
"wastedMs": 929.0070000000001
},
{
"url": "https://www.craft.do/zh-CN",
"wastedMs": 0
}
],
"headings": [
{
"key": "url",
"label": "URL",
"valueType": "url"
},
{
"key": "wastedMs",
"label": "Time Spent",
"valueType": "timespanMs"
}
],
"overallSavingsMs": 2090.137
}Displays images with incorrect aspect ratio
Image display dimensions should match natural aspect ratio. Learn more about image aspect ratio.
对应元素与资源
{
"type": "table",
"items": [
{
"url": "https://www.craft.do/_next/static/media/paper-notebook.9ae2b49a.webp",
"node": {
"lhId": "1-171-IMG",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,1,DIV,0,SECTION,1,DIV,1,DIV,1,DIV,1,DIV,4,DIV,0,DIV,0,DIV,1,IMG",
"type": "node",
"snippet": "<img alt=\"\" draggable=\"false\" loading=\"lazy\" width=\"1552\" height=\"1200\" decoding=\"async\" data-nimg=\"1\" class=\"absolute inset-0 h-full w-full select-none\" style=\"color:transparent\" src=\"/_next/static/media/paper-notebook.9ae2b49a.webp\">",
"selector": "div.isolate > div.h-full > div.h-full > img.absolute",
"nodeLabel": "div.isolate > div.h-full > div.h-full > img.absolute",
"boundingRect": {
"top": 310,
"left": -35,
"right": 707,
"width": 742,
"bottom": 819,
"height": 508
}
},
"doRatiosMatch": false,
"actualAspectRatio": "1552 x 1200\n (1.29)",
"displayedAspectRatio": "700 x 438\n (1.60)"
},
{
"url": "https://www.craft.do/_image/width=384,quality=85,format=auto/_next/static/media/cloud.33739c9c.png",
"node": {
"lhId": "1-291-IMG",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,9,SECTION,0,DIV,0,IMG",
"type": "node",
"snippet": "<img alt=\"Cloud\" loading=\"lazy\" width=\"1500\" height=\"773\" decoding=\"async\" data-nimg=\"1\" class=\"absolute inset-0 transform-gpu select-none\" style=\"color:transparent\" sizes=\"(max-width: 768px) 50vw, 600px\" srcset=\"/_image/width=384,quality=85,format=auto/_next/static/media/cloud.33739c9c…\" src=\"https://www.craft.do/_image/width=384,quality=85,format=auto/_next/static/…\">",
"selector": "div.relative > section.mx-auto > div.aspect-7/4 > img.absolute",
"nodeLabel": "Cloud",
"boundingRect": {
"top": 0,
"left": 0,
"right": 0,
"width": 0,
"bottom": 0,
"height": 0
}
},
"doRatiosMatch": false,
"actualAspectRatio": "384 x 197\n (1.95)",
"displayedAspectRatio": "1500 x 773\n (1.94)"
},
{
"url": "https://www.craft.do/_image/width=750,quality=85,format=auto/_next/static/media/paper-texture.e3705234.png",
"node": {
"lhId": "1-242-IMG",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,3,DIV,0,DIV,1,IMG",
"type": "node",
"snippet": "<img alt=\"Paper texture\" draggable=\"false\" loading=\"lazy\" decoding=\"async\" data-nimg=\"fill\" class=\"absolute inset-0 -z-10 rounded-4xl opacity-50 mix-blend-overlay\" style=\"position: absolute; height: 100%; width: 100%; inset: 0px;\" sizes=\"(min-width: 1536px) 1240px, 100vw\" srcset=\"/_image/width=640,quality=85,format=auto/_next/static/media/paper-texture.…\" src=\"https://www.craft.do/_image/width=750,quality=85,format=auto/_next/static/…\">",
"selector": "div.relative > div.relative > div.shadow-block > img.absolute",
"nodeLabel": "Paper texture",
"boundingRect": {
"top": 2403,
"left": 16,
"right": 396,
"width": 380,
"bottom": 3781,
"height": 1378
}
},
"doRatiosMatch": false,
"actualAspectRatio": "750 x 530\n (1.42)",
"displayedAspectRatio": "380 x 1378\n (0.28)"
},
{
"url": "https://www.craft.do/_image/width=1920,quality=85,format=auto/_next/static/media/paper-texture.a0b2b1ca.webp",
"node": {
"lhId": "1-168-IMG",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,1,DIV,0,SECTION,1,DIV,1,DIV,1,DIV,1,DIV,1,DIV,0,DIV,0,DIV,1,IMG",
"type": "node",
"snippet": "<img alt=\"\" draggable=\"false\" loading=\"lazy\" width=\"1192\" height=\"843\" decoding=\"async\" data-nimg=\"1\" class=\"absolute inset-0 h-full w-full select-none mix-blend-overlay\" style=\"color:transparent\" sizes=\"737px\" srcset=\"/_image/width=16,quality=85,format=auto/_next/static/media/paper-texture.a…\" src=\"https://www.craft.do/_image/width=1920,quality=85,format=auto/_next/static…\">",
"selector": "div.isolate > div.h-full > div.h-full > img.absolute",
"nodeLabel": "div.isolate > div.h-full > div.h-full > img.absolute",
"boundingRect": {
"top": 219,
"left": -168,
"right": 797,
"width": 965,
"bottom": 1160,
"height": 941
}
},
"doRatiosMatch": false,
"actualAspectRatio": "1192 x 843\n (1.41)",
"displayedAspectRatio": "737 x 628\n (1.17)"
},
{
"url": "https://www.craft.do/_image/width=750,quality=85,format=auto/_next/static/media/paper-texture.e3705234.png",
"node": {
"lhId": "1-244-IMG",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,5,DIV,0,DIV,1,IMG",
"type": "node",
"snippet": "<img alt=\"Paper texture\" draggable=\"false\" loading=\"lazy\" decoding=\"async\" data-nimg=\"fill\" class=\"absolute inset-0 -z-10 rounded-4xl opacity-50 mix-blend-overlay\" style=\"position: absolute; height: 100%; width: 100%; inset: 0px;\" sizes=\"(min-width: 1536px) 1240px, 100vw\" srcset=\"/_image/width=640,quality=85,format=auto/_next/static/media/paper-texture.…\" src=\"https://www.craft.do/_image/width=750,quality=85,format=auto/_next/static/…\">",
"selector": "div.relative > div.my-12 > div.shadow-block > img.absolute",
"nodeLabel": "Paper texture",
"boundingRect": {
"top": 4241,
"left": 16,
"right": 396,
"width": 380,
"bottom": 4946,
"height": 706
}
},
"doRatiosMatch": false,
"actualAspectRatio": "750 x 530\n (1.42)",
"displayedAspectRatio": "380 x 706\n (0.54)"
},
{
"url": "https://www.craft.do/_image/width=1080,quality=85,format=auto/_next/static/media/paper-texture.a0b2b1ca.webp",
"node": {
"lhId": "1-170-IMG",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,1,DIV,0,SECTION,1,DIV,1,DIV,1,DIV,1,DIV,3,DIV,0,DIV,1,DIV,1,IMG",
"type": "node",
"snippet": "<img alt=\"\" draggable=\"false\" loading=\"lazy\" width=\"1192\" height=\"843\" decoding=\"async\" data-nimg=\"1\" class=\"absolute inset-0 h-full w-full select-none mix-blend-overlay\" style=\"color:transparent\" sizes=\"(min-width: 768px) 815px, 600px\" srcset=\"/_image/width=16,quality=85,format=auto/_next/static/media/paper-texture.a…\" src=\"https://www.craft.do/_image/width=1080,quality=85,format=auto/_next/static…\">",
"selector": "div.isolate > div.h-full > div.h-full > img.absolute",
"nodeLabel": "div.isolate > div.h-full > div.h-full > img.absolute",
"boundingRect": {
"top": 464,
"left": -217,
"right": 359,
"width": 576,
"bottom": 1044,
"height": 580
}
},
"doRatiosMatch": false,
"actualAspectRatio": "1080 x 763\n (1.42)",
"displayedAspectRatio": "600 x 400\n (1.50)"
},
{
"url": "https://www.craft.do/_image/width=750,quality=85,format=auto/_next/static/media/paper-texture.e3705234.png",
"node": {
"lhId": "1-290-IMG",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,8,DIV,0,DIV,1,IMG",
"type": "node",
"snippet": "<img alt=\"Paper texture\" draggable=\"false\" loading=\"lazy\" decoding=\"async\" data-nimg=\"fill\" class=\"absolute inset-0 -z-10 rounded-4xl opacity-50 mix-blend-overlay\" style=\"position: absolute; height: 100%; width: 100%; inset: 0px;\" sizes=\"(min-width: 1536px) 1240px, 100vw\" srcset=\"/_image/width=640,quality=85,format=auto/_next/static/media/paper-texture.…\" src=\"https://www.craft.do/_image/width=750,quality=85,format=auto/_next/static/…\">",
"selector": "div.relative > div.my-12 > div.shadow-block > img.absolute",
"nodeLabel": "Paper texture",
"boundingRect": {
"top": 6430,
"left": 16,
"right": 396,
"width": 380,
"bottom": 7060,
"height": 629
}
},
"doRatiosMatch": false,
"actualAspectRatio": "750 x 530\n (1.42)",
"displayedAspectRatio": "380 x 629\n (0.60)"
}
],
"headings": [
{
"key": "node",
"label": "",
"valueType": "node"
},
{
"key": "url",
"label": "URL",
"valueType": "url"
},
{
"key": "displayedAspectRatio",
"label": "Aspect Ratio (Displayed)",
"valueType": "text"
},
{
"key": "actualAspectRatio",
"label": "Aspect Ratio (Actual)",
"valueType": "text"
}
]
}Minimize main-thread work
3.6 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": 1650.1920000000216,
"groupLabel": "Script Evaluation"
},
{
"group": "other",
"duration": 970.564000000014,
"groupLabel": "Other"
},
{
"group": "styleLayout",
"duration": 383.1519999999998,
"groupLabel": "Style & Layout"
},
{
"group": "scriptParseCompile",
"duration": 246.4160000000006,
"groupLabel": "Script Parsing & Compilation"
},
{
"group": "paintCompositeRender",
"duration": 163.52000000000018,
"groupLabel": "Rendering"
},
{
"group": "parseHTML",
"duration": 75.332,
"groupLabel": "Parse HTML & CSS"
},
{
"group": "garbageCollection",
"duration": 73.45599999999996,
"groupLabel": "Garbage Collection"
}
],
"headings": [
{
"key": "groupLabel",
"label": "Category",
"valueType": "text"
},
{
"key": "duration",
"label": "Time Spent",
"valueType": "ms",
"granularity": 1
}
],
"sortedBy": [
"duration"
]
}Reduce JavaScript execution time
1.7 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.craft.do/_next/static/chunks/dc07ed8c-512072593d544644.js",
"total": 1294.1000000000047,
"scripting": 480.64000000000226,
"scriptParseCompile": 9.808
},
{
"url": "https://www.craft.do/_next/static/chunks/1684-51bc775c593e52fb.js",
"total": 1027.0120000000575,
"scripting": 865.7440000000561,
"scriptParseCompile": 10.979999999999999
},
{
"url": "https://www.craft.do/zh-CN",
"total": 543.5519999999999,
"scripting": 24.34399999999945,
"scriptParseCompile": 122.58000000000062
},
{
"url": "Unattributable",
"total": 285.23199999999844,
"scripting": 6.54,
"scriptParseCompile": 0
},
{
"url": "https://www.craft.do/_next/static/chunks/9da6db1e-6aa507474b3cc205.js",
"total": 129.87600000000043,
"scripting": 120.00400000000042,
"scriptParseCompile": 9.616
},
{
"url": "https://www.craft.do/_next/static/chunks/4bd1b696-56d68283fbd06ea3.js",
"total": 61.9759999999996,
"scripting": 42.30399999999961,
"scriptParseCompile": 10.148
}
],
"summary": {
"wastedMs": 1702.7080000000583
},
"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"
]
}Buttons do not have an accessible name
When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers. Learn how to make buttons more accessible.
对应元素与资源
{
"type": "table",
"items": [
{
"node": {
"lhId": "1-2-BUTTON",
"path": "1,HTML,1,BODY,1,DIV,2,HEADER,0,DIV,0,DIV,3,DIV,1,BUTTON",
"type": "node",
"snippet": "<button class=\"small text-black-900 hover:text-black-900 transition-colors duration-200\">",
"selector": "div.flex > div.flex > div.flex > button.small",
"nodeLabel": "div.flex > div.flex > div.flex > button.small",
"explanation": "Fix any of the following:\n Element does not have inner 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\n Element does not have an implicit (wrapped) <label>\n Element does not have an explicit <label>\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\"",
"boundingRect": {
"top": 38,
"left": 344,
"right": 368,
"width": 24,
"bottom": 62,
"height": 24
}
}
}
],
"headings": [
{
"key": "node",
"label": "Failing Elements",
"valueType": "node",
"subItemsHeading": {
"key": "relatedNode",
"valueType": "node"
}
}
],
"debugData": {
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"section508",
"section508.22.a",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"ACT",
"RGAAv4",
"RGAA-11.9.1"
],
"type": "debugdata",
"impact": "critical"
}
}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-3-P",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,3,DIV,0,DIV,5,DIV,0,DIV,2,DIV,0,DIV,1,DIV,0,DIV,1,DIV,1,DIV,0,P",
"type": "node",
"snippet": "<p class=\"rounded-[4px] px-[5px] py-[2px] text-[12px] text-[#1F222599] bg-[#0000000A]\">",
"selector": "div.font-ui > div.flex > div.flex > p.rounded-[4px]",
"nodeLabel": "烹饪",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 4.17 (foreground color: #757678, background color: #f5f5f5, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 3057,
"left": 201,
"right": 231,
"width": 30,
"bottom": 3076,
"height": 19
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-4-DIV",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,3,DIV,0,DIV,5,DIV,0,DIV,2,DIV,0,DIV,1,DIV",
"type": "node",
"snippet": "<div class=\"relative h-full rounded-t-[12px] 'h-[268px] overflow-hidden p-6 md:p-8 bor…\">",
"selector": "div.sticky > div.relative > div.shadow-block > div.relative",
"nodeLabel": "完美面包食谱\n\n烹饪\n\n喂养发酵种\n\n收件箱\n\n预订巴塞罗那机票\n\n旅行\n\n找要去尝试的餐厅\n\n旅行\n\n波登又浮现在我脑海。不只是食物、刀具、厨房后场的粗粝，…",
"boundingRect": {
"top": 3031,
"left": 67,
"right": 345,
"width": 278,
"bottom": 3274,
"height": 243
}
}
}
]
}
},
{
"node": {
"lhId": "1-5-P",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,3,DIV,0,DIV,5,DIV,0,DIV,2,DIV,0,DIV,1,DIV,1,DIV,1,DIV,1,DIV,0,P",
"type": "node",
"snippet": "<p class=\"rounded-[4px] px-[5px] py-[2px] text-[12px] text-[#1F222599] bg-[#0000000A]\">",
"selector": "div.font-ui > div.flex > div.flex > p.rounded-[4px]",
"nodeLabel": "收件箱",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 4.17 (foreground color: #757678, background color: #f5f5f5, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 3081,
"left": 188,
"right": 229,
"width": 41,
"bottom": 3100,
"height": 19
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-4-DIV",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,3,DIV,0,DIV,5,DIV,0,DIV,2,DIV,0,DIV,1,DIV",
"type": "node",
"snippet": "<div class=\"relative h-full rounded-t-[12px] 'h-[268px] overflow-hidden p-6 md:p-8 bor…\">",
"selector": "div.sticky > div.relative > div.shadow-block > div.relative",
"nodeLabel": "完美面包食谱\n\n烹饪\n\n喂养发酵种\n\n收件箱\n\n预订巴塞罗那机票\n\n旅行\n\n找要去尝试的餐厅\n\n旅行\n\n波登又浮现在我脑海。不只是食物、刀具、厨房后场的粗粝，…",
"boundingRect": {
"top": 3031,
"left": 67,
"right": 345,
"width": 278,
"bottom": 3274,
"height": 243
}
}
}
]
}
},
{
"node": {
"lhId": "1-6-P",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,3,DIV,0,DIV,5,DIV,0,DIV,2,DIV,0,DIV,1,DIV,2,DIV,1,DIV,1,DIV,0,P",
"type": "node",
"snippet": "<p class=\"rounded-[4px] px-[5px] py-[2px] text-[12px] text-[#1F222599] bg-[#0000000A]\">",
"selector": "div.font-ui > div.flex > div.flex > p.rounded-[4px]",
"nodeLabel": "旅行",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 4.17 (foreground color: #757678, background color: #f5f5f5, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 3106,
"left": 228,
"right": 258,
"width": 30,
"bottom": 3125,
"height": 19
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-4-DIV",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,3,DIV,0,DIV,5,DIV,0,DIV,2,DIV,0,DIV,1,DIV",
"type": "node",
"snippet": "<div class=\"relative h-full rounded-t-[12px] 'h-[268px] overflow-hidden p-6 md:p-8 bor…\">",
"selector": "div.sticky > div.relative > div.shadow-block > div.relative",
"nodeLabel": "完美面包食谱\n\n烹饪\n\n喂养发酵种\n\n收件箱\n\n预订巴塞罗那机票\n\n旅行\n\n找要去尝试的餐厅\n\n旅行\n\n波登又浮现在我脑海。不只是食物、刀具、厨房后场的粗粝，…",
"boundingRect": {
"top": 3031,
"left": 67,
"right": 345,
"width": 278,
"bottom": 3274,
"height": 243
}
}
}
]
}
},
{
"node": {
"lhId": "1-7-P",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,3,DIV,0,DIV,5,DIV,0,DIV,2,DIV,0,DIV,1,DIV,3,DIV,1,DIV,1,DIV,0,P",
"type": "node",
"snippet": "<p class=\"rounded-[4px] px-[5px] py-[2px] text-[12px] text-[#1F222599] bg-[#0000000A]\">",
"selector": "div.font-ui > div.flex > div.flex > p.rounded-[4px]",
"nodeLabel": "旅行",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 4.17 (foreground color: #757678, background color: #f5f5f5, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 3130,
"left": 228,
"right": 258,
"width": 30,
"bottom": 3149,
"height": 19
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-4-DIV",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,3,DIV,0,DIV,5,DIV,0,DIV,2,DIV,0,DIV,1,DIV",
"type": "node",
"snippet": "<div class=\"relative h-full rounded-t-[12px] 'h-[268px] overflow-hidden p-6 md:p-8 bor…\">",
"selector": "div.sticky > div.relative > div.shadow-block > div.relative",
"nodeLabel": "完美面包食谱\n\n烹饪\n\n喂养发酵种\n\n收件箱\n\n预订巴塞罗那机票\n\n旅行\n\n找要去尝试的餐厅\n\n旅行\n\n波登又浮现在我脑海。不只是食物、刀具、厨房后场的粗粝，…",
"boundingRect": {
"top": 3031,
"left": 67,
"right": 345,
"width": 278,
"bottom": 3274,
"height": 243
}
}
}
]
}
},
{
"node": {
"lhId": "1-8-DIV",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,9,SECTION,2,DIV,2,DIV,2,DIV,0,DIV,0,DIV,0,DIV,1,DIV",
"type": "node",
"snippet": "<div class=\"flex-1\">",
"selector": "div.flex > div.w-full > div.font-ui > div.flex-1",
"nodeLabel": "Aa 标题",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 4.14 (foreground color: #747678, background color: #f4f4f5, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 8298,
"left": 95,
"right": 234,
"width": 139,
"bottom": 8316,
"height": 18
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-9-DIV",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,9,SECTION,2,DIV,2,DIV,2,DIV,0,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"w-full space-y-2 rounded-[4px] bg-[#F4F4F5] p-3\">",
"selector": "div.shadow-block > div.relative > div.flex > div.w-full",
"nodeLabel": "#\nAa 标题\n作者\n类型\nEssentials\n1\nAda’s Algorithm\nJames Essinger\nEssentials\n2\nDream Ma…",
"boundingRect": {
"top": 8286,
"left": 41,
"right": 539,
"width": 498,
"bottom": 8562,
"height": 276
}
}
}
]
}
},
{
"node": {
"lhId": "1-10-DIV",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,9,SECTION,2,DIV,2,DIV,2,DIV,0,DIV,0,DIV,0,DIV,2,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"flex items-center gap-[10px]\">",
"selector": "div.w-full > div.font-ui > div.flex-1 > div.flex",
"nodeLabel": "作者",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 4.14 (foreground color: #747678, background color: #f4f4f5, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 8298,
"left": 242,
"right": 380,
"width": 139,
"bottom": 8316,
"height": 18
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-9-DIV",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,9,SECTION,2,DIV,2,DIV,2,DIV,0,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"w-full space-y-2 rounded-[4px] bg-[#F4F4F5] p-3\">",
"selector": "div.shadow-block > div.relative > div.flex > div.w-full",
"nodeLabel": "#\nAa 标题\n作者\n类型\nEssentials\n1\nAda’s Algorithm\nJames Essinger\nEssentials\n2\nDream Ma…",
"boundingRect": {
"top": 8286,
"left": 41,
"right": 539,
"width": 498,
"bottom": 8562,
"height": 276
}
}
}
]
}
},
{
"node": {
"lhId": "1-11-DIV",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,9,SECTION,2,DIV,2,DIV,2,DIV,0,DIV,0,DIV,0,DIV,3,DIV",
"type": "node",
"snippet": "<div class=\"flex-1\">",
"selector": "div.flex > div.w-full > div.font-ui > div.flex-1",
"nodeLabel": "类型",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 4.14 (foreground color: #747678, background color: #f4f4f5, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 8298,
"left": 388,
"right": 527,
"width": 139,
"bottom": 8316,
"height": 18
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-9-DIV",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,9,SECTION,2,DIV,2,DIV,2,DIV,0,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"w-full space-y-2 rounded-[4px] bg-[#F4F4F5] p-3\">",
"selector": "div.shadow-block > div.relative > div.flex > div.w-full",
"nodeLabel": "#\nAa 标题\n作者\n类型\nEssentials\n1\nAda’s Algorithm\nJames Essinger\nEssentials\n2\nDream Ma…",
"boundingRect": {
"top": 8286,
"left": 41,
"right": 539,
"width": 498,
"bottom": 8562,
"height": 276
}
}
}
]
}
},
{
"node": {
"lhId": "1-12-DIV",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,9,SECTION,2,DIV,2,DIV,2,DIV,0,DIV,0,DIV,1,DIV,0,DIV,1,DIV,0,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"rounded-[4px] border-[1px] px-[5px] text-[12px] font-semibold bg-orange-10…\">",
"selector": "div.flex > div.mx-2 > div.flex > div.rounded-[4px]",
"nodeLabel": "Essentials",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.07 (foreground color: #ff8904, background color: #ffedd4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 8331,
"left": 96,
"right": 164,
"width": 68,
"bottom": 8349,
"height": 18
}
}
},
{
"node": {
"lhId": "1-13-DIV",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,9,SECTION,2,DIV,2,DIV,2,DIV,0,DIV,0,DIV,1,DIV,1,DIV,3,DIV,0,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"rounded-[4px] border-[1px] px-[5px] text-[12px] font-semibold bg-orange-10…\">",
"selector": "div.flex > div.relative > div.whitespace-nowrap > div.rounded-[4px]",
"nodeLabel": "Essentials",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.07 (foreground color: #ff8904, background color: #ffedd4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 8363,
"left": 389,
"right": 457,
"width": 68,
"bottom": 8381,
"height": 18
}
}
},
{
"node": {
"lhId": "1-14-DIV",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,9,SECTION,2,DIV,2,DIV,2,DIV,0,DIV,0,DIV,1,DIV,2,DIV,3,DIV,0,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"rounded-[4px] border-[1px] px-[5px] text-[12px] font-semibold bg-orange-10…\">",
"selector": "div.flex > div.relative > div.whitespace-nowrap > div.rounded-[4px]",
"nodeLabel": "Essentials",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.07 (foreground color: #ff8904, background color: #ffedd4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 8395,
"left": 389,
"right": 457,
"width": 68,
"bottom": 8413,
"height": 18
}
}
},
{
"node": {
"lhId": "1-15-DIV",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,9,SECTION,2,DIV,2,DIV,2,DIV,0,DIV,0,DIV,1,DIV,3,DIV,3,DIV,0,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"rounded-[4px] border-[1px] px-[5px] text-[12px] font-semibold bg-orange-10…\">",
"selector": "div.flex > div.relative > div.whitespace-nowrap > div.rounded-[4px]",
"nodeLabel": "Essentials",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.07 (foreground color: #ff8904, background color: #ffedd4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 8427,
"left": 389,
"right": 457,
"width": 68,
"bottom": 8445,
"height": 18
}
}
},
{
"node": {
"lhId": "1-16-DIV",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,9,SECTION,2,DIV,2,DIV,2,DIV,0,DIV,0,DIV,1,DIV,4,DIV,3,DIV,0,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"rounded-[4px] border-[1px] px-[5px] text-[12px] font-semibold bg-orange-10…\">",
"selector": "div.flex > div.relative > div.whitespace-nowrap > div.rounded-[4px]",
"nodeLabel": "Essentials",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.07 (foreground color: #ff8904, background color: #ffedd4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 8459,
"left": 389,
"right": 457,
"width": 68,
"bottom": 8477,
"height": 18
}
}
}
],
"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"
}
}Heading elements are not in a sequentially-descending order
Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies. Learn more about heading order.
对应元素与资源
{
"type": "table",
"items": [
{
"node": {
"lhId": "1-17-H3",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,0,SECTION,0,DIV,0,H3",
"type": "node",
"snippet": "<h3 class=\"h3 text-center md:w-auto\">",
"selector": "div.relative > section.mx-auto > div.mx-auto > h3.h3",
"nodeLabel": "Craft 不只是为一件事，\n它是为你的事而生。",
"explanation": "Fix any of the following:\n Heading order invalid",
"boundingRect": {
"top": 901,
"left": 40,
"right": 372,
"width": 332,
"bottom": 1033,
"height": 132
}
}
},
{
"node": {
"lhId": "1-18-H4",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,3,DIV,0,DIV,3,DIV,0,DIV,0,H4",
"type": "node",
"snippet": "<h4 class=\"text-black-700 text-sm md:text-base\">",
"selector": "div.shadow-block > div.relative > div.flex > h4.text-black-700",
"nodeLabel": "写作",
"explanation": "Fix any of the following:\n Heading order invalid",
"boundingRect": {
"top": 2427,
"left": 36,
"right": 376,
"width": 340,
"bottom": 2447,
"height": 20
}
}
},
{
"node": {
"lhId": "1-19-H5",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,9,SECTION,2,DIV,0,DIV,1,DIV,0,H5",
"type": "node",
"snippet": "<h5>",
"selector": "div.flex > div.shadow-block > div.flex > h5",
"nodeLabel": "空间",
"explanation": "Fix any of the following:\n Heading order invalid",
"boundingRect": {
"top": 7483,
"left": 147,
"right": 265,
"width": 118,
"bottom": 7515,
"height": 31
}
}
},
{
"node": {
"lhId": "1-20-H4",
"path": "1,HTML,1,BODY,1,DIV,3,MAIN,0,DIV,2,DIV,13,SECTION,1,DIV,1,DIV,0,BUTTON,0,DIV,2,DIV,0,H4",
"type": "node",
"snippet": "<h4 class=\"text-[16px] font-medium uppercase text-white\">",
"selector": "button.text-left > div.text-card-foreground > div.z-10 > h4.text-[16px]",
"nodeLabel": "微信",
"explanation": "Fix any of the following:\n Heading order invalid",
"boundingRect": {
"top": 10295,
"left": 190,
"right": 222,
"width": 32,
"bottom": 10319,
"height": 24
}
}
},
{
"node": {
"lhId": "1-21-H4",
"path": "1,HTML,1,BODY,1,DIV,5,FOOTER,2,DIV,0,DIV,0,DIV,0,H4",
"type": "node",
"snippet": "<h4 class=\"text-white text-[14px]\">",
"selector": "div.max-w-feature-block > div.grid > div.flex > h4.text-white",
"nodeLabel": "产品",
"explanation": "Fix any of the following:\n Heading order invalid",
"boundingRect": {
"top": 13155,
"left": 36,
"right": 194,
"width": 158,
"bottom": 13176,
"height": 21
}
}
}
],
"headings": [
{
"key": "node",
"label": "Failing Elements",
"valueType": "node",
"subItemsHeading": {
"key": "relatedNode",
"valueType": "node"
}
}
],
"debugData": {
"tags": [
"cat.semantics",
"best-practice"
],
"type": "debugdata",
"impact": "moderate"
}
}Lists do not contain only `<li>` elements and script supporting elements (`<script>` and `<template>`).
Screen readers have a specific way of announcing lists. Ensuring proper list structure aids screen reader output. Learn more about proper list structure.
对应元素与资源
{
"type": "table",
"items": [
{
"node": {
"lhId": "1-22-UL",
"path": "1,HTML,1,BODY,1,DIV,5,FOOTER,2,DIV,0,DIV,0,DIV,3,UL",
"type": "node",
"snippet": "<ul class=\"flex flex-col gap-1\">",
"selector": "div.max-w-feature-block > div.grid > div.flex > ul.flex",
"nodeLabel": "产品发布\n功能\n写作\n套餐\n整理\n自定义\n用 Craft 畅想\n价格\n教育套餐",
"explanation": "Fix all of the following:\n List element has direct children that are not allowed: ul, div",
"boundingRect": {
"top": 13205,
"left": 36,
"right": 194,
"width": 158,
"bottom": 13474,
"height": 269
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-23-UL",
"path": "1,HTML,1,BODY,1,DIV,5,FOOTER,2,DIV,0,DIV,0,DIV,3,UL,2,UL",
"type": "node",
"snippet": "<ul class=\"flex flex-col gap-1 px-4\">",
"selector": "div.grid > div.flex > ul.flex > ul.flex",
"nodeLabel": "写作\n套餐\n整理\n自定义",
"boundingRect": {
"top": 13261,
"left": 36,
"right": 194,
"width": 158,
"bottom": 13369,
"height": 108
}
}
},
{
"relatedNode": {
"lhId": "1-24-DIV",
"path": "1,HTML,1,BODY,1,DIV,5,FOOTER,2,DIV,0,DIV,0,DIV,3,UL,4,DIV",
"type": "node",
"snippet": "<div class=\"my-2 h-[0.5px] w-full bg-white opacity-20\">",
"selector": "div.grid > div.flex > ul.flex > div.my-2",
"nodeLabel": "div.grid > div.flex > ul.flex > div.my-2",
"boundingRect": {
"top": 13409,
"left": 36,
"right": 194,
"width": 158,
"bottom": 13410,
"height": 1
}
}
},
{
"relatedNode": {
"lhId": "1-25-UL",
"path": "1,HTML,1,BODY,1,DIV,5,FOOTER,2,DIV,0,DIV,0,DIV,3,UL,6,UL",
"type": "node",
"snippet": "<ul class=\"flex flex-col gap-1 px-4\">",
"selector": "div.grid > div.flex > ul.flex > ul.flex",
"nodeLabel": "教育套餐",
"boundingRect": {
"top": 13450,
"left": 36,
"right": 194,
"width": 158,
"bottom": 13474,
"height": 24
}
}
}
]
}
},
{
"node": {
"lhId": "1-26-UL",
"path": "1,HTML,1,BODY,1,DIV,5,FOOTER,2,DIV,0,DIV,1,DIV,3,UL",
"type": "node",
"snippet": "<ul class=\"flex flex-col gap-1\">",
"selector": "div.max-w-feature-block > div.grid > div.flex > ul.flex",
"nodeLabel": "微信\nYouTube\nSlack\n学习\n比较 Craft\n入门指南\n模板库",
"explanation": "Fix all of the following:\n List element has direct children that are not allowed: div",
"boundingRect": {
"top": 13205,
"left": 218,
"right": 376,
"width": 158,
"bottom": 13418,
"height": 213
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-27-DIV",
"path": "1,HTML,1,BODY,1,DIV,5,FOOTER,2,DIV,0,DIV,1,DIV,3,UL,3,DIV",
"type": "node",
"snippet": "<div class=\"my-2 h-[0.5px] w-full bg-white opacity-20\">",
"selector": "div.grid > div.flex > ul.flex > div.my-2",
"nodeLabel": "div.grid > div.flex > ul.flex > div.my-2",
"boundingRect": {
"top": 13297,
"left": 218,
"right": 376,
"width": 158,
"bottom": 13298,
"height": 1
}
}
}
]
}
},
{
"node": {
"lhId": "1-28-UL",
"path": "1,HTML,1,BODY,1,DIV,5,FOOTER,2,DIV,0,DIV,3,DIV,3,UL",
"type": "node",
"snippet": "<ul class=\"flex flex-col gap-1\">",
"selector": "div.max-w-feature-block > div.grid > div.flex > ul.flex",
"nodeLabel": "关于我们\n博客\n招聘\n联盟计划\n媒体\n法律\n条款\n隐私政策\n安全\nESG\n责任披露",
"explanation": "Fix all of the following:\n List element has direct children that are not allowed: div, ul",
"boundingRect": {
"top": 13635,
"left": 36,
"right": 194,
"width": 158,
"bottom": 13959,
"height": 325
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-29-DIV",
"path": "1,HTML,1,BODY,1,DIV,5,FOOTER,2,DIV,0,DIV,3,DIV,3,UL,5,DIV",
"type": "node",
"snippet": "<div class=\"my-2 h-[0.5px] w-full bg-white opacity-20\">",
"selector": "div.grid > div.flex > ul.flex > div.my-2",
"nodeLabel": "div.grid > div.flex > ul.flex > div.my-2",
"boundingRect": {
"top": 13783,
"left": 36,
"right": 194,
"width": 158,
"bottom": 13783,
"height": 1
}
}
},
{
"relatedNode": {
"lhId": "1-30-UL",
"path": "1,HTML,1,BODY,1,DIV,5,FOOTER,2,DIV,0,DIV,3,DIV,3,UL,7,UL",
"type": "node",
"snippet": "<ul class=\"flex flex-col gap-1 px-4\">",
"selector": "div.grid > div.flex > ul.flex > ul.flex",
"nodeLabel": "条款\n隐私政策\n安全\nESG\n责任披露",
"boundingRect": {
"top": 13823,
"left": 36,
"right": 194,
"width": 158,
"bottom": 13959,
"height": 136
}
}
}
]
}
},
{
"node": {
"lhId": "1-31-UL",
"path": "1,HTML,1,BODY,1,DIV,5,FOOTER,2,DIV,0,DIV,5,DIV,3,UL",
"type": "node",
"snippet": "<ul class=\"flex flex-col gap-1\">",
"selector": "div.max-w-feature-block > div.grid > div.flex > ul.flex",
"nodeLabel": "Craft iPhone 版\nCraft iPad 版\nCraft Mac 版\nCraft Windows 版\nWindows x64\nWindows ARM…",
"explanation": "Fix all of the following:\n List element has direct children that are not allowed: ul",
"boundingRect": {
"top": 13635,
"left": 218,
"right": 376,
"width": 158,
"bottom": 13859,
"height": 224
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-32-UL",
"path": "1,HTML,1,BODY,1,DIV,5,FOOTER,2,DIV,0,DIV,5,DIV,3,UL,4,UL",
"type": "node",
"snippet": "<ul class=\"flex flex-col gap-2 px-4\">",
"selector": "div.grid > div.flex > ul.flex > ul.flex",
"nodeLabel": "Windows x64\nWindows ARM64",
"boundingRect": {
"top": 13747,
"left": 218,
"right": 376,
"width": 158,
"bottom": 13803,
"height": 56
}
}
}
]
}
}
],
"headings": [
{
"key": "node",
"label": "Failing Elements",
"valueType": "node",
"subItemsHeading": {
"key": "relatedNode",
"valueType": "node"
}
}
],
"debugData": {
"tags": [
"cat.structure",
"wcag2a",
"wcag131",
"EN-301-549",
"EN-9.1.3.1",
"RGAAv4",
"RGAA-9.3.1"
],
"type": "debugdata",
"impact": "serious"
}
}测试环境与原始指标
{
"finalUrl": "https://www.craft.do/zh-CN",
"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": 35116.74499999998
},
{
"id": "cumulative-layout-shift",
"unit": "unitless",
"value": 0
},
{
"id": "total-blocking-time",
"unit": "millisecond",
"value": 101
},
{
"id": "first-contentful-paint",
"unit": "millisecond",
"value": 5544.3
},
{
"id": "speed-index",
"unit": "millisecond",
"value": 8902.312803189048
}
]
}01 / 值得借鉴
好设计，具体好在哪
材质对应真实使用场景
撕纸、横线便签和文档卡与笔记、任务、灵感主题一致，装饰有语义。
手机使用独立产品取景
手机首屏展示竖向应用界面，而不是把整个桌面窗口简单缩小。
02 / 下一步
值得继续打磨的地方
- 01
优化中文标题断行
窄屏中“笔记”被拆到相邻两行，削弱短语的阅读连续性。
按“笔记”“任务”“灵感空间”等语义短语组织可响应断行，在320至430px核对；不要用固定宽度造成横向溢出。
03 / 设计语言
把气质拆成可复用的参数
色彩
背景
#fcf9f7文字
#030302强调
#030302字体与尺度
- 标题字体
- UntitledSerifFont
- 正文字体
- UntitledSansFont
- 标题 / 正文
- 66px / 16px
间距与形状
- 区块间距
- 0px
- 组件内距
- —
- 卡片圆角
- —
- 按钮圆角
- 3.35544e+07px
参数来自页面元素采样，空值表示未取得；不将单个元素的参数当作全站规范。
04 / 检查依据
观察与实测依据
数据来自同次页面采集；字体、圆角和间距为具体元素采样，不代表全站唯一设计规范。空值为未取得。HTML 为源码体积，不是压缩传输量；脚本数为 DOM 标签数，不是请求数。
品味1 项观察
优化中文标题断行
窄屏中“笔记”被拆到相邻两行，削弱短语的阅读连续性。
按“笔记”“任务”“灵感空间”等语义短语组织可响应断行，在320至430px核对；不要用固定宽度造成横向溢出。
mobile.png: Chinese headline breaks inside 笔记
上线1 项观察
没有 HSTS 响应头
中优先级没有 Strict-Transport-Security，第一次访问仍可能被降到 http。浏览器不会钉死 HTTPS。
在边缘设置 Strict-Transport-Security: max-age=31536000; includeSubDomains。
strict-transport-security missing
链接分享预览
Craft——笔记、任务与文档的效率应用
一款免费的笔记与效率应用，在你所有设备上陪伴左右。更有高级功能可选。
05 / 开始动手
把下一步，交给你的 AI
优化指令用于调整这个页面；设计指令用于借鉴它的视觉语言。「做同款」会附带截图与实施步骤。复制后粘贴到你的代码助手中。
查看完整指令
请基于 https://craft.do 的 2026-09-05T03:25:03.525Z 页面快照优化当前项目。先确认当前实现与快照差异，不要把已变化的内容重新改回旧版。
设计基线
漂浮胶囊导航位于蓝色主视觉内，标题与试用动作在中间，下方纸张、便签和真实应用界面层叠；之后通过用户用途、写作、连接和计划场景解释功能。手机把桌面应用替换成手机构图，保留纸张材质。参考重点是实物材质与软件界面的连接，而非凭空添加用户故事。
{
"colors": [
{
"role": "bg",
"hex": "#fcf9f7"
},
{
"role": "ink",
"hex": "#030302"
},
{
"role": "accent",
"hex": "#030302"
}
],
"fonts": {
"body": "UntitledSansFont",
"display": "UntitledSerifFont",
"stack": [
"UntitledSansFont",
"UntitledSerifFont"
]
},
"radius": {
"button": "3.35544e+07px",
"card": "",
"field": ""
},
"space": {
"section": "0px",
"card": ""
},
"type": {
"h1": "66px",
"body": "16px",
"weight": "400",
"lineHeight": "24px",
"letterSpacing": "-1.98px"
}
}
数据来自同次页面采集；字体、圆角和间距为具体元素采样，不代表全站唯一设计规范。空值为未取得。HTML 为源码体积，不是压缩传输量；脚本数为 DOM 标签数，不是请求数。
执行事项
1. 优化中文标题断行
按“笔记”“任务”“灵感空间”等语义短语组织可响应断行，在320至430px核对；不要用固定宽度造成横向溢出。
依据: mobile.png: Chinese headline breaks inside 笔记
2. 没有 HSTS 响应头
在边缘设置 Strict-Transport-Security: max-age=31536000; includeSubDomains。
依据: strict-transport-security missing
验收
- 在 1440×900 和 390×844 分别核对文字、布局和主要操作“免费试用 Craft”。
- 保留已有品牌、登录和业务链路，不从静态截图推断交互故障。
- 只修复有证据的项；涉及安全响应头时先用报告模式验证现有资源及认证兼容性。
- 对比修改前后的截图，并执行相关功能测试。不要声称未经测试的功能已通过。