https://flashmask.net

Page structure & technical metrics

Words

716

Action candidates

12

Images

14

HTML

34 KB

Copy

Title chars
24
Meta chars
56
H1
2
H2
9

Action

Primary

看广告并导出本次任务免费导出本次任务(无需看广告)

Forms
0/ 2 fields
On-site links
26
Off-site links
6

Security & metadata

HTTPS
yes
HSTS
no
CSP
no
nosniff
yes
viewport
yes
Icon
yes
JSON-LD
no
Analytics
GA4

Page

Scripts
12 ext / 0 inline
Alt
4 missing
Lang
en
Third-party hosts
2

Lighthouse

Simulated mobile · Performance

73 / 100

2026-09-13 · Lab data, not field data.

View details

Simulated mobile · Lab data, not field data
2026-09-13T01:06:58.326Z · Lighthouse 13.4.1

Performance73/ 100
Accessibility96/ 100
Best practices92/ 100
SEO92/ 100
LCP · Largest content6,535 ms
CLS · Layout shift0.004
TBT · Blocking time0 ms
FCP · First content1,765 ms
SI · Speed index4,550 ms

Results vary by server, network and environment, independently of taste/conversion scores. Diagnostics retain Lighthouse wording.

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

Elements & resources
{
  "type": "table",
  "items": [
    {
      "source": "security",
      "description": "Loading the script 'https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495' violates the following Content Security Policy directive: \"script-src 'self' https://vibecafe.ai/telemetry/v1.js\". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback. The action has been blocked.",
      "sourceLocation": {
        "url": "https://flashmask.net/zh/",
        "line": 0,
        "type": "source-location",
        "column": 0,
        "urlProvider": "network"
      }
    }
  ],
  "headings": [
    {
      "key": "sourceLocation",
      "label": "Source",
      "valueType": "source-location"
    },
    {
      "key": "description",
      "label": "Description",
      "valueType": "code"
    }
  ]
}

Minimize main-thread work

2.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 minimize main-thread work

Elements & resources
{
  "type": "table",
  "items": [
    {
      "group": "styleLayout",
      "duration": 984.2879999999999,
      "groupLabel": "Style & Layout"
    },
    {
      "group": "other",
      "duration": 802.5239999999884,
      "groupLabel": "Other"
    },
    {
      "group": "scriptEvaluation",
      "duration": 415.93600000000066,
      "groupLabel": "Script Evaluation"
    },
    {
      "group": "paintCompositeRender",
      "duration": 365.7200000000027,
      "groupLabel": "Rendering"
    },
    {
      "group": "parseHTML",
      "duration": 72.61599999999983,
      "groupLabel": "Parse HTML & CSS"
    },
    {
      "group": "scriptParseCompile",
      "duration": 21.156,
      "groupLabel": "Script Parsing & Compilation"
    },
    {
      "group": "garbageCollection",
      "duration": 7.647999999999996,
      "groupLabel": "Garbage Collection"
    }
  ],
  "headings": [
    {
      "key": "groupLabel",
      "label": "Category",
      "valueType": "text"
    },
    {
      "key": "duration",
      "label": "Time Spent",
      "valueType": "ms",
      "granularity": 1
    }
  ],
  "sortedBy": [
    "duration"
  ]
}

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

