Max Potential First Input Delay
220 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.
页面构成与技术指标
正文
74
操作候选
2
图片
9
HTML
39 KB
文案
标题字数
13
摘要字数
99
H1
3
H2
0
动作
主要入口
Featured projects
表单
0
站内链接
27
站外链接
11
安全与页面元信息
HTTPS
有
HSTS
有
CSP
有
nosniff
无
viewport
有
图标
有
JSON-LD
无
统计
GA4
构成
Webflow
脚本
9 ext / 10 inline
Alt
9 missing
第三方域
4
Lighthouse
移动端模拟 · 性能评分
74 / 100
2026-09-05 · 本次测试有警告，结果可能不完整。
查看详情
移动端模拟 · 实验室数据，非真实用户体验数据
2026-09-05T04:04:50.077Z · Lighthouse 13.4.1
本次测试有警告，结果可能不完整： The page may not be loading as expected because your test URL (https://ordinaryfolk.co/) was redirected to https://www.ordinaryfolk.co/. Try testing the second URL directly.
性能74/ 100
可访问性80/ 100
最佳实践96/ 100
SEO100/ 100
LCP · 主要内容出现3,297 ms
CLS · 布局偏移0.151
TBT · 主线程阻塞156 ms
FCP · 首次内容绘制3,297 ms
SI · 视觉加载速度5,836 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": "TypeError: Cannot read properties of null (reading 'addEventListener')\n at HTMLDocument.<anonymous> (https://www.ordinaryfolk.co/:507:8)",
"sourceLocation": {
"url": "https://www.ordinaryfolk.co/",
"line": 506,
"type": "source-location",
"column": 7,
"urlProvider": "network"
}
}
],
"headings": [
{
"key": "sourceLocation",
"label": "Source",
"valueType": "source-location"
},
{
"key": "description",
"label": "Description",
"valueType": "code"
}
]
}Time to Interactive
10.5 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,270 ms
Redirects introduce additional delays before the page can be loaded. Learn how to avoid page redirects.
对应元素与资源
{
"type": "opportunity",
"items": [
{
"url": "https://ordinaryfolk.co/",
"wastedMs": 2274.0070000000005
},
{
"url": "https://www.ordinaryfolk.co/",
"wastedMs": 0
}
],
"headings": [
{
"key": "url",
"label": "URL",
"valueType": "url"
},
{
"key": "wastedMs",
"label": "Time Spent",
"valueType": "timespanMs"
}
],
"overallSavingsMs": 2274.0070000000005
}Minimize main-thread work
2.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": "other",
"duration": 900.4840000000186,
"groupLabel": "Other"
},
{
"group": "scriptEvaluation",
"duration": 822.392000000006,
"groupLabel": "Script Evaluation"
},
{
"group": "scriptParseCompile",
"duration": 279.45200000000006,
"groupLabel": "Script Parsing & Compilation"
},
{
"group": "styleLayout",
"duration": 149.37999999999997,
"groupLabel": "Style & Layout"
},
{
"group": "paintCompositeRender",
"duration": 105.56800000000132,
"groupLabel": "Rendering"
},
{
"group": "parseHTML",
"duration": 27.412,
"groupLabel": "Parse HTML & CSS"
},
{
"group": "garbageCollection",
"duration": 17.495999999999988,
"groupLabel": "Garbage Collection"
}
],
"headings": [
{
"key": "groupLabel",
"label": "Category",
"valueType": "text"
},
{
"key": "duration",
"label": "Time Spent",
"valueType": "ms",
"granularity": 1
}
],
"sortedBy": [
"duration"
]
}Avoid large layout shifts
4 layout shifts 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-2-DIV",
"path": "2,HTML,1,BODY,4,DIV,2,DIV,0,DIV,1,DIV",
"type": "node",
"snippet": "<div class=\"column-work-grid w-clearfix w-col w-col-6\">",
"selector": "div.wrapper > div#featured > div.row-work-grid > div.column-work-grid",
"nodeLabel": "Ordinary Folk\n\nReel II",
"boundingRect": {
"top": 1097,
"left": 21,
"right": 391,
"width": 371,
"bottom": 1572,
"height": 474
}
},
"score": 0.07411472577530298,
"subItems": {
"type": "subitems",
"items": [
{
"cause": "Media element lacking an explicit size",
"extra": {
"lhId": "page-7-IMG",
"path": "2,HTML,1,BODY,4,DIV,2,DIV,0,DIV,0,DIV,0,A,1,DIV,0,DIV,0,IMG",
"type": "node",
"snippet": "<img src=\"https://pub-56e21cb169af4746be142655f1882554.r2.dev/image/home/google-dood…\" loading=\"eager\" alt=\"\" class=\"card-thumb\" style=\"opacity: 1;\">",
"selector": "a.card-work > div.card-loop > div.card-thumb > img.card-thumb",
"nodeLabel": "a.card-work > div.card-loop > div.card-thumb > img.card-thumb",
"boundingRect": {
"top": 682,
"left": 19,
"right": 393,
"width": 375,
"bottom": 1056,
"height": 375
}
}
}
]
}
},
{
"node": {
"lhId": "page-3-DIV",
"path": "2,HTML,1,BODY,4,DIV",
"type": "node",
"snippet": "<div class=\"wrapper\">",
"selector": "body > div.wrapper",
"nodeLabel": "Hi. We are Ordinary Folk. We love good work.\n\nFeatured\nprojects\n\nOur motion des…",
"boundingRect": {
"top": 96,
"left": 21,
"right": 391,
"width": 371,
"bottom": 5328,
"height": 5233
}
},
"score": 0.05382360900262047,
"subItems": {
"type": "subitems",
"items": [
{
"cause": "Media element lacking an explicit size",
"extra": {
"lhId": "page-7-IMG",
"path": "2,HTML,1,BODY,4,DIV,2,DIV,0,DIV,0,DIV,0,A,1,DIV,0,DIV,0,IMG",
"type": "node",
"snippet": "<img src=\"https://pub-56e21cb169af4746be142655f1882554.r2.dev/image/home/google-dood…\" loading=\"eager\" alt=\"\" class=\"card-thumb\" style=\"opacity: 1;\">",
"selector": "a.card-work > div.card-loop > div.card-thumb > img.card-thumb",
"nodeLabel": "a.card-work > div.card-loop > div.card-thumb > img.card-thumb",
"boundingRect": {
"top": 682,
"left": 19,
"right": 393,
"width": 375,
"bottom": 1056,
"height": 375
}
}
}
]
}
},
{
"node": {
"lhId": "page-1-DIV",
"path": "2,HTML,1,BODY,4,DIV,2,DIV,1,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"column-work-grid w-col w-col-6\">",
"selector": "div.wrapper > div#featured > div.row-work-grid > div.column-work-grid",
"nodeLabel": "Equilibrium",
"boundingRect": {
"top": 1572,
"left": 21,
"right": 391,
"width": 371,
"bottom": 2042,
"height": 470
}
},
"score": 0.02203584620315518,
"subItems": {
"type": "subitems",
"items": [
{
"cause": "Media element lacking an explicit size",
"extra": {
"lhId": "page-5-IMG",
"path": "2,HTML,1,BODY,4,DIV,2,DIV,0,DIV,1,DIV,0,A,1,DIV,0,DIV,0,IMG",
"type": "node",
"snippet": "<img src=\"https://ordinaryfolk-assets.pages.dev/img/home/OF_Reel-0-00-02-15.webp\" loading=\"eager\" alt=\"\" class=\"card-thumb\" style=\"opacity: 1;\">",
"selector": "a.card-work > div.card-loop > div.card-thumb-transparent > img.card-thumb",
"nodeLabel": "a.card-work > div.card-loop > div.card-thumb-transparent > img.card-thumb",
"boundingRect": {
"top": 1160,
"left": 21,
"right": 391,
"width": 371,
"bottom": 1530,
"height": 371
}
}
}
]
}
},
{
"node": {
"lhId": "page-0-H1",
"path": "2,HTML,1,BODY,4,DIV,0,DIV,0,DIV,0,H1",
"type": "node",
"snippet": "<h1 class=\"home-header-title home\">",
"selector": "div.wrapper > div.header-primary > div.home-header > h1.home-header-title",
"nodeLabel": "Hi. We are Ordinary Folk. We love good work.",
"boundingRect": {
"top": 159,
"left": 21,
"right": 348,
"width": 327,
"bottom": 372,
"height": 213
}
},
"score": 0.0008591714625725689,
"subItems": {
"type": "subitems",
"items": [
{
"cause": "Media element lacking an explicit size",
"extra": {
"lhId": "page-6-IMG",
"path": "2,HTML,1,BODY,4,DIV,2,DIV,1,DIV,1,DIV,0,A,0,DIV,0,DIV,0,IMG",
"type": "node",
"snippet": "<img src=\"https://ordinaryfolk-assets.pages.dev/img/home/Creation_Cover_01.webp\" loading=\"eager\" alt=\"\" class=\"card-thumb\" style=\"opacity: 1;\">",
"selector": "a.card-work > div.card-loop > div.card-thumb > img.card-thumb",
"nodeLabel": "a.card-work > div.card-loop > div.card-thumb > img.card-thumb",
"boundingRect": {
"top": 2109,
"left": 21,
"right": 391,
"width": 371,
"bottom": 2480,
"height": 371
}
}
}
]
}
}
],
"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"
}
}
]
}Image elements do not have explicit `width` and `height`
Set an explicit width and height on image elements to reduce layout shifts and improve CLS. Learn how to set image dimensions
对应元素与资源
{
"type": "table",
"items": [
{
"url": "https://pub-56e21cb169af4746be142655f1882554.r2.dev/image/home/google-doodle-salsa.jpg",
"node": {
"lhId": "1-46-IMG",
"path": "2,HTML,1,BODY,4,DIV,2,DIV,0,DIV,0,DIV,0,A,1,DIV,0,DIV,0,IMG",
"type": "node",
"snippet": "<img src=\"https://pub-56e21cb169af4746be142655f1882554.r2.dev/image/home/google-dood…\" loading=\"eager\" alt=\"\" class=\"card-thumb\" style=\"opacity: 1;\">",
"selector": "a.card-work > div.card-loop > div.card-thumb > img.card-thumb",
"nodeLabel": "a.card-work > div.card-loop > div.card-thumb > img.card-thumb",
"boundingRect": {
"top": 682,
"left": 19,
"right": 393,
"width": 375,
"bottom": 1056,
"height": 375
}
}
},
{
"url": "https://ordinaryfolk-assets.pages.dev/img/home/Webflow-2.webp",
"node": {
"lhId": "1-51-IMG",
"path": "2,HTML,1,BODY,4,DIV,2,DIV,2,DIV,1,DIV,0,A,0,DIV,0,DIV,0,IMG",
"type": "node",
"snippet": "<img src=\"https://ordinaryfolk-assets.pages.dev/img/home/Webflow-2.webp\" loading=\"eager\" alt=\"\" class=\"card-thumb\" style=\"opacity: 1;\">",
"selector": "a.card-work > div.card-loop > div.card-thumb > img.card-thumb",
"nodeLabel": "a.card-work > div.card-loop > div.card-thumb > img.card-thumb",
"boundingRect": {
"top": 3020,
"left": 21,
"right": 391,
"width": 371,
"bottom": 3391,
"height": 371
}
}
},
{
"url": "https://ordinaryfolk-assets.pages.dev/img/home/OF_Reel-0-00-02-15.webp",
"node": {
"lhId": "1-47-IMG",
"path": "2,HTML,1,BODY,4,DIV,2,DIV,0,DIV,1,DIV,0,A,1,DIV,0,DIV,0,IMG",
"type": "node",
"snippet": "<img src=\"https://ordinaryfolk-assets.pages.dev/img/home/OF_Reel-0-00-02-15.webp\" loading=\"eager\" alt=\"\" class=\"card-thumb\" style=\"opacity: 1;\">",
"selector": "a.card-work > div.card-loop > div.card-thumb-transparent > img.card-thumb",
"nodeLabel": "a.card-work > div.card-loop > div.card-thumb-transparent > img.card-thumb",
"boundingRect": {
"top": 1160,
"left": 21,
"right": 391,
"width": 371,
"bottom": 1530,
"height": 371
}
}
},
{
"url": "https://ordinaryfolk-assets.pages.dev/img/home/Creation_Cover_01.webp",
"node": {
"lhId": "1-49-IMG",
"path": "2,HTML,1,BODY,4,DIV,2,DIV,1,DIV,1,DIV,0,A,0,DIV,0,DIV,0,IMG",
"type": "node",
"snippet": "<img src=\"https://ordinaryfolk-assets.pages.dev/img/home/Creation_Cover_01.webp\" loading=\"eager\" alt=\"\" class=\"card-thumb\" style=\"opacity: 1;\">",
"selector": "a.card-work > div.card-loop > div.card-thumb > img.card-thumb",
"nodeLabel": "a.card-work > div.card-loop > div.card-thumb > img.card-thumb",
"boundingRect": {
"top": 2109,
"left": 21,
"right": 391,
"width": 371,
"bottom": 2480,
"height": 371
}
}
},
{
"url": "https://ordinaryfolk-assets.pages.dev/img/home/Cover_Dreams_V01.webp",
"node": {
"lhId": "1-50-IMG",
"path": "2,HTML,1,BODY,4,DIV,2,DIV,2,DIV,0,DIV,0,A,1,DIV,0,DIV,0,IMG",
"type": "node",
"snippet": "<img src=\"https://ordinaryfolk-assets.pages.dev/img/home/Cover_Dreams_V01.webp\" loading=\"eager\" alt=\"\" class=\"card-thumb\" style=\"opacity: 1;\">",
"selector": "a.card-work > div.card-loop > div.card-thumb > img.card-thumb",
"nodeLabel": "a.card-work > div.card-loop > div.card-thumb > img.card-thumb",
"boundingRect": {
"top": 2546,
"left": 21,
"right": 391,
"width": 371,
"bottom": 2917,
"height": 371
}
}
},
{
"url": "https://ordinaryfolk-assets.pages.dev/img/home/CryptoCubes_Cover.webp",
"node": {
"lhId": "1-53-IMG",
"path": "2,HTML,1,BODY,4,DIV,2,DIV,3,DIV,1,DIV,0,A,0,DIV,0,DIV,0,IMG",
"type": "node",
"snippet": "<img src=\"https://ordinaryfolk-assets.pages.dev/img/home/CryptoCubes_Cover.webp\" loading=\"eager\" alt=\"\" class=\"card-thumb\" style=\"opacity: 1;\">",
"selector": "a.card-work > div.card-loop > div.card-thumb > img.card-thumb",
"nodeLabel": "a.card-work > div.card-loop > div.card-thumb > img.card-thumb",
"boundingRect": {
"top": 3881,
"left": 21,
"right": 391,
"width": 371,
"bottom": 4251,
"height": 371
}
}
},
{
"url": "https://cdn.prod.website-files.com/63c8ac820bec5c25b5b58292/68658e152ce1301146d52588_equi-p-800.jpg",
"node": {
"lhId": "1-48-IMG",
"path": "2,HTML,1,BODY,4,DIV,2,DIV,1,DIV,0,DIV,0,A,1,DIV,0,IMG",
"type": "node",
"snippet": "<img src=\"https://cdn.prod.website-files.com/63c8ac820bec5c25b5b58292/68658e152ce130…\" loading=\"lazy\" sizes=\"(max-width: 479px) 96vw, (max-width: 767px) 97vw, (max-width: 2250px) 48vw…\" srcset=\"https://cdn.prod.website-files.com/63c8ac820bec5c25b5b58292/68658e152ce130…\" alt=\"\" class=\"card-thumb\">",
"selector": "div.column-work-grid > a.card-work > div.card-loop > img.card-thumb",
"nodeLabel": "div.column-work-grid > a.card-work > div.card-loop > img.card-thumb",
"boundingRect": {
"top": 1630,
"left": 21,
"right": 391,
"width": 371,
"bottom": 2001,
"height": 371
}
}
},
{
"url": "https://cdn.prod.website-files.com/63c8ac820bec5c25b5b58292/68658fc49e98b7ddd398ab42_Google%20Gemini%20Large-p-800.jpeg",
"node": {
"lhId": "1-52-IMG",
"path": "2,HTML,1,BODY,4,DIV,2,DIV,3,DIV,0,DIV,0,A,0,DIV,0,IMG",
"type": "node",
"snippet": "<img src=\"https://cdn.prod.website-files.com/63c8ac820bec5c25b5b58292/68658fc49e98b7…\" loading=\"lazy\" sizes=\"(max-width: 479px) 96vw, (max-width: 767px) 97vw, (max-width: 2666px) 48vw…\" srcset=\"https://cdn.prod.website-files.com/63c8ac820bec5c25b5b58292/68658fc49e98b7…\" alt=\"\" class=\"card-thumb\">",
"selector": "div.column-work-grid > a.card-work > div.card-loop > img.card-thumb",
"nodeLabel": "div.column-work-grid > a.card-work > div.card-loop > img.card-thumb",
"boundingRect": {
"top": 3469,
"left": 21,
"right": 391,
"width": 371,
"bottom": 3840,
"height": 371
}
}
},
{
"url": "https://cdn.prod.website-files.com/63c8ac820bec5c25b5b58292/63c8bfe834ed267fd21b2e47_icon-play.svg",
"node": {
"lhId": "1-45-IMG",
"path": "2,HTML,1,BODY,4,DIV,0,DIV,0,DIV,1,DIV,0,DIV,0,A,0,IMG",
"type": "node",
"snippet": "<img src=\"https://cdn.prod.website-files.com/63c8ac820bec5c25b5b58292/63c8bfe834ed26…\" loading=\"lazy\" alt=\"\" class=\"icon-play\">",
"selector": "div.play-me > div.play-magnetic > a.play-container > img.icon-play",
"nodeLabel": "div.play-me > div.play-magnetic > a.play-container > img.icon-play",
"boundingRect": {
"top": 342,
"left": 199,
"right": 217,
"width": 18,
"bottom": 364,
"height": 22
}
}
}
],
"headings": [
{
"key": "node",
"label": "",
"valueType": "node"
},
{
"key": "url",
"label": "URL",
"valueType": "url"
}
]
}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-P",
"path": "2,HTML,1,BODY,4,DIV,2,DIV,0,DIV,0,DIV,0,A,0,DIV,0,P",
"type": "node",
"snippet": "<p class=\"card-client\">",
"selector": "div.column-work-grid > a.card-work > div.card-lockup > p.card-client",
"nodeLabel": "Google Doodle",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.4 (foreground color: #a2a2a2, background color: #f8f8f8, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 631,
"left": 21,
"right": 391,
"width": 371,
"bottom": 646,
"height": 15
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-1-BODY",
"path": "2,HTML,1,BODY",
"type": "node",
"snippet": "<body class=\"\">",
"selector": "body",
"nodeLabel": "body",
"boundingRect": {
"top": 0,
"left": 0,
"right": 412,
"width": 412,
"bottom": 5328,
"height": 5328
}
}
}
]
}
},
{
"node": {
"lhId": "1-2-A",
"path": "2,HTML,1,BODY,4,DIV,4,FOOTER,0,DIV,1,DIV,0,DIV,2,P,0,A",
"type": "node",
"snippet": "<a href=\"https://goo.gl/maps/mgm25X3YKTd7agq47\" target=\"_blank\" class=\"inline-link-gray\">",
"selector": "div.grid-column > div.link-primary > p.body-secondary > a.inline-link-gray",
"nodeLabel": "3488 Commercial St.\nVancouver, BC\nV5N 4E9 Canada",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.4 (foreground color: #a2a2a2, background color: #f8f8f8, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 4794,
"left": 21,
"right": 172,
"width": 151,
"bottom": 4862,
"height": 68
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-1-BODY",
"path": "2,HTML,1,BODY",
"type": "node",
"snippet": "<body class=\"\">",
"selector": "body",
"nodeLabel": "body",
"boundingRect": {
"top": 0,
"left": 0,
"right": 412,
"width": 412,
"bottom": 5328,
"height": 5328
}
}
}
]
}
},
{
"node": {
"lhId": "1-3-P",
"path": "2,HTML,1,BODY,4,DIV,4,FOOTER,0,DIV,2,DIV,0,DIV,2,P",
"type": "node",
"snippet": "<p class=\"body-secondary\">",
"selector": "div.grid > div.grid-column > div.link-primary > p.body-secondary",
"nodeLabel": "Website design by\nStudio Ahremark\nBuilt by Herman\n",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.4 (foreground color: #a2a2a2, background color: #f8f8f8, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 4996,
"left": 21,
"right": 391,
"width": 371,
"bottom": 5068,
"height": 72
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-1-BODY",
"path": "2,HTML,1,BODY",
"type": "node",
"snippet": "<body class=\"\">",
"selector": "body",
"nodeLabel": "body",
"boundingRect": {
"top": 0,
"left": 0,
"right": 412,
"width": 412,
"bottom": 5328,
"height": 5328
}
}
}
]
}
},
{
"node": {
"lhId": "1-4-A",
"path": "2,HTML,1,BODY,4,DIV,4,FOOTER,0,DIV,2,DIV,0,DIV,2,P,2,A",
"type": "node",
"snippet": "<a href=\"https://www.studioahremark.com/\" target=\"_blank\" class=\"inline-link-gray\">",
"selector": "div.grid-column > div.link-primary > p.body-secondary > a.inline-link-gray",
"nodeLabel": "Studio Ahremark",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.4 (foreground color: #a2a2a2, background color: #f8f8f8, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 5022,
"left": 21,
"right": 142,
"width": 122,
"bottom": 5042,
"height": 20
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-1-BODY",
"path": "2,HTML,1,BODY",
"type": "node",
"snippet": "<body class=\"\">",
"selector": "body",
"nodeLabel": "body",
"boundingRect": {
"top": 0,
"left": 0,
"right": 412,
"width": 412,
"bottom": 5328,
"height": 5328
}
}
}
]
}
},
{
"node": {
"lhId": "1-5-A",
"path": "2,HTML,1,BODY,4,DIV,4,FOOTER,0,DIV,2,DIV,0,DIV,2,P,5,A",
"type": "node",
"snippet": "<a href=\"https://www.herman.studio/\" target=\"_blank\" class=\"inline-link-gray\">",
"selector": "div.grid-column > div.link-primary > p.body-secondary > a.inline-link-gray",
"nodeLabel": "Herman",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.4 (foreground color: #a2a2a2, background color: #f8f8f8, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 5046,
"left": 78,
"right": 136,
"width": 57,
"bottom": 5066,
"height": 20
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-1-BODY",
"path": "2,HTML,1,BODY",
"type": "node",
"snippet": "<body class=\"\">",
"selector": "body",
"nodeLabel": "body",
"boundingRect": {
"top": 0,
"left": 0,
"right": 412,
"width": 412,
"bottom": 5328,
"height": 5328
}
}
}
]
}
}
],
"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"
}
}`<html>` element does not have a `[lang]` attribute
If a page doesn't specify a `lang` attribute, a screen reader assumes that the page is in the default language that the user chose when setting up the screen reader. If the page isn't actually in the default language, then the screen reader might not announce the page's text correctly. Learn more about the `lang` attribute.
对应元素与资源
{
"type": "table",
"items": [
{
"node": {
"lhId": "1-6-HTML",
"path": "2,HTML",
"type": "node",
"snippet": "<html data-wf-domain=\"www.ordinaryfolk.co\" data-wf-page=\"63c8ac820bec5c66c8b58293\" data-wf-site=\"63c8ac820bec5c25b5b58292\" class=\" w-mod-js w-mod-touch w-mod-ix\">",
"selector": "html.w-mod-js",
"nodeLabel": "html.w-mod-js",
"explanation": "Fix any of the following:\n The <html> element does not have a lang attribute",
"boundingRect": {
"top": 0,
"left": 0,
"right": 412,
"width": 412,
"bottom": 823,
"height": 823
}
}
}
],
"headings": [
{
"key": "node",
"label": "Failing Elements",
"valueType": "node",
"subItemsHeading": {
"key": "relatedNode",
"valueType": "node"
}
}
],
"debugData": {
"tags": [
"cat.language",
"wcag2a",
"wcag311",
"TTv5",
"TT11.a",
"EN-301-549",
"EN-9.3.1.1",
"ACT",
"RGAAv4",
"RGAA-8.3.1"
],
"type": "debugdata",
"impact": "serious"
}
}Document does not have a main landmark.
One main landmark helps screen reader users navigate a web page. Learn more about landmarks.
对应元素与资源
{
"type": "table",
"items": [
{
"node": {
"lhId": "1-6-HTML",
"path": "2,HTML",
"type": "node",
"snippet": "<html data-wf-domain=\"www.ordinaryfolk.co\" data-wf-page=\"63c8ac820bec5c66c8b58293\" data-wf-site=\"63c8ac820bec5c25b5b58292\" class=\" w-mod-js w-mod-touch w-mod-ix\">",
"selector": "html.w-mod-js",
"nodeLabel": "html.w-mod-js",
"explanation": "Fix all of the following:\n Document does not have a main landmark",
"boundingRect": {
"top": 0,
"left": 0,
"right": 412,
"width": 412,
"bottom": 823,
"height": 823
}
}
}
],
"headings": [
{
"key": "node",
"label": "Failing Elements",
"valueType": "node",
"subItemsHeading": {
"key": "relatedNode",
"valueType": "node"
}
}
],
"debugData": {
"tags": [
"cat.semantics",
"best-practice"
],
"type": "debugdata",
"impact": "moderate"
}
}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-7-A",
"path": "2,HTML,1,BODY,3,NAV,0,DIV,0,DIV,0,DIV,0,A",
"type": "node",
"snippet": "<a data-w-id=\"cae0da5e-9f45-cad4-8fa4-4210e93005a4\" href=\"/\" aria-current=\"page\" class=\"logo-container w-inline-block w--current\">",
"selector": "div.wrapper > div.grid > div.grid-column > a.logo-container",
"nodeLabel": "div.wrapper > div.grid > div.grid-column > a.logo-container",
"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": 20,
"left": 21,
"right": 146,
"width": 125,
"bottom": 83,
"height": 63
}
}
}
],
"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"
}
}Avoid enormous network payloads
Total size was 35,103 KiB
Large network payloads cost users real money and are highly correlated with long load times. Learn how to reduce payload sizes.
对应元素与资源
{
"type": "table",
"items": [
{
"url": "https://ordinaryfolk-assets.pages.dev/video/home/OF_Reel2_clean.webm",
"totalBytes": 11057847
},
{
"url": "https://pub-56e21cb169af4746be142655f1882554.r2.dev/video/home/cryptocubes.webm",
"totalBytes": 5374227
},
{
"url": "https://pub-56e21cb169af4746be142655f1882554.r2.dev/video/home/ordinary-folk-reel-ii.webm",
"totalBytes": 3359073
},
{
"url": "https://pub-56e21cb169af4746be142655f1882554.r2.dev/video/home/procreate-dreams.webm",
"totalBytes": 2903714
},
{
"url": "https://pub-56e21cb169af4746be142655f1882554.r2.dev/video/home/ordinary-folk-reel-ii.webm",
"totalBytes": 2736475
},
{
"url": "https://pub-56e21cb169af4746be142655f1882554.r2.dev/video/home/creation.webm",
"totalBytes": 1589592
},
{
"url": "https://pub-56e21cb169af4746be142655f1882554.r2.dev/video/home/equilibrium.webm",
"totalBytes": 1436765
},
{
"url": "https://pub-56e21cb169af4746be142655f1882554.r2.dev/video/home/gemini.webm",
"totalBytes": 1225847
},
{
"url": "https://pub-56e21cb169af4746be142655f1882554.r2.dev/video/home/google-doodle-salsa.webm",
"totalBytes": 1081693
},
{
"url": "https://pub-56e21cb169af4746be142655f1882554.r2.dev/video/home/ordinary-folk-reel-ii.webm",
"totalBytes": 1069019
}
],
"headings": [
{
"key": "url",
"label": "URL",
"valueType": "url"
},
{
"key": "totalBytes",
"label": "Transfer Size",
"valueType": "bytes"
}
],
"sortedBy": [
"totalBytes"
]
}测试环境与原始指标
{
"finalUrl": "https://www.ordinaryfolk.co/",
"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": 3297.268000000001
},
{
"id": "cumulative-layout-shift",
"unit": "unitless",
"value": 0.1508333524436512
},
{
"id": "total-blocking-time",
"unit": "millisecond",
"value": 155.9999999999991
},
{
"id": "first-contentful-paint",
"unit": "millisecond",
"value": 3297.268000000001
},
{
"id": "speed-index",
"unit": "millisecond",
"value": 5836.41118857913
}
]
}01 / 值得借鉴
好设计，具体好在哪
排版本身就是主视觉
Hi. We are Ordinary Folk. We love good work. 占据主要空间，不依赖额外的背景包装。
作品与方法分别引导
Featured projects 与制作流程并列，满足想直接看成果与想了解合作方式的两类访客。
02 / 下一步
值得继续打磨的地方
- 01
播放按钮需要说明内容
圆形播放符号紧贴句末，但没有可见文字解释是作品集影片还是其它内容。
在播放按钮附近补一个短标签说明影片内容，并为按钮提供可访问名称；打开后需能暂停和关闭。
03 / 设计语言
把气质拆成可复用的参数
色彩
背景
#f8f8f8文字
#161616字体与尺度
- 标题字体
- Circular
- 正文字体
- Helvetica
- 标题 / 正文
- 114px / 14px
间距与形状
- 区块间距
- —
- 组件内距
- —
- 卡片圆角
- —
- 按钮圆角
- —
参数来自页面元素采样，空值表示未取得；不将单个元素的参数当作全站规范。
04 / 检查依据
观察与实测依据
数据来自同次页面采集；字体、圆角和间距为具体元素采样，不代表全站唯一设计规范。空值为未取得。HTML 为源码体积，不是压缩传输量；脚本数为 DOM 标签数，不是请求数。
转化1 项观察
播放按钮需要说明内容
圆形播放符号紧贴句末，但没有可见文字解释是作品集影片还是其它内容。
在播放按钮附近补一个短标签说明影片内容，并为按钮提供可访问名称；打开后需能暂停和关闭。
desktop.png and mobile.png: unlabeled inline play icon
上线2 项观察
没有 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
链接分享预览
Ordinary Folk
Hi. We are Ordinary Folk. A motion design & animation studio based in Vancouver. We love good work.
05 / 开始动手
把下一步，交给你的 AI
优化指令用于调整这个页面；设计指令用于借鉴它的视觉语言。「做同款」会附带截图与实施步骤。复制后粘贴到你的代码助手中。
查看完整指令
请基于 https://ordinaryfolk.co 的 2026-09-05T03:21:02.201Z 页面快照优化当前项目。先确认当前实现与快照差异，不要把已变化的内容重新改回旧版。
设计基线
顶栏以小型分组链接提供 Work、Process、Play、About；主体用大字号问候语建立品牌，播放按钮嵌入文字尾部，随后出现精选作品和制作流程两条路径，再进入作品清单。手机保留大标题但按较短行长重排。参考重点是文本排版的主导权和作品入口的清楚分组。
{
"colors": [
{
"role": "bg",
"hex": "#f8f8f8"
},
{
"role": "ink",
"hex": "#161616"
}
],
"fonts": {
"body": "Helvetica",
"display": "Circular",
"stack": [
"Arial",
"Circular"
]
},
"radius": {
"button": "",
"card": "",
"field": ""
},
"space": {
"section": "",
"card": ""
},
"type": {
"h1": "114px",
"body": "14px",
"weight": "500",
"lineHeight": "20px",
"letterSpacing": "normal"
}
}
数据来自同次页面采集；字体、圆角和间距为具体元素采样，不代表全站唯一设计规范。空值为未取得。HTML 为源码体积，不是压缩传输量；脚本数为 DOM 标签数，不是请求数。
执行事项
1. 播放按钮需要说明内容
在播放按钮附近补一个短标签说明影片内容，并为按钮提供可访问名称；打开后需能暂停和关闭。
依据: desktop.png and mobile.png: unlabeled inline play icon
2. 没有 X-Content-Type-Options
设置 X-Content-Type-Options: nosniff。
依据: x-content-type-options missing
3. 没有 Referrer-Policy
设置 Referrer-Policy: strict-origin-when-cross-origin。
依据: referrer-policy missing
验收
- 在 1440×900 和 390×844 分别核对文字、布局和主要操作“Featured projects”。
- 保留已有品牌、登录和业务链路，不从静态截图推断交互故障。
- 只修复有证据的项；涉及安全响应头时先用报告模式验证现有资源及认证兼容性。
- 对比修改前后的截图，并执行相关功能测试。不要声称未经测试的功能已通过。