Max Potential First Input Delay
280 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.
页面构成与技术指标
正文
952
操作候选
2
图片
5
HTML
95 KB
文案
标题字数
32
摘要字数
52
H1
1
H2
4
动作
主要入口
Get Obsidian for macOS
表单
0/ 11 输入
站内链接
111
站外链接
13
安全与页面元信息
HTTPS
有
HSTS
有
CSP
无
nosniff
有
viewport
有
图标
有
JSON-LD
无
统计
无
构成
Tailwind
脚本
4 ext / 6 inline
语言
en
第三方域
无
Lighthouse
移动端模拟 · 性能评分
96 / 100
2026-09-05 · 实验室数据，非真实用户体验数据。
查看详情
移动端模拟 · 实验室数据，非真实用户体验数据
2026-09-05T04:05:44.278Z · Lighthouse 13.4.1
性能96/ 100
可访问性82/ 100
最佳实践100/ 100
SEO100/ 100
LCP · 主要内容出现2,592 ms
CLS · 布局偏移0.000
TBT · 主线程阻塞132 ms
FCP · 首次内容绘制1,251 ms
SI · 视觉加载速度1,824 ms
分数会受服务器、网络和测试环境影响，独立于品味／转化评分。诊断保留 Lighthouse 原文。
Time to Interactive
3.4 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.
`[aria-hidden="true"]` elements contain focusable descendents
Focusable descendents within an `[aria-hidden="true"]` element prevent those interactive elements from being available to users of assistive technologies like screen readers. Learn how `aria-hidden` affects focusable elements.
对应元素与资源
{
"type": "table",
"items": [
{
"node": {
"lhId": "1-0-DIV",
"path": "1,HTML,1,BODY,6,DIV,0,DIV,0,DIV,1,DIV,3,DIV,1,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"select-none cursor-default relative ui bg-gray-900 border-t border-s borde…\" aria-hidden=\"true\" data-nosnippet=\"\">",
"selector": "div.text-lg > div.card > div.md:h-96 > div.select-none",
"nodeLabel": "Community plugins\nCalendar by Liam Cain\nCalendar view of your daily notes.\nKanb…",
"explanation": "Fix all of the following:\n Focusable content should be disabled or be removed from the DOM",
"boundingRect": {
"top": 4312,
"left": 45,
"right": 391,
"width": 347,
"bottom": 4696,
"height": 384
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-1-INPUT",
"path": "1,HTML,1,BODY,6,DIV,0,DIV,0,DIV,1,DIV,3,DIV,1,DIV,0,DIV,1,DIV,1,DIV,0,INPUT",
"type": "node",
"snippet": "<input type=\"checkbox\" aria-labelledby=\"plugins-calendar\">",
"selector": "div.select-none > div.border-b > div.shrink-0 > input",
"nodeLabel": "div.select-none > div.border-b > div.shrink-0 > input",
"boundingRect": {
"top": 4415,
"left": 333,
"right": 357,
"width": 24,
"bottom": 4431,
"height": 16
}
}
},
{
"relatedNode": {
"lhId": "1-2-INPUT",
"path": "1,HTML,1,BODY,6,DIV,0,DIV,0,DIV,1,DIV,3,DIV,1,DIV,0,DIV,2,DIV,1,DIV,0,INPUT",
"type": "node",
"snippet": "<input type=\"checkbox\" aria-labelledby=\"plugins-kanban\">",
"selector": "div.select-none > div.border-b > div.ms-auto > input",
"nodeLabel": "div.select-none > div.border-b > div.ms-auto > input",
"boundingRect": {
"top": 4488,
"left": 333,
"right": 357,
"width": 24,
"bottom": 4504,
"height": 16
}
}
},
{
"relatedNode": {
"lhId": "1-3-INPUT",
"path": "1,HTML,1,BODY,6,DIV,0,DIV,0,DIV,1,DIV,3,DIV,1,DIV,0,DIV,3,DIV,1,DIV,0,INPUT",
"type": "node",
"snippet": "<input type=\"checkbox\" aria-labelledby=\"plugins-dataview\">",
"selector": "div.select-none > div.border-b > div.ms-auto > input",
"nodeLabel": "div.select-none > div.border-b > div.ms-auto > input",
"boundingRect": {
"top": 4561,
"left": 333,
"right": 357,
"width": 24,
"bottom": 4577,
"height": 16
}
}
}
]
}
}
],
"headings": [
{
"key": "node",
"label": "Failing Elements",
"valueType": "node",
"subItemsHeading": {
"key": "relatedNode",
"valueType": "node"
}
}
],
"debugData": {
"tags": [
"cat.name-role-value",
"wcag2a",
"wcag412",
"TTv5",
"TT6.a",
"EN-301-549",
"EN-9.4.1.2",
"RGAAv4",
"RGAA-10.8.1"
],
"type": "debugdata",
"impact": "serious"
}
}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-4-DIV",
"path": "1,HTML,1,BODY,7,DIV,0,DIV,0,DIV,1,DIV,5,DIV,0,DIV,0,DIV,1,DIV,0,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"flex-1 rounded-lg px-3 py-2 text-sm border border-gray-200 text-gray-400\">",
"selector": "div.ui > div.py-4 > div.flex > div.flex-1",
"nodeLabel": "Invite by email...",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.52 (foreground color: #a3a3a3, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 5465,
"left": 77,
"right": 359,
"width": 283,
"bottom": 5503,
"height": 38
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-5-DIV",
"path": "1,HTML,1,BODY,7,DIV,0,DIV,0,DIV,1,DIV,5,DIV,0,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"ui ui-light rounded-ss-xl shadow-xl pt-8 ps-8 pe-8 bg-white\" style=\"min-height: 400px; height: 100%;\">",
"selector": "div.tab-content > div.tab-pane > div.mx-auto > div.ui",
"nodeLabel": "Shared vaults\nInvite by email...\nEX\nErica Xu\nOwner\nSA\nSteph Ango\nCan edit\nLC\nLi…",
"boundingRect": {
"top": 5372,
"left": 45,
"right": 391,
"width": 347,
"bottom": 5772,
"height": 400
}
}
}
]
}
},
{
"node": {
"lhId": "1-6-DIV",
"path": "1,HTML,1,BODY,7,DIV,0,DIV,0,DIV,1,DIV,5,DIV,0,DIV,0,DIV,1,DIV,1,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibol…\">",
"selector": "div.ui > div.py-4 > div.flex > div.w-8",
"nodeLabel": "EX",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 4.46 (foreground color: #ffffff, background color: #6366f1, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 5532,
"left": 77,
"right": 109,
"width": 32,
"bottom": 5564,
"height": 32
}
}
},
{
"node": {
"lhId": "1-7-DIV",
"path": "1,HTML,1,BODY,7,DIV,0,DIV,0,DIV,1,DIV,5,DIV,0,DIV,0,DIV,1,DIV,1,DIV,2,DIV",
"type": "node",
"snippet": "<div class=\"text-xs text-gray-400\">",
"selector": "div.ui > div.py-4 > div.flex > div.text-xs",
"nodeLabel": "Owner",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.52 (foreground color: #a3a3a3, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 5540,
"left": 322,
"right": 359,
"width": 37,
"bottom": 5556,
"height": 16
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-5-DIV",
"path": "1,HTML,1,BODY,7,DIV,0,DIV,0,DIV,1,DIV,5,DIV,0,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"ui ui-light rounded-ss-xl shadow-xl pt-8 ps-8 pe-8 bg-white\" style=\"min-height: 400px; height: 100%;\">",
"selector": "div.tab-content > div.tab-pane > div.mx-auto > div.ui",
"nodeLabel": "Shared vaults\nInvite by email...\nEX\nErica Xu\nOwner\nSA\nSteph Ango\nCan edit\nLC\nLi…",
"boundingRect": {
"top": 5372,
"left": 45,
"right": 391,
"width": 347,
"bottom": 5772,
"height": 400
}
}
}
]
}
},
{
"node": {
"lhId": "1-8-DIV",
"path": "1,HTML,1,BODY,7,DIV,0,DIV,0,DIV,1,DIV,5,DIV,0,DIV,0,DIV,1,DIV,2,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibol…\" style=\"background: hsl(258,88%,66%);\">",
"selector": "div.ui > div.py-4 > div.flex > div.w-8",
"nodeLabel": "SA",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 4.25 (foreground color: #ffffff, background color: #8a5cf5, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 5589,
"left": 77,
"right": 109,
"width": 32,
"bottom": 5621,
"height": 32
}
}
},
{
"node": {
"lhId": "1-9-DIV",
"path": "1,HTML,1,BODY,7,DIV,0,DIV,0,DIV,1,DIV,5,DIV,0,DIV,0,DIV,1,DIV,2,DIV,2,DIV",
"type": "node",
"snippet": "<div class=\"text-xs text-gray-400\">",
"selector": "div.ui > div.py-4 > div.flex > div.text-xs",
"nodeLabel": "Can edit",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.52 (foreground color: #a3a3a3, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 5597,
"left": 312,
"right": 359,
"width": 47,
"bottom": 5613,
"height": 16
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-5-DIV",
"path": "1,HTML,1,BODY,7,DIV,0,DIV,0,DIV,1,DIV,5,DIV,0,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"ui ui-light rounded-ss-xl shadow-xl pt-8 ps-8 pe-8 bg-white\" style=\"min-height: 400px; height: 100%;\">",
"selector": "div.tab-content > div.tab-pane > div.mx-auto > div.ui",
"nodeLabel": "Shared vaults\nInvite by email...\nEX\nErica Xu\nOwner\nSA\nSteph Ango\nCan edit\nLC\nLi…",
"boundingRect": {
"top": 5372,
"left": 45,
"right": 391,
"width": 347,
"bottom": 5772,
"height": 400
}
}
}
]
}
},
{
"node": {
"lhId": "1-10-DIV",
"path": "1,HTML,1,BODY,7,DIV,0,DIV,0,DIV,1,DIV,5,DIV,0,DIV,0,DIV,1,DIV,3,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibol…\">",
"selector": "div.ui > div.py-4 > div.flex > div.w-8",
"nodeLabel": "LC",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.27 (foreground color: #ffffff, background color: #22c55e, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 5646,
"left": 77,
"right": 109,
"width": 32,
"bottom": 5678,
"height": 32
}
}
},
{
"node": {
"lhId": "1-11-DIV",
"path": "1,HTML,1,BODY,7,DIV,0,DIV,0,DIV,1,DIV,5,DIV,0,DIV,0,DIV,1,DIV,3,DIV,2,DIV",
"type": "node",
"snippet": "<div class=\"text-xs text-gray-400\">",
"selector": "div.ui > div.py-4 > div.flex > div.text-xs",
"nodeLabel": "Can edit",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.52 (foreground color: #a3a3a3, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 5654,
"left": 312,
"right": 359,
"width": 47,
"bottom": 5670,
"height": 16
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-5-DIV",
"path": "1,HTML,1,BODY,7,DIV,0,DIV,0,DIV,1,DIV,5,DIV,0,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"ui ui-light rounded-ss-xl shadow-xl pt-8 ps-8 pe-8 bg-white\" style=\"min-height: 400px; height: 100%;\">",
"selector": "div.tab-content > div.tab-pane > div.mx-auto > div.ui",
"nodeLabel": "Shared vaults\nInvite by email...\nEX\nErica Xu\nOwner\nSA\nSteph Ango\nCan edit\nLC\nLi…",
"boundingRect": {
"top": 5372,
"left": 45,
"right": 391,
"width": 347,
"bottom": 5772,
"height": 400
}
}
}
]
}
},
{
"node": {
"lhId": "1-12-DIV",
"path": "1,HTML,1,BODY,7,DIV,0,DIV,0,DIV,1,DIV,5,DIV,0,DIV,0,DIV,1,DIV,4,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibol…\">",
"selector": "div.ui > div.py-4 > div.flex > div.w-8",
"nodeLabel": "TG",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.76 (foreground color: #ffffff, background color: #f87171, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 5703,
"left": 77,
"right": 109,
"width": 32,
"bottom": 5735,
"height": 32
}
}
},
{
"node": {
"lhId": "1-13-DIV",
"path": "1,HTML,1,BODY,7,DIV,0,DIV,0,DIV,1,DIV,5,DIV,0,DIV,0,DIV,1,DIV,4,DIV,2,DIV",
"type": "node",
"snippet": "<div class=\"text-xs text-gray-400\">",
"selector": "div.ui > div.py-4 > div.flex > div.text-xs",
"nodeLabel": "Can edit",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.52 (foreground color: #a3a3a3, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 5711,
"left": 312,
"right": 359,
"width": 47,
"bottom": 5727,
"height": 16
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-5-DIV",
"path": "1,HTML,1,BODY,7,DIV,0,DIV,0,DIV,1,DIV,5,DIV,0,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"ui ui-light rounded-ss-xl shadow-xl pt-8 ps-8 pe-8 bg-white\" style=\"min-height: 400px; height: 100%;\">",
"selector": "div.tab-content > div.tab-pane > div.mx-auto > div.ui",
"nodeLabel": "Shared vaults\nInvite by email...\nEX\nErica Xu\nOwner\nSA\nSteph Ango\nCan edit\nLC\nLi…",
"boundingRect": {
"top": 5372,
"left": 45,
"right": 391,
"width": 347,
"bottom": 5772,
"height": 400
}
}
}
]
}
}
],
"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"
}
}`<dl>`'s do not contain only properly-ordered `<dt>` and `<dd>` groups, `<script>`, `<template>` or `<div>` elements.
When definition lists are not properly marked up, screen readers may produce confusing or inaccurate output. Learn how to structure definition lists correctly.
对应元素与资源
{
"type": "table",
"items": [
{
"node": {
"lhId": "1-14-DL",
"path": "1,HTML,1,BODY,8,DIV,0,DIV,0,DIV,1,DL",
"type": "node",
"snippet": "<dl class=\"col-span-2 grid grid-cols-1 gap-y-8 gap-x-12 sm:grid-cols-3\">",
"selector": "div.py-16 > div.container > div.mx-auto > dl.col-span-2",
"nodeLabel": "Seamless editing. Publish your notes instantly from the Obsidian app, and make …",
"explanation": "Fix all of the following:\n dl element has direct children that are not allowed: div > div",
"boundingRect": {
"top": 6088,
"left": 21,
"right": 391,
"width": 371,
"bottom": 6460,
"height": 372
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-15-DIV",
"path": "1,HTML,1,BODY,8,DIV,0,DIV,0,DIV,1,DL,0,DIV,0,DIV",
"type": "node",
"snippet": "<div>",
"selector": "div.mx-auto > dl.col-span-2 > div.text-lg > div",
"nodeLabel": "div.mx-auto > dl.col-span-2 > div.text-lg > div",
"boundingRect": {
"top": 6088,
"left": 21,
"right": 45,
"width": 24,
"bottom": 6200,
"height": 112
}
}
},
{
"relatedNode": {
"lhId": "1-16-DIV",
"path": "1,HTML,1,BODY,8,DIV,0,DIV,0,DIV,1,DL,0,DIV,1,DIV",
"type": "node",
"snippet": "<div>",
"selector": "div.mx-auto > dl.col-span-2 > div.text-lg > div",
"nodeLabel": "Seamless editing. Publish your notes instantly from the Obsidian app, and make …",
"boundingRect": {
"top": 6088,
"left": 57,
"right": 391,
"width": 335,
"bottom": 6200,
"height": 112
}
}
},
{
"relatedNode": {
"lhId": "1-17-DIV",
"path": "1,HTML,1,BODY,8,DIV,0,DIV,0,DIV,1,DL,1,DIV,0,DIV",
"type": "node",
"snippet": "<div>",
"selector": "div.mx-auto > dl.col-span-2 > div.text-lg > div",
"nodeLabel": "div.mx-auto > dl.col-span-2 > div.text-lg > div",
"boundingRect": {
"top": 6232,
"left": 21,
"right": 45,
"width": 24,
"bottom": 6316,
"height": 84
}
}
}
]
}
}
],
"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.3"
],
"type": "debugdata",
"impact": "serious"
}
}Definition list items are not wrapped in `<dl>` elements
Definition list items (`<dt>` and `<dd>`) must be wrapped in a parent `<dl>` element to ensure that screen readers can properly announce them. Learn how to structure definition lists correctly.
对应元素与资源
{
"type": "table",
"items": [
{
"node": {
"lhId": "1-18-DT",
"path": "1,HTML,1,BODY,8,DIV,0,DIV,0,DIV,1,DL,0,DIV,1,DIV,0,DT",
"type": "node",
"snippet": "<dt class=\"font-semibold inline sm:block\">",
"selector": "dl.col-span-2 > div.text-lg > div > dt.font-semibold",
"nodeLabel": "Seamless editing. ",
"explanation": "Fix any of the following:\n Description list item does not have a <dl> parent element",
"boundingRect": {
"top": 6091,
"left": 57,
"right": 210,
"width": 153,
"bottom": 6112,
"height": 21
}
}
},
{
"node": {
"lhId": "1-19-DD",
"path": "1,HTML,1,BODY,8,DIV,0,DIV,0,DIV,1,DL,0,DIV,1,DIV,1,DD",
"type": "node",
"snippet": "<dd class=\"mt-2 text-lg leading-6 text-muted inline sm:block\">",
"selector": "dl.col-span-2 > div.text-lg > div > dd.mt-2",
"nodeLabel": "Publish your notes instantly from the Obsidian app, and make it easy for reader…",
"explanation": "Fix any of the following:\n Description list item does not have a <dl> parent element",
"boundingRect": {
"top": 6091,
"left": 57,
"right": 372,
"width": 316,
"bottom": 6196,
"height": 105
}
}
},
{
"node": {
"lhId": "1-20-DT",
"path": "1,HTML,1,BODY,8,DIV,0,DIV,0,DIV,1,DL,1,DIV,1,DIV,0,DT",
"type": "node",
"snippet": "<dt class=\"font-semibold inline sm:block\">",
"selector": "dl.col-span-2 > div.text-lg > div > dt.font-semibold",
"nodeLabel": "Customization. ",
"explanation": "Fix any of the following:\n Description list item does not have a <dl> parent element",
"boundingRect": {
"top": 6235,
"left": 57,
"right": 188,
"width": 131,
"bottom": 6256,
"height": 21
}
}
},
{
"node": {
"lhId": "1-21-DD",
"path": "1,HTML,1,BODY,8,DIV,0,DIV,0,DIV,1,DL,1,DIV,1,DIV,1,DD",
"type": "node",
"snippet": "<dd class=\"mt-2 text-lg leading-6 text-muted inline sm:block\">",
"selector": "dl.col-span-2 > div.text-lg > div > dd.mt-2",
"nodeLabel": "Control the look and feel of your site with themes, custom domains, password pr…",
"explanation": "Fix any of the following:\n Description list item does not have a <dl> parent element",
"boundingRect": {
"top": 6235,
"left": 57,
"right": 388,
"width": 332,
"bottom": 6312,
"height": 77
}
}
},
{
"node": {
"lhId": "1-22-DT",
"path": "1,HTML,1,BODY,8,DIV,0,DIV,0,DIV,1,DL,2,DIV,1,DIV,0,DT",
"type": "node",
"snippet": "<dt class=\"font-semibold inline sm:block\">",
"selector": "dl.col-span-2 > div.text-lg > div > dt.font-semibold",
"nodeLabel": "Optimized for performance. ",
"explanation": "Fix any of the following:\n Description list item does not have a <dl> parent element",
"boundingRect": {
"top": 6351,
"left": 57,
"right": 294,
"width": 237,
"bottom": 6372,
"height": 21
}
}
},
{
"node": {
"lhId": "1-23-DD",
"path": "1,HTML,1,BODY,8,DIV,0,DIV,0,DIV,1,DL,2,DIV,1,DIV,1,DD",
"type": "node",
"snippet": "<dd class=\"mt-2 text-lg leading-6 text-muted inline sm:block\">",
"selector": "dl.col-span-2 > div.text-lg > div > dd.mt-2",
"nodeLabel": "Obsidian Publish sites are fast, mobile-friendly, and optimized for SEO, no con…",
"explanation": "Fix any of the following:\n Description list item does not have a <dl> parent element",
"boundingRect": {
"top": 6379,
"left": 57,
"right": 368,
"width": 312,
"bottom": 6456,
"height": 77
}
}
}
],
"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.3"
],
"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-24-HTML",
"path": "1,HTML",
"type": "node",
"snippet": "<html lang=\"en\" dir=\"ltr\">",
"selector": "html",
"nodeLabel": "html",
"explanation": "Fix all of the following:\n Document does not have a main landmark",
"boundingRect": {
"top": 0,
"left": 0,
"right": 412,
"width": 412,
"bottom": 9015,
"height": 9015
}
}
}
],
"headings": [
{
"key": "node",
"label": "Failing Elements",
"valueType": "node",
"subItemsHeading": {
"key": "relatedNode",
"valueType": "node"
}
}
],
"debugData": {
"tags": [
"cat.semantics",
"best-practice"
],
"type": "debugdata",
"impact": "moderate"
}
}Minify CSS
Est savings of 6 KiB
Minifying CSS files can reduce network payload sizes. Learn how to minify CSS.
对应元素与资源
{
"type": "opportunity",
"items": [
{
"url": "https://obsidian.md/tailwind.css?v=9d5102ea",
"totalBytes": 34658,
"wastedBytes": 6132,
"wastedPercent": 17.69277689235189
}
],
"headings": [
{
"key": "url",
"label": "URL",
"valueType": "url"
},
{
"key": "totalBytes",
"label": "Transfer Size",
"valueType": "bytes"
},
{
"key": "wastedBytes",
"label": "Est Savings",
"valueType": "bytes"
}
],
"sortedBy": [
"wastedBytes"
],
"debugData": {
"type": "debugdata",
"metricSavings": {
"FCP": 0,
"LCP": 0
}
},
"overallSavingsMs": 0,
"overallSavingsBytes": 6132
}Reduce unused CSS
Est savings of 18 KiB
Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. Learn how to reduce unused CSS.
对应元素与资源
{
"type": "opportunity",
"items": [
{
"url": "https://obsidian.md/tailwind.css?v=9d5102ea",
"totalBytes": 27391,
"wastedBytes": 18476,
"wastedPercent": 67.45305603106205
}
],
"headings": [
{
"key": "url",
"label": "URL",
"valueType": "url"
},
{
"key": "totalBytes",
"label": "Transfer Size",
"valueType": "bytes"
},
{
"key": "wastedBytes",
"label": "Est Savings",
"valueType": "bytes"
}
],
"sortedBy": [
"wastedBytes"
],
"debugData": {
"type": "debugdata",
"metricSavings": {
"FCP": 270,
"LCP": 300
}
},
"overallSavingsMs": 300,
"overallSavingsBytes": 18476
}Reduce unused JavaScript
Est savings of 86 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://obsidian.md/pixi.min.js",
"totalBytes": 145292,
"wastedBytes": 88404,
"wastedPercent": 60.845515201907055
}
],
"headings": [
{
"key": "url",
"label": "URL",
"valueType": "url",
"subItemsHeading": {
"key": "source",
"valueType": "code"
}
},
{
"key": "totalBytes",
"label": "Transfer Size",
"valueType": "bytes",
"subItemsHeading": {
"key": "sourceBytes"
}
},
{
"key": "wastedBytes",
"label": "Est Savings",
"valueType": "bytes",
"subItemsHeading": {
"key": "sourceWastedBytes"
}
}
],
"sortedBy": [
"wastedBytes"
],
"debugData": {
"type": "debugdata",
"metricSavings": {
"FCP": 0,
"LCP": 0
}
},
"overallSavingsMs": 0,
"overallSavingsBytes": 88404
}Use efficient cache lifetimes
Est savings of 459 KiB
A long cache lifetime can speed up repeat visits to your page. Learn more about caching.
对应元素与资源
{
"type": "table",
"items": [
{
"url": "https://obsidian.md/images/publish-example-dark.png",
"totalBytes": 213853,
"wastedBytes": 196031.91666666666,
"cacheLifetimeMs": 600000
},
{
"url": "https://obsidian.md/pixi.min.js",
"totalBytes": 145755,
"wastedBytes": 133608.75,
"cacheLifetimeMs": 600000
},
{
"url": "https://obsidian.md/images/home-wiki-hume.png",
"totalBytes": 49269,
"wastedBytes": 45163.25,
"cacheLifetimeMs": 600000
},
{
"url": "https://obsidian.md/tailwind.css?v=9d5102ea",
"totalBytes": 34658,
"wastedBytes": 31769.833333333332,
"cacheLifetimeMs": 600000
},
{
"url": "https://obsidian.md/images/home-spinoza.png",
"totalBytes": 33565,
"wastedBytes": 30767.916666666664,
"cacheLifetimeMs": 600000
},
{
"url": "https://obsidian.md/static.js?v=aa730ae0",
"totalBytes": 15886,
"wastedBytes": 14562.166666666666,
"cacheLifetimeMs": 600000
},
{
"url": "https://obsidian.md/graph.js?v=2",
"totalBytes": 10219,
"wastedBytes": 9367.416666666666,
"cacheLifetimeMs": 600000
},
{
"url": "https://obsidian.md/images/home-descartes.jpg",
"totalBytes": 6001,
"wastedBytes": 5500.916666666666,
"cacheLifetimeMs": 600000
},
{
"url": "https://obsidian.md/images/obsidian-logo-gradient.svg",
"totalBytes": 2050,
"wastedBytes": 1879.1666666666665,
"cacheLifetimeMs": 600000
},
{
"url": "https://obsidian.md/download.js",
"totalBytes": 1313,
"wastedBytes": 1203.5833333333333,
"cacheLifetimeMs": 600000
}
],
"headings": [
{
"key": "url",
"label": "Request",
"valueType": "url"
},
{
"key": "cacheLifetimeMs",
"label": "Cache TTL",
"valueType": "ms",
"displayUnit": "duration"
},
{
"key": "totalBytes",
"label": "Transfer Size",
"valueType": "bytes",
"displayUnit": "kb",
"granularity": 1
}
],
"sortedBy": [
"wastedBytes"
],
"debugData": {
"type": "debugdata",
"wastedBytes": 469854.9166666667
},
"skipSumming": [
"cacheLifetimeMs"
]
}Improve image delivery
Est savings of 273 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://obsidian.md/images/publish-example-dark.png",
"node": {
"lhId": "page-0-IMG",
"path": "1,HTML,1,BODY,8,DIV,1,DIV,0,DIV,0,DIV,0,IMG",
"type": "node",
"snippet": "<img src=\"/images/publish-example-dark.png\" alt=\"Example of Obsidian Help site powered by Obsidian Publish\" class=\"mb-[-12%] rounded-xl shadow-2xl ring-1 ring-white/20\" width=\"2899\" height=\"1757\">",
"selector": "div.relative > div.container > div.w-[48rem] > img.mb-[-12%]",
"nodeLabel": "Example of Obsidian Help site powered by Obsidian Publish",
"boundingRect": {
"top": 6524,
"left": 21,
"right": 789,
"width": 768,
"bottom": 6990,
"height": 465
}
},
"subItems": {
"type": "subitems",
"items": [
{
"reason": "This image file is larger than it needs to be (2899x1757) for its displayed dimensions (768x465). Use responsive images to reduce the image download size.",
"wastedBytes": 198142
}
]
},
"totalBytes": 213097,
"wastedBytes": 198142
},
{
"url": "https://obsidian.md/images/home-wiki-hume.png",
"node": {
"lhId": "page-1-IMG",
"path": "1,HTML,1,BODY,6,DIV,0,DIV,0,DIV,1,DIV,2,DIV,1,DIV,0,DIV,8,DIV,0,IMG",
"type": "node",
"snippet": "<img src=\"/images/home-wiki-hume.png\" width=\"120\" height=\"200\" alt=\"Wikipedia page about David Hume embedded in Obsidian Canvas\" class=\"max-w-none\">",
"selector": "div.md:h-96 > div.mock-mirror > div.bg-white > img.max-w-none",
"nodeLabel": "Wikipedia page about David Hume embedded in Obsidian Canvas",
"boundingRect": {
"top": 3743,
"left": 382,
"right": 502,
"width": 120,
"bottom": 3943,
"height": 200
}
},
"subItems": {
"type": "subitems",
"items": [
{
"reason": "Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image's download size.",
"wastedBytes": 23828
},
{
"reason": "This image file is larger than it needs to be (300x500) for its displayed dimensions (120x200). Use responsive images to reduce the image download size.",
"wastedBytes": 41016
}
]
},
"totalBytes": 48828,
"wastedBytes": 44828
},
{
"url": "https://obsidian.md/images/home-spinoza.png",
"node": {
"lhId": "page-2-IMG",
"path": "1,HTML,1,BODY,6,DIV,0,DIV,0,DIV,1,DIV,2,DIV,1,DIV,0,DIV,7,DIV,0,IMG",
"type": "node",
"snippet": "<img src=\"/images/home-spinoza.png\" width=\"68\" height=\"83\" alt=\"Image of Baruch Spinoza embedded in Obsidian Canvas\" class=\"max-w-none\">",
"selector": "div.md:h-96 > div.mock-mirror > div.cursor-grab > img.max-w-none",
"nodeLabel": "Image of Baruch Spinoza embedded in Obsidian Canvas",
"boundingRect": {
"top": 3948,
"left": 347,
"right": 415,
"width": 68,
"bottom": 4032,
"height": 83
}
},
"subItems": {
"type": "subitems",
"items": [
{
"reason": "Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image's download size.",
"wastedBytes": 24748
},
{
"reason": "This image file is larger than it needs to be (200x245) for its displayed dimensions (68x83). Use responsive images to reduce the image download size.",
"wastedBytes": 29110
}
]
},
"totalBytes": 32915,
"wastedBytes": 31971
},
{
"url": "https://obsidian.md/images/home-descartes.jpg",
"node": {
"lhId": "page-3-IMG",
"path": "1,HTML,1,BODY,6,DIV,0,DIV,0,DIV,1,DIV,2,DIV,1,DIV,0,DIV,6,DIV,0,IMG",
"type": "node",
"snippet": "<img src=\"/images/home-descartes.jpg\" width=\"68\" height=\"83\" alt=\"Image of Rene Descartes embedded in Obsidian Canvas\" class=\"max-w-none\">",
"selector": "div.md:h-96 > div.mock-mirror > div.cursor-grab > img.max-w-none",
"nodeLabel": "Image of Rene Descartes embedded in Obsidian Canvas",
"boundingRect": {
"top": 3948,
"left": 267,
"right": 335,
"width": 68,
"bottom": 4032,
"height": 83
}
},
"subItems": {
"type": "subitems",
"items": [
{
"reason": "This image file is larger than it needs to be (200x245) for its displayed dimensions (68x83). Use responsive images to reduce the image download size.",
"wastedBytes": 4856
}
]
},
"totalBytes": 5491,
"wastedBytes": 4856
}
],
"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": 279797
}
}测试环境与原始指标
{
"finalUrl": "https://obsidian.md/",
"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": 2591.8465
},
{
"id": "cumulative-layout-shift",
"unit": "unitless",
"value": 0.0004326092795076125
},
{
"id": "total-blocking-time",
"unit": "millisecond",
"value": 132.49999999999977
},
{
"id": "first-contentful-paint",
"unit": "millisecond",
"value": 1250.8465
},
{
"id": "speed-index",
"unit": "millisecond",
"value": 1824.134038104359
}
]
}01 / 值得借鉴
好设计，具体好在哪
用工作区证明思考工具
笔记正文与关系图同屏，具体呈现文字和关联知识的两种视角。
单一强调色维持清晰焦点
紫色按钮与品牌小标记呼应，其余区域用黑灰层次和白字组织。
02 / 下一步
值得继续打磨的地方
- 01
窄屏需要明显的平台选择
390px 快照仍显示 macOS 下载文案，而更多平台入口不如桌面明显；该采集保持桌面浏览器身份，仅验证窄屏布局。
在窄屏也保留可见的平台选择入口，并用真实 iOS、Android 用户代理另行验证下载路由，不能仅凭窗口宽度判定设备。
03 / 设计语言
把气质拆成可复用的参数
色彩
背景
#0f0f0f文字
#eeeeee字体与尺度
- 标题字体
- Inter
- 正文字体
- Inter
- 标题 / 正文
- 60px / 16px
间距与形状
- 区块间距
- —
- 组件内距
- —
- 卡片圆角
- —
- 按钮圆角
- 8px
参数来自页面元素采样，空值表示未取得；不将单个元素的参数当作全站规范。
04 / 检查依据
观察与实测依据
数据来自同次页面采集；字体、圆角和间距为具体元素采样，不代表全站唯一设计规范。空值为未取得。HTML 为源码体积，不是压缩传输量；脚本数为 DOM 标签数，不是请求数。
转化1 项观察
窄屏需要明显的平台选择
390px 快照仍显示 macOS 下载文案，而更多平台入口不如桌面明显；该采集保持桌面浏览器身份，仅验证窄屏布局。
在窄屏也保留可见的平台选择入口，并用真实 iOS、Android 用户代理另行验证下载路由，不能仅凭窗口宽度判定设备。
mobile.png: macOS download label at 390px
上线1 项观察
没有 Content-Security-Policy
CSP 是限制脚本源的标准做法。vibe 页面常常什么都加载，包括被注入的脚本。
先开 report-only CSP，再收成 default-src 'self' 和明确的 script-src。
content-security-policy missing
链接分享预览
Obsidian - Sharpen your thinking
The free and flexible app for your private thoughts.
05 / 开始动手
把下一步，交给你的 AI
优化指令用于调整这个页面；设计指令用于借鉴它的视觉语言。「做同款」会附带截图与实施步骤。复制后粘贴到你的代码助手中。
查看完整指令
请基于 https://obsidian.md 的 2026-09-05T03:24:48.360Z 页面快照优化当前项目。先确认当前实现与快照差异，不要把已变化的内容重新改回旧版。
设计基线
导航后用 Sharpen your thinking 与简短隐私定位建立主题，下载按钮为首要动作；主视觉将笔记侧栏、正文、关系图和手机叠在一起，后续展开本地文件、插件、同步与发布等能力。手机保留标题和下载动作，但桌面界面使用裁切展示。参考深色层次和单一强调色。
{
"colors": [
{
"role": "bg",
"hex": "#0f0f0f"
},
{
"role": "ink",
"hex": "#eeeeee"
}
],
"fonts": {
"body": "Inter",
"display": "Inter",
"stack": [
"ui-sans-serif"
]
},
"radius": {
"button": "8px",
"card": "",
"field": "0px"
},
"space": {
"section": "",
"card": ""
},
"type": {
"h1": "60px",
"body": "16px",
"weight": "600",
"lineHeight": "24px",
"letterSpacing": "-1.2px"
}
}
数据来自同次页面采集；字体、圆角和间距为具体元素采样，不代表全站唯一设计规范。空值为未取得。HTML 为源码体积，不是压缩传输量；脚本数为 DOM 标签数，不是请求数。
执行事项
1. 窄屏需要明显的平台选择
在窄屏也保留可见的平台选择入口，并用真实 iOS、Android 用户代理另行验证下载路由，不能仅凭窗口宽度判定设备。
依据: mobile.png: macOS download label at 390px
2. 没有 Content-Security-Policy
先开 report-only CSP，再收成 default-src 'self' 和明确的 script-src。
依据: content-security-policy missing
验收
- 在 1440×900 和 390×844 分别核对文字、布局和主要操作“Get Obsidian for macOS”。
- 保留已有品牌、登录和业务链路，不从静态截图推断交互故障。
- 只修复有证据的项；涉及安全响应头时先用报告模式验证现有资源及认证兼容性。
- 对比修改前后的截图，并执行相关功能测试。不要声称未经测试的功能已通过。