Elements & resources
{
  "type": "table",
  "items": [
    {
      "url": "https://flashmask.net/assets/Mac-App-Store-%E4%B8%8B%E8%BD%BD%E5%BE%BD%E6%A0%87-zh-cn.svg",
      "node": {
        "lhId": "1-52-IMG",
        "path": "1,HTML,1,BODY,4,DIV,3,SECTION,0,DIV,6,A,1,IMG",
        "type": "node",
        "snippet": "<img alt=\"在 Mac App Store 下载\" class=\"badge-zh\" src=\"/assets/Mac-App-Store-下载徽标-zh-cn.svg\">",
        "selector": "section.m-section > div#mpricing > a.official-badge > img.badge-zh",
        "nodeLabel": "在 Mac App Store 下载",
        "boundingRect": {
          "top": 1742,
          "left": 49,
          "right": 189,
          "width": 140,
          "bottom": 1782,
          "height": 40
        }
      }
    }
  ],
  "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.

Elements & resources
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-0-SPAN",
        "path": "1,HTML,1,BODY,4,DIV,6,FOOTER,0,DIV,0,DIV,0,DIV,3,SPAN",
        "type": "node",
        "snippet": "<span class=\"soon\" data-i18n=\"footGithub\">",
        "selector": "div.footer-inner > div.footer-top > div.footer-col > span.soon",
        "nodeLabel": "GitHub",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 3.82 (foreground color: #727b69, background color: #efefe7, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 2445,
          "left": 24,
          "right": 164,
          "width": 140,
          "bottom": 2470,
          "height": 25
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-1-FOOTER",
              "path": "1,HTML,1,BODY,4,DIV,6,FOOTER",
              "type": "node",
              "snippet": "<footer class=\"m-footer\">",
              "selector": "body > div#mobilemain > footer.m-footer",
              "nodeLabel": "产品\n网页编辑器\nMac App\nGitHub\n了解\n帮助 / 常见问题\n支持\n法律\n使用条款\n隐私政策\n退出网站统计\n© 2026 331-Works · …",
              "boundingRect": {
                "top": 2330,
                "left": 0,
                "right": 412,
                "width": 412,
                "bottom": 2700,
                "height": 370
              }
            }
          }
        ]
      }
    }
  ],
  "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"
  }
}

Minify CSS

Est savings of 2 KiB

Minifying CSS files can reduce network payload sizes. Learn how to minify CSS.

Elements & resources
{
  "type": "opportunity",
  "items": [
    {
      "url": "https://flashmask.net/site.css",
      "totalBytes": 15904,
      "wastedBytes": 2188,
      "wastedPercent": 13.754541926835294
    }
  ],
  "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": 2188
}

Issues were logged in the `Issues` panel in Chrome Devtools

Issues logged to the `Issues` panel in Chrome Devtools indicate unresolved problems. They can come from network request failures, insufficient security controls, and other browser concerns. Open up the Issues panel in Chrome DevTools for more details on each issue.

Elements & resources
{
  "type": "table",
  "items": [
    {
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "url": "https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495"
          }
        ]
      },
      "issueType": "Content security policy"
    }
  ],
  "headings": [
    {
      "key": "issueType",
      "label": "Issue type",
      "valueType": "text",
      "subItemsHeading": {
        "key": "url",
        "valueType": "url"
      }
    }
  ]
}

robots.txt is not valid

If your robots.txt file is malformed, crawlers may not be able to understand how you want your website to be crawled or indexed. Learn more about robots.txt.

Improve image delivery

Est savings of 544 KiB

Reducing the download time of images can improve the perceived load time of the page and LCP. Learn more about optimizing image size

