Max Potential First Input Delay
1,940 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.
页面构成与技术指标
正文
924
操作候选
39
图片
25
HTML
661 KB
文案
标题字数
35
摘要字数
102
H1
2
H2
8
动作
主要入口
Create account
表单
0/ 4 输入
站内链接
87
站外链接
7
安全与页面元信息
HTTPS
有
HSTS
有
CSP
有
nosniff
无
viewport
有
图标
有
JSON-LD
无
统计
无
构成
Next.js / Tailwind
脚本
160 ext / 6 inline
Alt
13 missing
语言
en
第三方域
2
Lighthouse
移动端模拟 · 性能评分
32 / 100
2026-09-05 · 实验室数据，非真实用户体验数据。
查看详情
移动端模拟 · 实验室数据，非真实用户体验数据
2026-09-05T03:58:28.430Z · Lighthouse 13.4.1
性能32/ 100
可访问性93/ 100
最佳实践77/ 100
SEO100/ 100
LCP · 主要内容出现27,446 ms
CLS · 布局偏移0.000
TBT · 主线程阻塞2,971 ms
FCP · 首次内容绘制3,152 ms
SI · 视觉加载速度9,490 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": "other",
"description": "Not signed in with the identity provider.",
"sourceLocation": {
"url": "https://replit.com/",
"line": 0,
"type": "source-location",
"column": 0,
"urlProvider": "network"
}
}
],
"headings": [
{
"key": "sourceLocation",
"label": "Source",
"valueType": "source-location"
},
{
"key": "description",
"label": "Description",
"valueType": "code"
}
]
}Reduce initial server response time
Root document took 1,050 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://replit.com/",
"responseTime": 1050
}
],
"headings": [
{
"key": "url",
"label": "URL",
"valueType": "url"
},
{
"key": "responseTime",
"label": "Time Spent",
"valueType": "timespanMs"
}
],
"overallSavingsMs": 950
}Time to Interactive
31.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.
Uses deprecated APIs
3 warnings found
Deprecated APIs will eventually be removed from the browser. Learn more about deprecated APIs.
对应元素与资源
{
"type": "table",
"items": [
{
"value": "The Shared Storage API is deprecated and will be removed in a future release.",
"source": {
"url": "https://replit.com/cdn-cgi/challenge-platform/scripts/jsd/main.js",
"line": 0,
"type": "source-location",
"column": 11542,
"urlProvider": "network"
},
"subItems": {
"type": "subitems",
"items": [
{
"url": "https://chromestatus.com/feature/5076349064708096",
"text": "Check the feature status page for more details.",
"type": "link"
}
]
}
},
{
"value": "StorageType.persistent is deprecated. Please use standardized navigator.storage instead.",
"source": {
"url": "https://replit.com/cdn-cgi/challenge-platform/scripts/jsd/main.js",
"line": 0,
"type": "source-location",
"column": 11542,
"urlProvider": "network"
},
"subItems": {
"type": "subitems",
"items": [
{
"url": "https://chromestatus.com/feature/5176235376246784",
"text": "Check the feature status page for more details.",
"type": "link"
},
{
"url": "https://chromiumdash.appspot.com/schedule",
"text": "This change will go into effect with milestone 106.",
"type": "link"
}
]
}
},
{
"value": "The Protected Audience API is deprecated and will be removed in a future release.",
"source": {
"url": "https://replit.com/cdn-cgi/challenge-platform/scripts/jsd/main.js",
"line": 0,
"type": "source-location",
"column": 11542,
"urlProvider": "network"
}
}
],
"headings": [
{
"key": "value",
"label": "Deprecation / Warning",
"valueType": "text"
},
{
"key": "source",
"label": "Source",
"valueType": "source-location"
}
]
}Minimize main-thread work
8.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": 6043.055999999556,
"groupLabel": "Script Evaluation"
},
{
"group": "other",
"duration": 733.0560000000045,
"groupLabel": "Other"
},
{
"group": "styleLayout",
"duration": 730.7639999999985,
"groupLabel": "Style & Layout"
},
{
"group": "scriptParseCompile",
"duration": 721.9480000000011,
"groupLabel": "Script Parsing & Compilation"
},
{
"group": "paintCompositeRender",
"duration": 205.24799999999794,
"groupLabel": "Rendering"
},
{
"group": "parseHTML",
"duration": 91.152,
"groupLabel": "Parse HTML & CSS"
},
{
"group": "garbageCollection",
"duration": 35.204000000000015,
"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
6.0 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://replit.com/cdn-cgi/challenge-platform/scripts/jsd/main.js",
"total": 3879.7599999999625,
"scripting": 3782.8199999999624,
"scriptParseCompile": 1.52
},
{
"url": "https://cdn.replit.com/_next/static/chunks/001weln5n2jwt.js",
"total": 1208.5440000000365,
"scripting": 940.6920000000365,
"scriptParseCompile": 7.772
},
{
"url": "https://replit.com/",
"total": 969.6639999999982,
"scripting": 21.00399999999998,
"scriptParseCompile": 3.1240000000000006
},
{
"url": "https://cdn.replit.com/_next/static/chunks/turbopack-40j2iz8b4g3hi.js",
"total": 517.5040000000079,
"scripting": 513.1120000000079,
"scriptParseCompile": 0.9
},
{
"url": "https://cdn.replit.com/_next/static/chunks/1vtpn4b_ytnp9.js",
"total": 459.0200000000036,
"scripting": 361.7080000000036,
"scriptParseCompile": 97.076
},
{
"url": "Unattributable",
"total": 363.7439999999977,
"scripting": 32.703999999999986,
"scriptParseCompile": 0
},
{
"url": "https://cdn.replit.com/_next/static/chunks/turbopack-3dtxrg33e4tpn.js",
"total": 173.56799999999956,
"scripting": 166.17599999999956,
"scriptParseCompile": 0.884
},
{
"url": "https://replit.com/__/auth/iframe.js",
"total": 77.47200000000004,
"scripting": 50.66000000000003,
"scriptParseCompile": 21.596
},
{
"url": "https://cdn.replit.com/_next/static/chunks/2swczkvxb182l.js",
"total": 73.59199999999994,
"scripting": 17.66799999999997,
"scriptParseCompile": 4.34
}
],
"summary": {
"wastedMs": 6023.75600000001
},
"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"
]
}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-BUTTON",
"path": "1,HTML,1,BODY,1,DIV,6,DIV,0,HEADER,0,NAV,0,UL,1,DIV,0,DIV,1,BUTTON",
"type": "node",
"snippet": "<button type=\"button\" data-cy=\"mobile-header-signup-button\" class=\"MarketingHeader-module__S9ztCG__signupButton MarketingHeader-module__S9ztC…\">",
"selector": "ul.MarketingHeader-module__S9ztCG__content > div.flex > div.flex > button.MarketingHeader-module__S9ztCG__signupButton",
"nodeLabel": "Create account",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 3.3 (foreground color: #ff3c00, background color: #faf6f1, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 19,
"left": 237,
"right": 348,
"width": 111,
"bottom": 49,
"height": 30
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-1-HEADER",
"path": "1,HTML,1,BODY,1,DIV,6,DIV,0,HEADER",
"type": "node",
"snippet": "<header role=\"banner\" class=\"flex box-border min-h-0 min-w-0 border-0 border-solid view-outline-none fl…\">",
"selector": "body > div#__next > div.flex > header.flex",
"nodeLabel": "Log in\nCreate account\nProducts\nCREATE\nDesign\nApps & Websites\nSlides\nPLATFORM\nAg…",
"boundingRect": {
"top": 0,
"left": 0,
"right": 412,
"width": 412,
"bottom": 67,
"height": 67
}
}
}
]
}
},
{
"node": {
"lhId": "1-2-P",
"path": "1,HTML,1,BODY,1,DIV,6,DIV,3,DIV,0,DIV,0,DIV,1,P",
"type": "node",
"snippet": "<p class=\"HeroBentoGrid-module__wCfISG__heroSubtitle\">",
"selector": "div.HeroBentoGrid-module__wCfISG__scrollContainer > div.flex > div.flex > p.HeroBentoGrid-module__wCfISG__heroSubtitle",
"nodeLabel": "Maximize Making on Replit",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 2.81 (foreground color: #949494, background color: #faf6f1, font size: 18.0pt (24px), font weight: normal). Expected contrast ratio of 3:1",
"boundingRect": {
"top": 947,
"left": 75,
"right": 337,
"width": 262,
"bottom": 967,
"height": 20
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-3-DIV",
"path": "1,HTML,1,BODY,1,DIV,6,DIV",
"type": "node",
"snippet": "<div class=\"flex box-border min-h-0 min-w-0 border-0 border-solid view-outline-none fl…\">",
"selector": "body > div#__next > div.flex",
"nodeLabel": "Log in\nCreate account\nProducts\nCREATE\nDesign\nApps & Websites\nSlides\nPLATFORM\nAg…",
"boundingRect": {
"top": 0,
"left": 0,
"right": 412,
"width": 412,
"bottom": 8389,
"height": 8389
}
}
}
]
}
},
{
"node": {
"lhId": "1-4-DIV",
"path": "1,HTML,1,BODY,1,DIV,6,DIV,3,DIV,0,DIV,1,DIV,0,DIV,0,DIV,0,DIV,1,DIV,1,DIV",
"type": "node",
"snippet": "<div class=\"flex box-border min-h-0 min-w-0 border-0 border-solid view-outline-none fl…\" style=\"--useView--gap:16px\">",
"selector": "div.flex > div.flex > div.flex > div.flex",
"nodeLabel": "Power",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 1.88 (foreground color: #ffffff, background color: #f9aa8b, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 1072,
"left": 213,
"right": 372,
"width": 159,
"bottom": 1108,
"height": 36
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-5-DIV",
"path": "1,HTML,1,BODY,1,DIV,6,DIV,3,DIV,0,DIV,1,DIV,0,DIV,0,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"flex box-border min-h-0 min-w-0 border-0 border-solid view-outline-none fl…\" style=\"--useView--gap:24px\">",
"selector": "div.flex > div.flex > div.flex > div.flex",
"nodeLabel": "FREE MODE\n\nCreate without token costs\n\nBrainstorm and create at no cost.\n\nFree\n…",
"boundingRect": {
"top": 991,
"left": 16,
"right": 396,
"width": 380,
"bottom": 1189,
"height": 198
}
}
}
]
}
},
{
"node": {
"lhId": "1-6-DIV",
"path": "1,HTML,1,BODY,1,DIV,6,DIV,3,DIV,0,DIV,1,DIV,0,DIV,0,DIV,0,DIV,1,DIV,2,DIV",
"type": "node",
"snippet": "<div class=\"flex box-border min-h-0 min-w-0 border-0 border-solid view-outline-none fl…\" style=\"--useView--gap:16px\">",
"selector": "div.flex > div.flex > div.flex > div.flex",
"nodeLabel": "Max",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 1.88 (foreground color: #ffffff, background color: #f9aa8b, font size: 15.0pt (20px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 1129,
"left": 213,
"right": 372,
"width": 159,
"bottom": 1165,
"height": 36
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-5-DIV",
"path": "1,HTML,1,BODY,1,DIV,6,DIV,3,DIV,0,DIV,1,DIV,0,DIV,0,DIV,0,DIV",
"type": "node",
"snippet": "<div class=\"flex box-border min-h-0 min-w-0 border-0 border-solid view-outline-none fl…\" style=\"--useView--gap:24px\">",
"selector": "div.flex > div.flex > div.flex > div.flex",
"nodeLabel": "FREE MODE\n\nCreate without token costs\n\nBrainstorm and create at no cost.\n\nFree\n…",
"boundingRect": {
"top": 991,
"left": 16,
"right": 396,
"width": 380,
"bottom": 1189,
"height": 198
}
}
}
]
}
},
{
"node": {
"lhId": "1-7-A",
"path": "1,HTML,1,BODY,1,DIV,6,DIV,3,DIV,0,DIV,2,DIV,0,A",
"type": "node",
"snippet": "<a href=\"/signup\" data-analytics-id=\"try_free_mode_cta\" class=\"HeroBentoGrid-module__wCfISG__ctaButton\">",
"selector": "div.HeroBentoGrid-module__wCfISG__scrollContainer > div.flex > div.flex > a.HeroBentoGrid-module__wCfISG__ctaButton",
"nodeLabel": "Try Free Mode",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 3.3 (foreground color: #ff3c00, background color: #faf6f1, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 1867,
"left": 37,
"right": 197,
"width": 160,
"bottom": 1910,
"height": 43
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-3-DIV",
"path": "1,HTML,1,BODY,1,DIV,6,DIV",
"type": "node",
"snippet": "<div class=\"flex box-border min-h-0 min-w-0 border-0 border-solid view-outline-none fl…\">",
"selector": "body > div#__next > div.flex",
"nodeLabel": "Log in\nCreate account\nProducts\nCREATE\nDesign\nApps & Websites\nSlides\nPLATFORM\nAg…",
"boundingRect": {
"top": 0,
"left": 0,
"right": 412,
"width": 412,
"bottom": 8389,
"height": 8389
}
}
}
]
}
},
{
"node": {
"lhId": "1-8-DIV",
"path": "1,HTML,1,BODY,1,DIV,6,DIV,5,DIV,0,DIV,0,DIV,2,DIV,0,DIV,0,DIV,0,DIV,0,DIV,0,DIV,1,DIV,0,DIV,2,DIV",
"type": "node",
"snippet": "<div class=\"PlatformCards-module__Z0omxa__agentPublishBtn\">",
"selector": "div.flex > div.PlatformCards-module__Z0omxa__cardIllustration > div.PlatformCards-module__Z0omxa__agentIllustration > div.PlatformCards-module__Z0omxa__agentPublishBtn",
"nodeLabel": "Publish",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #ffffff, background color: #ff3c00, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 3406,
"left": 262,
"right": 351,
"width": 89,
"bottom": 3444,
"height": 38
}
}
},
{
"node": {
"lhId": "1-9-SPAN",
"path": "1,HTML,1,BODY,1,DIV,6,DIV,6,DIV,0,DIV,0,DIV,1,DIV,0,DIV,0,DIV,0,SPAN",
"type": "node",
"snippet": "<span class=\"TestimonialsSectionMobile-module__oE5GEW__headerLabel\">",
"selector": "div.TestimonialsSection-module__Qc-Laq__mobileLayout > div.TestimonialsSectionMobile-module__oE5GEW__root > div.flex > span.TestimonialsSectionMobile-module__oE5GEW__headerLabel",
"nodeLabel": "ENDORSED BY INNOVATORS",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 3.3 (foreground color: #ff3c00, background color: #faf6f1, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 3872,
"left": 112,
"right": 300,
"width": 189,
"bottom": 3887,
"height": 16
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-3-DIV",
"path": "1,HTML,1,BODY,1,DIV,6,DIV",
"type": "node",
"snippet": "<div class=\"flex box-border min-h-0 min-w-0 border-0 border-solid view-outline-none fl…\">",
"selector": "body > div#__next > div.flex",
"nodeLabel": "Log in\nCreate account\nProducts\nCREATE\nDesign\nApps & Websites\nSlides\nPLATFORM\nAg…",
"boundingRect": {
"top": 0,
"left": 0,
"right": 412,
"width": 412,
"bottom": 8389,
"height": 8389
}
}
}
]
}
},
{
"node": {
"lhId": "1-10-SPAN",
"path": "1,HTML,1,BODY,1,DIV,6,DIV,7,DIV,0,DIV,0,DIV,1,FIELDSET,2,LABEL,1,DIV,1,SPAN",
"type": "node",
"snippet": "<span class=\"PricingShowcase-module__4e3f_q__periodToggleSave\">",
"selector": "fieldset.flex > label.ButtonGroup2-module__XpaxrW__buttonGroupItem > div.flex > span.PricingShowcase-module__4e3f_q__periodToggleSave",
"nodeLabel": "Save 10%",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 3.46 (foreground color: #ff3c00, background color: #fcfcfb, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 4761,
"left": 181,
"right": 234,
"width": 54,
"bottom": 4777,
"height": 16
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-11-LABEL",
"path": "1,HTML,1,BODY,1,DIV,6,DIV,7,DIV,0,DIV,0,DIV,1,FIELDSET,2,LABEL",
"type": "node",
"snippet": "<label data-ruic=\"ButtonGroup2Item\" class=\"ButtonGroup2-module__XpaxrW__buttonGroupItem relative flex flex-row items-…\" data-colorway=\"control\">",
"selector": "div.flex > div.flex > fieldset.flex > label.ButtonGroup2-module__XpaxrW__buttonGroupItem",
"nodeLabel": "Yearly\nSave 10%",
"boundingRect": {
"top": 4753,
"left": 121,
"right": 251,
"width": 131,
"bottom": 4785,
"height": 32
}
}
}
]
}
},
{
"node": {
"lhId": "1-12-A",
"path": "1,HTML,1,BODY,1,DIV,6,DIV,9,DIV,0,DIV,1,A",
"type": "node",
"snippet": "<a href=\"https://replit.com/signup\" class=\"FooterCta-module__EpEToa__button FooterCta-module__EpEToa__buttonCompact\">",
"selector": "div.flex > div.flex > div.flex > a.FooterCta-module__EpEToa__button",
"nodeLabel": "Get started for free",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 3.56 (foreground color: #ffffff, background color: #ff3c00, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 7217,
"left": 112,
"right": 300,
"width": 188,
"bottom": 7269,
"height": 52
}
}
},
{
"node": {
"lhId": "1-13-SPAN",
"path": "1,HTML,1,BODY,1,DIV,10,DIV,0,DIV,1,DIV,0,BUTTON,0,SPAN,0,SPAN",
"type": "node",
"snippet": "<span class=\"box-border min-h-0 min-w-0 border-0 border-solid view-outline-none flex-co…\">",
"selector": "div.flex > button#react-aria478145690-:ra: > span.flex > span.box-border",
"nodeLabel": "Accept",
"explanation": "Fix any of the following:\n Element has insufficient color contrast of 3.4 (foreground color: #f7fbff, background color: #0f87ff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
"boundingRect": {
"top": 763,
"left": 267,
"right": 306,
"width": 38,
"bottom": 781,
"height": 18
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-14-BUTTON",
"path": "1,HTML,1,BODY,1,DIV,10,DIV,0,DIV,1,DIV,0,BUTTON",
"type": "node",
"snippet": "<button data-ruic=\"Button\" data-analytics-instrumented=\"\" data-analytics-id=\"cookie_consent_accept_button\" type=\"button\" tabindex=\"0\" data-react-aria-pressable=\"true\" class=\"rounded-md useRuiDiagnostics-module__sFi-rG__interactive custom-focus-not-…\" data-rac=\"\" id=\"react-aria478145690-:ra:\">",
"selector": "div.flex > div.flex > div.flex > button#react-aria478145690-:ra:",
"nodeLabel": "Accept",
"boundingRect": {
"top": 758,
"left": 258,
"right": 315,
"width": 56,
"bottom": 786,
"height": 28
}
}
}
]
}
}
],
"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"
}
}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-15-UL",
"path": "1,HTML,1,BODY,1,DIV,6,DIV,0,HEADER,0,NAV,0,UL",
"type": "node",
"snippet": "<ul class=\"MarketingHeader-module__S9ztCG__content\">",
"selector": "div.flex > header.flex > nav.flex > ul.MarketingHeader-module__S9ztCG__content",
"nodeLabel": "Log in\nCreate account",
"explanation": "Fix all of the following:\n List element has direct children that are not allowed: div",
"boundingRect": {
"top": 0,
"left": 24,
"right": 388,
"width": 364,
"bottom": 67,
"height": 67
}
},
"subItems": {
"type": "subitems",
"items": [
{
"relatedNode": {
"lhId": "1-16-DIV",
"path": "1,HTML,1,BODY,1,DIV,6,DIV,0,HEADER,0,NAV,0,UL,0,DIV",
"type": "node",
"snippet": "<div class=\"flex box-border min-h-0 min-w-0 border-0 border-solid view-outline-none fl…\" style=\"--useView--gap:24px\">",
"selector": "header.flex > nav.flex > ul.MarketingHeader-module__S9ztCG__content > div.flex",
"nodeLabel": "Replit",
"boundingRect": {
"top": 16,
"left": 24,
"right": 146,
"width": 122,
"bottom": 51,
"height": 35
}
}
},
{
"relatedNode": {
"lhId": "1-17-DIV",
"path": "1,HTML,1,BODY,1,DIV,6,DIV,0,HEADER,0,NAV,0,UL,1,DIV",
"type": "node",
"snippet": "<div class=\"flex box-border min-h-0 min-w-0 border-0 border-solid view-outline-none fl…\" style=\"--useView--gap:8px\">",
"selector": "header.flex > nav.flex > ul.MarketingHeader-module__S9ztCG__content > div.flex",
"nodeLabel": "Log in\nCreate account",
"boundingRect": {
"top": 19,
"left": 178,
"right": 348,
"width": 170,
"bottom": 49,
"height": 30
}
}
},
{
"relatedNode": {
"lhId": "1-18-DIV",
"path": "1,HTML,1,BODY,1,DIV,6,DIV,0,HEADER,0,NAV,0,UL,2,DIV",
"type": "node",
"snippet": "<div class=\"flex box-border min-h-0 min-w-0 border-0 border-solid view-outline-none fl…\" style=\"--useView--gap:12px\">",
"selector": "header.flex > nav.flex > ul.MarketingHeader-module__S9ztCG__content > div.flex",
"nodeLabel": "Toggle mobile menu",
"boundingRect": {
"top": 18,
"left": 356,
"right": 388,
"width": 32,
"bottom": 50,
"height": 32
}
}
}
]
}
}
],
"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"
}
}Avoid enormous network payloads
Total size was 5,188 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://cdn.replit.com/product-cms/template-library/manifest.json",
"totalBytes": 553616
},
{
"url": "https://replit.com/public/fonts/ReplitDiatypeVariable.woff2",
"totalBytes": 331454
},
{
"url": "https://replit.com/public/fonts/ABCDiatypePlusVariable-Regular.woff2",
"totalBytes": 231087
},
{
"url": "https://replit.com/public/fonts/ReplitDiatypeMonoVariable.woff2",
"totalBytes": 173566
},
{
"url": "https://cdn.replit.com/_next/static/chunks/1vtpn4b_ytnp9.js",
"totalBytes": 159601
},
{
"url": "https://elements.stytch.com/telemetry.js",
"totalBytes": 150270
},
{
"url": "https://cdn.replit.com/product-cms/template-library/template.art-poster-7204/frame-art-poster-7204-preview.jpg",
"totalBytes": 111464
},
{
"url": "https://cdn.replit.com/_next/static/chunks/31k2ahjb1ae7x.js",
"totalBytes": 103910
},
{
"url": "https://accounts.google.com/gsi/client",
"totalBytes": 101495
},
{
"url": "https://cdn.replit.com/_next/static/chunks/2bc4_5ulysqe2.js",
"totalBytes": 98076
}
],
"headings": [
{
"key": "url",
"label": "URL",
"valueType": "url"
},
{
"key": "totalBytes",
"label": "Transfer Size",
"valueType": "bytes"
}
],
"sortedBy": [
"totalBytes"
]
}Reduce unused CSS
Est savings of 14 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://cdn.replit.com/_next/static/chunks/1k5wmja5w4rsd.css",
"totalBytes": 20780,
"wastedBytes": 14411,
"wastedPercent": 69.35147245482966
}
],
"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": 150,
"LCP": 0
}
},
"overallSavingsMs": 0,
"overallSavingsBytes": 14411
}Reduce unused JavaScript
Est savings of 329 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://elements.stytch.com/telemetry.js",
"totalBytes": 117502,
"wastedBytes": 117347,
"wastedPercent": 99.86816210852916
},
{
"url": "https://accounts.google.com/gsi/client",
"totalBytes": 89212,
"wastedBytes": 66725,
"wastedPercent": 74.79353364962222
},
{
"url": "https://replit.com/__/auth/iframe.js",
"totalBytes": 94734,
"wastedBytes": 58207,
"wastedPercent": 61.44265068343565
},
{
"url": "https://cdn.replit.com/_next/static/chunks/2bc4_5ulysqe2.js",
"totalBytes": 64555,
"wastedBytes": 43059,
"wastedPercent": 66.70099240364785
},
{
"url": "https://cdn.replit.com/_next/static/chunks/1w2hwoeoatxuq.js",
"totalBytes": 28734,
"wastedBytes": 28400,
"wastedPercent": 98.83843150714317
},
{
"url": "https://cdn.replit.com/_next/static/chunks/0qw_7d1j9db_6.js",
"totalBytes": 47783,
"wastedBytes": 23210,
"wastedPercent": 48.57456877105751
}
],
"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": 300
}
},
"overallSavingsMs": 300,
"overallSavingsBytes": 336948
}测试环境与原始指标
{
"finalUrl": "https://replit.com/",
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/151.0.0.0 Safari/537.36",
"formFactor": "mobile",
"throttlingMethod": "simulate",
"throttling": {
"rttMs": 150,
"throughputKbps": 1638.4,
"requestLatencyMs": 562.5,
"uploadThroughputKbps": 675,
"cpuSlowdownMultiplier": 4,
"downloadThroughputKbps": 1474.5600000000002
},
"metrics": [
{
"id": "largest-contentful-paint",
"unit": "millisecond",
"value": 27446.29349999998
},
{
"id": "cumulative-layout-shift",
"unit": "unitless",
"value": 0
},
{
"id": "total-blocking-time",
"unit": "millisecond",
"value": 2971
},
{
"id": "first-contentful-paint",
"unit": "millisecond",
"value": 3152.436499999999
},
{
"id": "speed-index",
"unit": "millisecond",
"value": 9489.570231529337
}
]
}01 / 值得借鉴
好设计，具体好在哪
从提问直接进入创作
What will you build? 下方就是输入框，用户无需先穿过一组功能介绍再寻找开始入口。
示例说明可以创建什么
类型图标和 Hiring tracker 等提示词为输入提供上下文，避免只留下空白文本框。
02 / 下一步
值得继续打磨的地方
- 01
把手机输入区向上收拢
手机导航与标题之间留白很大，输入区靠近屏幕下半部，首次访问的 Cookie 面板进一步压缩可见内容。
针对窄屏降低首屏顶部留白，保持标题、说明、输入框的间距关系；同时在显示和关闭 Cookie 面板两种状态检查 390×844 布局。
03 / 设计语言
把气质拆成可复用的参数
色彩
背景
#f6f5f4文字
#37383c强调
#faf6f1字体与尺度
- 标题字体
- ABC Diatype Plus Variable
- 正文字体
- Replit Diatype
- 标题 / 正文
- 64px / 14px
间距与形状
- 区块间距
- 0px
- 组件内距
- —
- 卡片圆角
- —
- 按钮圆角
- 6px
参数来自页面元素采样，空值表示未取得；不将单个元素的参数当作全站规范。
04 / 检查依据
观察与实测依据
数据来自同次页面采集；字体、圆角和间距为具体元素采样，不代表全站唯一设计规范。空值为未取得。HTML 为源码体积，不是压缩传输量；脚本数为 DOM 标签数，不是请求数。
品味1 项观察
把手机输入区向上收拢
中优先级手机导航与标题之间留白很大，输入区靠近屏幕下半部，首次访问的 Cookie 面板进一步压缩可见内容。
针对窄屏降低首屏顶部留白，保持标题、说明、输入框的间距关系；同时在显示和关闭 Cookie 面板两种状态检查 390×844 布局。
mobile.png: large header-to-headline gap and bottom cookie panel
上线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
链接分享预览
AI App and Website Builder
Describe what you want. Replit builds it. Get a working app or website in minutes. No coding required.
05 / 开始动手
把下一步，交给你的 AI
优化指令用于调整这个页面；设计指令用于借鉴它的视觉语言。「做同款」会附带截图与实施步骤。复制后粘贴到你的代码助手中。
查看完整指令
请基于 https://replit.com 的 2026-09-05T02:31:26.840Z 页面快照优化当前项目。先确认当前实现与快照差异，不要把已变化的内容重新改回旧版。
设计基线
居中标题与一句说明之后放输入框，再放产物类型和示例提示词；品牌橙用于边框和行动提示，不把整个页面染成强调色。
{
"colors": [
{
"role": "bg",
"hex": "#f6f5f4"
},
{
"role": "ink",
"hex": "#37383c"
},
{
"role": "accent",
"hex": "#faf6f1"
}
],
"fonts": {
"body": "Replit Diatype",
"display": "ABC Diatype Plus Variable",
"stack": [
"Replit Diatype",
"ABC Diatype Plus Variable",
"ABC Diatype",
"IBM Plex Sans"
]
},
"radius": {
"button": "6px",
"card": "",
"field": "6px"
},
"space": {
"section": "0px",
"card": ""
},
"type": {
"h1": "64px",
"body": "14px",
"weight": "400",
"lineHeight": "normal",
"letterSpacing": "-3.84px"
}
}
数据来自同次页面采集；字体、圆角和间距为具体元素采样，不代表全站唯一设计规范。空值为未取得。HTML 为源码体积，不是压缩传输量；脚本数为 DOM 标签数，不是请求数。
执行事项
1. 把手机输入区向上收拢
针对窄屏降低首屏顶部留白，保持标题、说明、输入框的间距关系；同时在显示和关闭 Cookie 面板两种状态检查 390×844 布局。
依据: mobile.png: large header-to-headline gap and bottom cookie panel
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 分别核对文字、布局和主要操作“Create account”。
- 保留已有品牌、登录和业务链路，不从静态截图推断交互故障。
- 只修复有证据的项；涉及安全响应头时先用报告模式验证现有资源及认证兼容性。
- 对比修改前后的截图，并执行相关功能测试。不要声称未经测试的功能已通过。