Elements & resources
{
  "type": "table",
  "items": [
    {
      "url": "https://flashmask.net/assets/%E6%8F%92%E7%94%BB%E7%A4%BA%E4%BE%8B.webp",
      "node": {
        "lhId": "page-0-IMG",
        "path": "1,HTML,1,BODY,4,DIV,0,SECTION,3,SECTION,0,DIV,1,DIV,0,DIV,1,DIV,0,DIV,0,IMG",
        "type": "node",
        "snippet": "<img alt=\"女性插画,头发与衣领衔接处有几根多余线条\" data-i18n-alt=\"sceneImageAlt\" decoding=\"async\" loading=\"lazy\" src=\"/assets/插画示例.webp\">",
        "selector": "div.demo-app > div.demo-app-canvas > div.workflow-picture > img",
        "nodeLabel": "女性插画,头发与衣领衔接处有几根多余线条",
        "boundingRect": {
          "top": -461,
          "left": -589,
          "right": 1559,
          "width": 2147,
          "bottom": 971,
          "height": 1432
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "Increasing the image compression factor could improve this image's download size.",
            "wastedBytes": 308572
          },
          {
            "reason": "This image file is larger than it needs to be (1536x1024) for its displayed dimensions (500x333). Use responsive images to reduce the image download size.",
            "wastedBytes": 510242
          }
        ]
      },
      "totalBytes": 570716,
      "wastedBytes": 542939
    },
    {
      "url": "https://flashmask.net/assets/Flash-Mask-Logo-128.png",
      "node": {
        "lhId": "page-1-IMG",
        "path": "1,HTML,1,BODY,4,DIV,0,SECTION,3,SECTION,0,DIV,1,DIV,0,DIV,0,HEADER,0,STRONG,0,IMG",
        "type": "node",
        "snippet": "<img src=\"/assets/Flash-Mask-Logo-128.png\" alt=\"\">",
        "selector": "div.demo-app > header.demo-app-header > strong > img",
        "nodeLabel": "div.demo-app > header.demo-app-header > strong > img",
        "boundingRect": {
          "top": -791,
          "left": -571,
          "right": -473,
          "width": 99,
          "bottom": -692,
          "height": 99
        }
      },
      "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": 11227
          },
          {
            "reason": "This image file is larger than it needs to be (128x128) for its displayed dimensions (23x23). Use responsive images to reduce the image download size.",
            "wastedBytes": 13507
          }
        ]
      },
      "totalBytes": 13958,
      "wastedBytes": 13870
    }
  ],
  "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": 556809
  }
}

LCP breakdown

Each subpart has specific improvement strategies. Ideally, most of the LCP time should be spent on loading the resources, not within delays.

Elements & resources
{
  "type": "list",
  "items": [
    {
      "type": "table",
      "items": [
        {
          "label": "Time to first byte",
          "subpart": "timeToFirstByte",
          "duration": 1040.583
        },
        {
          "label": "Resource load delay",
          "subpart": "resourceLoadDelay",
          "duration": 2105.578
        },
        {
          "label": "Resource load duration",
          "subpart": "resourceLoadDuration",
          "duration": 1307.04
        },
        {
          "label": "Element render delay",
          "subpart": "elementRenderDelay",
          "duration": 59.266
        }
      ],
      "headings": [
        {
          "key": "label",
          "label": "Subpart",
          "valueType": "text"
        },
        {
          "key": "duration",
          "label": "Duration",
          "valueType": "ms"
        }
      ]
    },
    {
      "lhId": "page-0-IMG",
      "path": "1,HTML,1,BODY,4,DIV,0,SECTION,3,SECTION,0,DIV,1,DIV,0,DIV,1,DIV,0,DIV,0,IMG",
      "type": "node",
      "snippet": "<img alt=\"女性插画,头发与衣领衔接处有几根多余线条\" data-i18n-alt=\"sceneImageAlt\" decoding=\"async\" loading=\"lazy\" src=\"/assets/插画示例.webp\">",
      "selector": "div.demo-app > div.demo-app-canvas > div.workflow-picture > img",
      "nodeLabel": "女性插画,头发与衣领衔接处有几根多余线条",
      "boundingRect": {
        "top": -461,
        "left": -589,
        "right": 1559,
        "width": 2147,
        "bottom": 971,
        "height": 1432
      }
    }
  ]
}

LCP request discovery

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

Elements & resources
{
  "type": "list",
  "items": [
    {
      "type": "checklist",
      "items": {
        "eagerlyLoaded": {
          "label": "LCP resources should not use loading=lazy",
          "value": false
        },
        "priorityHinted": {
          "label": "fetchpriority=high should be applied",
          "value": false
        },
        "requestDiscoverable": {
          "label": "Request is discoverable in initial document",
          "value": false
        }
      }
    },
    {
      "lhId": "page-0-IMG",
      "path": "1,HTML,1,BODY,4,DIV,0,SECTION,3,SECTION,0,DIV,1,DIV,0,DIV,1,DIV,0,DIV,0,IMG",
      "type": "node",
      "snippet": "<img alt=\"女性插画,头发与衣领衔接处有几根多余线条\" data-i18n-alt=\"sceneImageAlt\" decoding=\"async\" loading=\"lazy\" src=\"/assets/插画示例.webp\">",
      "selector": "div.demo-app > div.demo-app-canvas > div.workflow-picture > img",
      "nodeLabel": "女性插画,头发与衣领衔接处有几根多余线条",
      "boundingRect": {
        "top": -461,
        "left": -589,
        "right": 1559,
        "width": 2147,
        "bottom": 971,
        "height": 1432
      }
    }
  ]
}

Network dependency tree

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

Elements & resources
{
  "type": "list",
  "items": [
    {
      "type": "list-section",
      "value": {
        "type": "network-tree",
        "chains": {
          "DFB4E019FA825260A5D6DBC491A2DB6D": {
            "url": "https://flashmask.net/zh/",
            "children": {
              "598318.2": {
                "url": "https://flashmask.net/view-boot.js",
                "children": {},
                "transferSize": 1346,
                "navStartToEndTime": 1514
              },
              "598318.3": {
                "url": "https://flashmask.net/site.css",
                "children": {
                  "598318.25": {
                    "url": "https://flashmask.net/assets/fonts/anton-v50.woff2",
                    "children": {},
                    "isLongest": true,
                    "transferSize": 19133,
                    "navStartToEndTime": 2788
                  },
                  "598318.26": {
                    "url": "https://flashmask.net/assets/fonts/inter-v50.woff2",
                    "children": {},
                    "transferSize": 24323,
                    "navStartToEndTime": 2764
                  }
                },
                "isLongest": true,
                "transferSize": 15904,
                "navStartToEndTime": 2031
              },
              "598318.4": {
                "url": "https://flashmask.net/mobile-use-case.css",
                "children": {},
                "transferSize": 3593,
                "navStartToEndTime": 1785
              }
            },
            "isLongest": true,
            "transferSize": 9854,
            "navStartToEndTime": 1052
          }
        },
        "longestChain": {
          "duration": 2788
        }
      }
    },
    {
      "type": "list-section",
      "title": "Preconnected origins",
      "value": {
        "type": "text",
        "value": "no origins were preconnected"
      },
      "description": "[preconnect](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/) hints help the browser establish a connection earlier in the page load, saving time when the first request for that origin is made. The following are the origins that the page preconnected to."
    },
    {
      "type": "list-section",
      "title": "Preconnect candidates",
      "value": {
        "type": "table",
        "items": [
          {
            "origin": "https://vibecafe.ai",
            "wastedMs": 480.21400000000006
          },
          {
            "origin": "https://collect.flashmask.net",
            "wastedMs": 300
          }
        ],
        "headings": [
          {
            "key": "origin",
            "label": "Origin",
            "valueType": "text"
          },
          {
            "key": "wastedMs",
            "label": "Est LCP savings",
            "valueType": "ms"
          }
        ]
      },
      "description": "Add [preconnect](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/) hints to your most important origins, but try to use no more than 4."
    }
  ]
}
Environment & raw metrics
{
  "finalUrl": "https://flashmask.net/zh/",
  "userAgent": "Mozilla/5.0 (X11; Linux x86_64) 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": 6534.7905
    },
    {
      "id": "cumulative-layout-shift",
      "unit": "unitless",
      "value": 0.003822007507515923
    },
    {
      "id": "total-blocking-time",
      "unit": "millisecond",
      "value": 0
    },
    {
      "id": "first-contentful-paint",
      "unit": "millisecond",
      "value": 1764.7905
    },
    {
      "id": "speed-index",
      "unit": "millisecond",
      "value": 4550.456954893911
    }
  ]
}

01 / WHAT WORKS

What makes it work

Embedded interactive canvas in the hero

Rather than relying on static screenshots, the hero mounts the actual drag-and-drop workspace with format hints (PNG, JPG, JPEG, WebP) and coordinate export indicators directly beside the headline.

Transparent, anti-subscription pricing model

The pricing section directly states daily free web quotas and the one-time $3.99 Mac buyout with offline processing, avoiding hidden recurring fees or unclear credit limits.

02 / NEXT STEPS

Where to go next

  1. 01

    Resolve desktop platform CTA mismatch on mobile viewports

    On 390px screens, the prominent Mac App Store button sits directly above the fold, even though mobile visitors browsing on iOS or Android cannot install macOS software.

    Detect mobile user agents or screen widths under 768px. Display a lightweight badge indicating Mac app availability while prioritizing web demo exploration or a reminder feature. Test conversion by measuring bounce rate reductions on mobile visits.

  2. 02

    Clarify hero CTA hierarchy between testing and purchasing

    New visitors currently see the $3.99 Mac buyout card before they have experienced the core loop of circling an image and generating JSON, creating unearned purchasing friction.

    Introduce a clear primary button encouraging visitors to drop an image into the editor first, treating the Mac App as the power-user offline upgrade. Verify by measuring first-session editor interactions against App Store click-throughs.

03 / DESIGN LANGUAGE

A design system you can reuse

Colors

Background

#080d13

Text

#080d13

Typography

Display font
Inter
Body font
Inter
Heading / body
56.16px / 16px

Spacing & shape

Section gap
0px
Component inset
—
Card radius
—
Button radius
0px

04 / EVIDENCE

The detail behind the report

Explore each observation, recommendation and captured record.

Conversion3 observations

No way to reach a human

Medium

A stranger who wants to buy, ask, or complain has nowhere to go. That is a conversion leak and a trust leak.

Put a mailto, a form that works, or a real social handle in the footer. One is enough.

no mailto / telegram / x / github / email

Images ship without alt text

Medium

Missing alt is a screen-reader dead end and a ranking leak. Decorative images can be alt="". Content images cannot be blank.

Write a short alt for product and photo images. Use empty alt only on pure decoration.

4 images without alt

Tab title and H1 disagree

If the tab, the share card, and the hero name different things, the visitor cannot form one memory of the product.

Make title, og:title, and H1 share the same noun.

title="Flash Mask|AI 图片局部修改辅助工具" h1="圈出要改的位置,让 AI 秒懂你的意图。"
Launch2 observations

No HSTS header

Medium

Without Strict-Transport-Security, a first visit can still be downgraded to http. Browsers will not pin HTTPS.

Set Strict-Transport-Security: max-age=31536000; includeSubDomains at the edge.

strict-transport-security missing

No Content-Security-Policy

A CSP is the standard way to limit script sources. Vibe-coded pages often load anything, including injected scripts.

Start with a report-only CSP, then default-src 'self' and an explicit script-src.

content-security-policy missing
Link preview

05 / MAKE IT HAPPEN

Give your AI a clear next step

Use the improvement prompt for this page, or the design prompt to borrow its visual language. “Recreate” includes references and implementation steps. Paste either into your coding assistant.

Preview full instructions
Optimize the hero CTA and responsive behavior for Flash Mask on https://flashmask.net/zh/. When the viewport is below 768px (such as 390x844), adjust the hero card layout so the 'Mac App Store 下载' button does not dominate the viewport above the fold. Add an explicit 'macOS 专享' label next to the Mac App Store CTA and provide a secondary '在电脑上打开体验' or direct canvas scroll action for mobile users. Keep all existing design tokens intact: background #FBFAF5, text #080D13, accent yellow #FFE500, editor stage #0E131A, line border rgba(255,255,255,0.14), and font stack Inter. Verify clean layout at 1440x900 and 390x844 without broken margins.