https://slides.by331.net

页面构成与技术指标

正文

530

操作候选

0

图片

12

HTML

743 KB

文案

标题字数
56
摘要字数
142
H1
1
H2
6

动作

表单
0
站内链接
16
站外链接
5

安全与页面元信息

HTTPS
有
HSTS
无
CSP
无
nosniff
有
viewport
有
图标
有
JSON-LD
无
统计
无

构成

Tailwind

脚本
2 ext / 9 inline
Alt
9 missing
语言
en
第三方域
1

Lighthouse

移动端模拟 · 性能评分

75 / 100

2026-09-13 · 实验室数据,非真实用户体验数据。

查看详情

移动端模拟 · 实验室数据,非真实用户体验数据
2026-09-13T01:13:31.398Z · Lighthouse 13.4.1

性能75/ 100
可访问性100/ 100
最佳实践100/ 100
SEO100/ 100
LCP · 主要内容出现1,468 ms
CLS · 布局偏移0.014
TBT · 主线程阻塞625 ms
FCP · 首次内容绘制1,400 ms
SI · 视觉加载速度9,902 ms

分数会受服务器、网络和测试环境影响,独立于品味/转化评分。诊断保留 Lighthouse 原文。

Minimize main-thread work

10.2 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": 7611.975999999822,
      "groupLabel": "Other"
    },
    {
      "group": "scriptEvaluation",
      "duration": 1217.4839999999917,
      "groupLabel": "Script Evaluation"
    },
    {
      "group": "styleLayout",
      "duration": 715.4680000000006,
      "groupLabel": "Style & Layout"
    },
    {
      "group": "paintCompositeRender",
      "duration": 411.85600000005087,
      "groupLabel": "Rendering"
    },
    {
      "group": "parseHTML",
      "duration": 136.86800000000002,
      "groupLabel": "Parse HTML & CSS"
    },
    {
      "group": "garbageCollection",
      "duration": 55.83200000000004,
      "groupLabel": "Garbage Collection"
    },
    {
      "group": "scriptParseCompile",
      "duration": 20.931999999999995,
      "groupLabel": "Script Parsing & Compilation"
    }
  ],
  "headings": [
    {
      "key": "groupLabel",
      "label": "Category",
      "valueType": "text"
    },
    {
      "key": "duration",
      "label": "Time Spent",
      "valueType": "ms",
      "granularity": 1
    }
  ],
  "sortedBy": [
    "duration"
  ]
}

Elements with visible text labels do not have matching accessible names.

Visible text labels that do not match the accessible name can result in a confusing experience for screen reader users. Learn more about accessible names.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-0-A",
        "path": "1,HTML,1,BODY,0,DIV,0,MAIN,0,SECTION,2,DIV,2,SECTION,3,DIV,0,A",
        "type": "node",
        "snippet": "<a class=\"cta hero-store-cta\" href=\"https://apps.apple.com/app/apple-store/id6764543664?pt=128838980&amp;ct=websit…\" aria-label=\"Download on the App Store. Free, no ads.\" data-analytics-event=\"app_store_cta_clicked\" data-analytics-lang=\"en\" data-analytics-page=\"/\" data-analytics-location=\"hero\" data-analytics-campaign=\"website_home_v1_en\">",
        "selector": "div.shell > section.copy > div.actions > a.cta",
        "nodeLabel": "FREE, NO ADS\nDownload on the App Store",
        "explanation": "Fix any of the following:\n  Text inside the element is not included in the accessible name",
        "boundingRect": {
          "top": 545,
          "left": 29,
          "right": 281,
          "width": 252,
          "bottom": 599,
          "height": 54
        }
      }
    },
    {
      "node": {
        "lhId": "1-1-A",
        "path": "1,HTML,1,BODY,0,DIV,1,FOOTER,0,DIV,0,DIV,1,NAV,5,A",
        "type": "node",
        "snippet": "<a class=\"language-switch\" href=\"/zh/\" hreflang=\"zh-CN\" lang=\"zh-CN\" aria-label=\"切换到中文\">",
        "selector": "div.footer-cover-inner-v01 > div.footer-cover-main-v01 > nav.footer-links-v01 > a.language-switch",
        "nodeLabel": "简体中文",
        "explanation": "Fix any of the following:\n  Text inside the element is not included in the accessible name",
        "boundingRect": {
          "top": 5677,
          "left": 111,
          "right": 200,
          "width": 89,
          "bottom": 5707,
          "height": 30
        }
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.semantics",
      "wcag21a",
      "wcag253",
      "EN-301-549",
      "EN-9.2.5.3",
      "RGAAv4",
      "RGAA-6.1.5",
      "experimental"
    ],
    "type": "debugdata",
    "impact": "serious"
  }
}

Avoid enormous network payloads

Total size was 3,604 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://slides.by331.net/assets/fourth-v09/screen4-door-light-bg-final-3840x2160-q90.webp",
      "totalBytes": 954379
    },
    {
      "url": "https://slides.by331.net/assets/hero-webp/photo-04.webp",
      "totalBytes": 303471
    },
    {
      "url": "https://slides.by331.net/assets/third-v69/W68-BG-C-01_selected_bottom_right_wall_rebuild_preview_2048.webp",
      "totalBytes": 259807
    },
    {
      "url": "https://slides.by331.net/assets/hero-webp/photo-03.webp",
      "totalBytes": 251574
    },
    {
      "url": "https://slides.by331.net/assets/hero-webp/photo-02.webp",
      "totalBytes": 234946
    },
    {
      "url": "https://slides.by331.net/assets/third-v712/frame_final_transparent.webp",
      "totalBytes": 224638
    },
    {
      "url": "https://slides.by331.net/assets/third-v755/people_9x6_full_bleed_inset14.webp",
      "totalBytes": 191971
    },
    {
      "url": "https://slides.by331.net/assets/hero-ultrawide/hero-ultrawide-foreground.webp",
      "totalBytes": 177517
    },
    {
      "url": "https://slides.by331.net/assets/fourth-v09/screen4-tyndall-overlay-square-v3.webp",
      "totalBytes": 133510
    },
    {
      "url": "https://slides.by331.net/assets/third-v737/album_9x6_clean_photo.webp",
      "totalBytes": 122746
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    },
    {
      "key": "totalBytes",
      "label": "Transfer Size",
      "valueType": "bytes"
    }
  ],
  "sortedBy": [
    "totalBytes"
  ]
}

Use efficient cache lifetimes

Est savings of 16 KiB

A long cache lifetime can speed up repeat visits to your page. Learn more about caching.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "url": "https://static.cloudflareinsights.com/beacon.min.js",
      "totalBytes": 10338,
      "wastedBytes": 4135.2,
      "cacheLifetimeMs": 86400000
    },
    {
      "url": "https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495",
      "totalBytes": 10338,
      "wastedBytes": 4135.2,
      "cacheLifetimeMs": 86400000
    },
    {
      "url": "https://static.cloudflareinsights.com/beacon.min.js",
      "totalBytes": 10188,
      "wastedBytes": 4075.2000000000003,
      "cacheLifetimeMs": 86400000
    },
    {
      "url": "https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495",
      "totalBytes": 10188,
      "wastedBytes": 4075.2000000000003,
      "cacheLifetimeMs": 86400000
    }
  ],
  "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": 16420.8
  },
  "skipSumming": [
    "cacheLifetimeMs"
  ]
}

Improve image delivery

Est savings of 1,303 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://slides.by331.net/assets/hero-webp/photo-04.webp",
      "node": {
        "lhId": "page-1-IMG",
        "path": "1,HTML,1,BODY,0,DIV,0,MAIN,1,DIV,4,SECTION,0,DIV,0,DIV,2,IMG",
        "type": "node",
        "snippet": "<img class=\"curtain-download-slide-v01\" src=\"/assets/hero-webp/photo-04.webp\" alt=\"\" decoding=\"async\" loading=\"lazy\">",
        "selector": "section#before-download > div.curtain-download-photo-v01 > div.curtain-download-device-v01 > img.curtain-download-slide-v01",
        "nodeLabel": "section#before-download > div.curtain-download-photo-v01 > div.curtain-download-device-v01 > img.curtain-download-slide-v01",
        "boundingRect": {
          "top": 4154,
          "left": 221,
          "right": 380,
          "width": 159,
          "bottom": 4498,
          "height": 344
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "Increasing the image compression factor could improve this image's download size.",
            "wastedBytes": 240497
          },
          {
            "reason": "This image file is larger than it needs to be (416x900) for its displayed dimensions (459x344). Use responsive images to reduce the image download size.",
            "wastedBytes": 175163
          }
        ]
      },
      "totalBytes": 302850,
      "wastedBytes": 276561
    },
    {
      "url": "https://slides.by331.net/assets/hero-webp/photo-03.webp",
      "node": {
        "lhId": "page-2-IMG",
        "path": "1,HTML,1,BODY,0,DIV,0,MAIN,1,DIV,4,SECTION,0,DIV,0,DIV,1,IMG",
        "type": "node",
        "snippet": "<img class=\"curtain-download-slide-v01\" src=\"/assets/hero-webp/photo-03.webp\" alt=\"\" decoding=\"async\" loading=\"lazy\">",
        "selector": "section#before-download > div.curtain-download-photo-v01 > div.curtain-download-device-v01 > img.curtain-download-slide-v01",
        "nodeLabel": "section#before-download > div.curtain-download-photo-v01 > div.curtain-download-device-v01 > img.curtain-download-slide-v01",
        "boundingRect": {
          "top": 4154,
          "left": 221,
          "right": 380,
          "width": 159,
          "bottom": 4498,
          "height": 344
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "Increasing the image compression factor could improve this image's download size.",
            "wastedBytes": 188659
          },
          {
            "reason": "This image file is larger than it needs to be (416x900) for its displayed dimensions (459x344). Use responsive images to reduce the image download size.",
            "wastedBytes": 145181
          }
        ]
      },
      "totalBytes": 251012,
      "wastedBytes": 224723
    },
    {
      "url": "https://slides.by331.net/assets/hero-webp/photo-02.webp",
      "node": {
        "lhId": "page-3-IMG",
        "path": "1,HTML,1,BODY,0,DIV,0,MAIN,1,DIV,4,SECTION,0,DIV,0,DIV,0,IMG",
        "type": "node",
        "snippet": "<img class=\"curtain-download-slide-v01\" src=\"/assets/hero-webp/photo-02.webp\" alt=\"\" decoding=\"async\" loading=\"lazy\">",
        "selector": "section#before-download > div.curtain-download-photo-v01 > div.curtain-download-device-v01 > img.curtain-download-slide-v01",
        "nodeLabel": "section#before-download > div.curtain-download-photo-v01 > div.curtain-download-device-v01 > img.curtain-download-slide-v01",
        "boundingRect": {
          "top": 4154,
          "left": 221,
          "right": 380,
          "width": 159,
          "bottom": 4498,
          "height": 344
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "Increasing the image compression factor could improve this image's download size.",
            "wastedBytes": 184998
          },
          {
            "reason": "This image file is larger than it needs to be (370x800) for its displayed dimensions (516x344). Use responsive images to reduce the image download size.",
            "wastedBytes": 93748
          }
        ]
      },
      "totalBytes": 234300,
      "wastedBytes": 204725
    },
    {
      "url": "https://slides.by331.net/assets/fourth-v09/screen4-tyndall-overlay-square-v3.webp",
      "node": {
        "lhId": "page-4-IMG",
        "path": "1,HTML,1,BODY,0,DIV,0,MAIN,1,DIV,2,SECTION,1,DIV,0,PICTURE,1,IMG",
        "type": "node",
        "snippet": "<img src=\"https://slides.by331.net/assets/fourth-v09/screen4-tyndall-overlay-square-…\" alt=\"\" decoding=\"async\" loading=\"lazy\">",
        "selector": "section#shared-screen > div.shared-poster-motion-v09 > picture.shared-tyndall-overlay-v09 > img",
        "nodeLabel": "section#shared-screen > div.shared-poster-motion-v09 > picture.shared-tyndall-overlay-v09 > img",
        "boundingRect": {
          "top": 2478,
          "left": 15,
          "right": 397,
          "width": 382,
          "bottom": 3163,
          "height": 685
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (1606x2880) for its displayed dimensions (678x678). Use responsive images to reduce the image download size.",
            "wastedBytes": 119705
          }
        ]
      },
      "totalBytes": 132918,
      "wastedBytes": 119705
    },
    {
      "url": "https://slides.by331.net/assets/hero-fill-webp/tv-card-04.webp",
      "node": {
        "lhId": "page-5-IMG",
        "path": "1,HTML,1,BODY,0,DIV,0,MAIN,1,SECTION,4,ARTICLE,0,DIV,0,IMG",
        "type": "node",
        "snippet": "<img src=\"assets/hero-fill-webp/tv-card-04.webp\" alt=\"\" fetchpriority=\"high\" decoding=\"async\">",
        "selector": "section.screen-layer > article.card > div.photo > img",
        "nodeLabel": "section.screen-layer > article.card > div.photo > img",
        "boundingRect": {
          "top": 241,
          "left": 201,
          "right": 265,
          "width": 64,
          "bottom": 359,
          "height": 118
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (700x1029) for its displayed dimensions (238x357). Use responsive images to reduce the image download size.",
            "wastedBytes": 77731
          }
        ]
      },
      "totalBytes": 88122,
      "wastedBytes": 77731
    },
    {
      "url": "https://slides.by331.net/assets/scenes-webp/living_tv_single_photo_v414.webp",
      "node": {
        "lhId": "page-5-IMG",
        "path": "1,HTML,1,BODY,0,DIV,0,MAIN,1,DIV,0,SECTION,0,DIV,1,DIV,0,ARTICLE,0,IMG",
        "type": "node",
        "snippet": "<img loading=\"eager\" decoding=\"async\" src=\"/assets/scenes-webp/living_tv_single_photo_v414.webp\" alt=\"Living room TV playing Immich photos\">",
        "selector": "div.section-pad > div.scene-mosaic-v40 > article.scene-card > img",
        "nodeLabel": "Living room TV playing Immich photos",
        "boundingRect": {
          "top": 1094,
          "left": 40,
          "right": 372,
          "width": 332,
          "bottom": 1418,
          "height": 324
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (1024x999) for its displayed dimensions (332x332). Use responsive images to reduce the image download size.",
            "wastedBytes": 76703
          }
        ]
      },
      "totalBytes": 85962,
      "wastedBytes": 76703
    },
    {
      "url": "https://slides.by331.net/assets/scenes-webp/ipad_desk_single_photo_v414.webp",
      "node": {
        "lhId": "page-6-IMG",
        "path": "1,HTML,1,BODY,0,DIV,0,MAIN,1,DIV,0,SECTION,0,DIV,1,DIV,2,ARTICLE,0,IMG",
        "type": "node",
        "snippet": "<img loading=\"lazy\" decoding=\"async\" src=\"/assets/scenes-webp/ipad_desk_single_photo_v414.webp\" alt=\"iPad playing photos on a shelf or desk\">",
        "selector": "div.section-pad > div.scene-mosaic-v40 > article.scene-card > img",
        "nodeLabel": "iPad playing photos on a shelf or desk",
        "boundingRect": {
          "top": 1430,
          "left": 212,
          "right": 372,
          "width": 160,
          "bottom": 1596,
          "height": 166
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (987x1024) for its displayed dimensions (166x166). Use responsive images to reduce the image download size.",
            "wastedBytes": 73393
          }
        ]
      },
      "totalBytes": 75450,
      "wastedBytes": 73393
    },
    {
      "url": "https://slides.by331.net/assets/scenes-webp/iphone_bedside_single_photo_v414.webp",
      "node": {
        "lhId": "page-7-IMG",
        "path": "1,HTML,1,BODY,0,DIV,0,MAIN,1,DIV,0,SECTION,0,DIV,1,DIV,1,ARTICLE,0,IMG",
        "type": "node",
        "snippet": "<img loading=\"lazy\" decoding=\"async\" src=\"/assets/scenes-webp/iphone_bedside_single_photo_v414.webp\" alt=\"Spare iPhone playing photos on a nightstand\">",
        "selector": "div.section-pad > div.scene-mosaic-v40 > article.scene-card > img",
        "nodeLabel": "Spare iPhone playing photos on a nightstand",
        "boundingRect": {
          "top": 1430,
          "left": 40,
          "right": 200,
          "width": 160,
          "bottom": 1596,
          "height": 166
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (987x1024) for its displayed dimensions (166x166). Use responsive images to reduce the image download size.",
            "wastedBytes": 64385
          }
        ]
      },
      "totalBytes": 66190,
      "wastedBytes": 64385
    },
    {
      "url": "https://slides.by331.net/assets/hero-fill-webp/tv-card-03.webp",
      "node": {
        "lhId": "page-6-IMG",
        "path": "1,HTML,1,BODY,0,DIV,0,MAIN,1,SECTION,3,ARTICLE,0,DIV,0,IMG",
        "type": "node",
        "snippet": "<img src=\"assets/hero-fill-webp/tv-card-04.webp\" alt=\"\" fetchpriority=\"high\" decoding=\"async\">",
        "selector": "section.screen-layer > article.card > div.photo > img",
        "nodeLabel": "section.screen-layer > article.card > div.photo > img",
        "boundingRect": {
          "top": 184,
          "left": 442,
          "right": 564,
          "width": 122,
          "bottom": 337,
          "height": 153
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (700x1029) for its displayed dimensions (238x357). Use responsive images to reduce the image download size.",
            "wastedBytes": 61194
          }
        ]
      },
      "totalBytes": 69374,
      "wastedBytes": 61194
    },
    {
      "url": "https://slides.by331.net/assets/hero-fill-webp/tv-card-01.webp",
      "node": {
        "lhId": "page-7-IMG",
        "path": "1,HTML,1,BODY,0,DIV,0,MAIN,1,SECTION,5,ARTICLE,0,DIV,0,IMG",
        "type": "node",
        "snippet": "<img src=\"assets/hero-fill-webp/tv-card-01.webp\" alt=\"\" fetchpriority=\"high\" decoding=\"async\">",
        "selector": "section.screen-layer > article.card > div.photo > img",
        "nodeLabel": "section.screen-layer > article.card > div.photo > img",
        "boundingRect": {
          "top": 227,
          "left": 217,
          "right": 286,
          "width": 69,
          "bottom": 352,
          "height": 125
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (700x1035) for its displayed dimensions (184x276). Use responsive images to reduce the image download size.",
            "wastedBytes": 44713
          }
        ]
      },
      "totalBytes": 48084,
      "wastedBytes": 44713
    },
    {
      "url": "https://slides.by331.net/assets/brand/AppIcon-tvOS-transparent-360.png",
      "node": {
        "lhId": "page-8-IMG",
        "path": "1,HTML,1,BODY,0,DIV,1,FOOTER,0,DIV,0,DIV,0,A,0,IMG",
        "type": "node",
        "snippet": "<img src=\"/assets/brand/AppIcon-tvOS-transparent-360.png\" alt=\"\" decoding=\"async\" loading=\"lazy\">",
        "selector": "div.footer-cover-inner-v01 > div.footer-cover-main-v01 > a.footer-brand-lockup-v01 > img",
        "nodeLabel": "div.footer-cover-inner-v01 > div.footer-cover-main-v01 > a.footer-brand-lockup-v01 > img",
        "boundingRect": {
          "top": 5587,
          "left": 18,
          "right": 86,
          "width": 68,
          "bottom": 5625,
          "height": 38
        }
      },
      "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": 23618
          },
          {
            "reason": "This image file is larger than it needs to be (360x203) for its displayed dimensions (67x38). Use responsive images to reduce the image download size.",
            "wastedBytes": 34544
          }
        ]
      },
      "totalBytes": 35798,
      "wastedBytes": 35371
    },
    {
      "url": "https://slides.by331.net/assets/hero-fill-webp/tv-card-02.webp",
      "node": {
        "lhId": "page-8-IMG",
        "path": "1,HTML,1,BODY,0,DIV,0,MAIN,1,SECTION,2,ARTICLE,0,DIV,0,IMG",
        "type": "node",
        "snippet": "<img src=\"assets/hero-fill-webp/tv-card-03.webp\" alt=\"\" fetchpriority=\"high\" decoding=\"async\">",
        "selector": "section.screen-layer > article.card > div.photo > img",
        "nodeLabel": "section.screen-layer > article.card > div.photo > img",
        "boundingRect": {
          "top": 150,
          "left": 341,
          "right": 481,
          "width": 140,
          "bottom": 337,
          "height": 187
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (700x896) for its displayed dimensions (236x354). Use responsive images to reduce the image download size.",
            "wastedBytes": 32439
          }
        ]
      },
      "totalBytes": 37426,
      "wastedBytes": 32439
    },
    {
      "url": "https://slides.by331.net/assets/hero-fill-webp/ipad-fill.webp",
      "node": {
        "lhId": "page-9-IMG",
        "path": "1,HTML,1,BODY,0,DIV,0,MAIN,0,SECTION,0,IMG",
        "type": "node",
        "snippet": "<img src=\"assets/hero-fill-webp/ipad-fill.webp\" alt=\"\" fetchpriority=\"high\" decoding=\"async\">",
        "selector": "div.wrap > main.artboard > section.side-screen-fill > img",
        "nodeLabel": "div.wrap > main.artboard > section.side-screen-fill > img",
        "boundingRect": {
          "top": 134,
          "left": 5,
          "right": 68,
          "width": 63,
          "bottom": 232,
          "height": 98
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (564x848) for its displayed dimensions (141x212). Use responsive images to reduce the image download size.",
            "wastedBytes": 23811
          }
        ]
      },
      "totalBytes": 25398,
      "wastedBytes": 23811
    },
    {
      "url": "https://slides.by331.net/assets/fourth-v09/screen4-door-square-mobile.webp",
      "node": {
        "lhId": "page-9-IMG",
        "path": "1,HTML,1,BODY,0,DIV,0,MAIN,1,DIV,2,SECTION,0,PICTURE,2,IMG",
        "type": "node",
        "snippet": "<img src=\"https://slides.by331.net/assets/fourth-v09/screen4-door-square-mobile.webp\" alt=\"\" decoding=\"async\" loading=\"lazy\">",
        "selector": "div.page > section#shared-screen > picture.shared-poster-bg-v09 > img",
        "nodeLabel": "div.page > section#shared-screen > picture.shared-poster-bg-v09 > img",
        "boundingRect": {
          "top": 2481,
          "left": 17,
          "right": 395,
          "width": 378,
          "bottom": 3159,
          "height": 678
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "This image file is larger than it needs to be (669x1200) for its displayed dimensions (678x678). Use responsive images to reduce the image download size.",
            "wastedBytes": 18936
          }
        ]
      },
      "totalBytes": 44302,
      "wastedBytes": 18936
    }
  ],
  "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": 1334390
  }
}

Legacy JavaScript

Est savings of 21 KiB

Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren't necessary for modern browsers. Consider modifying your JavaScript build process to not transpile Baseline features, unless you know you must support older browsers. Learn why most sites can deploy ES6+ code without transpiling

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "url": "https://static.cloudflareinsights.com/beacon.min.js",
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "signal": "Array.prototype.at",
            "location": {
              "url": "https://static.cloudflareinsights.com/beacon.min.js",
              "line": 0,
              "type": "source-location",
              "column": 19367,
              "urlProvider": "network"
            }
          },
          {
            "signal": "Array.prototype.findLast",
            "location": {
              "url": "https://static.cloudflareinsights.com/beacon.min.js",
              "line": 0,
              "type": "source-location",
              "column": 19137,
              "urlProvider": "network"
            }
          }
        ]
      },
      "wastedBytes": 10682
    },
    {
      "url": "https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495",
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "signal": "Array.prototype.at",
            "location": {
              "url": "https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495",
              "line": 0,
              "type": "source-location",
              "column": 19367,
              "urlProvider": "network"
            }
          },
          {
            "signal": "Array.prototype.findLast",
            "location": {
              "url": "https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495",
              "line": 0,
              "type": "source-location",
              "column": 19137,
              "urlProvider": "network"
            }
          }
        ]
      },
      "wastedBytes": 10682
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url",
      "subItemsHeading": {
        "key": "location",
        "valueType": "source-location"
      }
    },
    {
      "key": null,
      "label": "",
      "valueType": "code",
      "subItemsHeading": {
        "key": "signal"
      }
    },
    {
      "key": "wastedBytes",
      "label": "Wasted bytes",
      "valueType": "bytes"
    }
  ],
  "debugData": {
    "type": "debugdata",
    "wastedBytes": 21364
  }
}

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.

对应元素与资源
{
  "type": "list",
  "items": [
    {
      "type": "list-section",
      "value": {
        "type": "network-tree",
        "chains": {
          "CF7EA30CFE222CE15CCDA82863E2596C": {
            "url": "https://slides.by331.net/",
            "children": {
              "598887.13": {
                "url": "https://slides.by331.net/assets/fonts/signature/Courgette-Regular.ttf",
                "children": {},
                "transferSize": 49299,
                "navStartToEndTime": 2733
              },
              "598887.14": {
                "url": "https://slides.by331.net/site.webmanifest",
                "children": {},
                "transferSize": 789,
                "navStartToEndTime": 2697
              },
              "598887.38": {
                "url": "https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495",
                "children": {},
                "isLongest": true,
                "transferSize": 10188,
                "navStartToEndTime": 4336
              }
            },
            "isLongest": true,
            "transferSize": 63800,
            "navStartToEndTime": 1142
          }
        },
        "longestChain": {
          "duration": 4336
        }
      }
    },
    {
      "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": "text",
        "value": "No additional origins are good candidates for preconnecting"
      },
      "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."
    }
  ]
}
测试环境与原始指标
{
  "finalUrl": "https://slides.by331.net/",
  "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": 1467.864
    },
    {
      "id": "cumulative-layout-shift",
      "unit": "unitless",
      "value": 0.013877381264068008
    },
    {
      "id": "total-blocking-time",
      "unit": "millisecond",
      "value": 624.5
    },
    {
      "id": "first-contentful-paint",
      "unit": "millisecond",
      "value": 1399.864
    },
    {
      "id": "speed-index",
      "unit": "millisecond",
      "value": 9902.185538248179
    }
  ]
}

01 / 值得借鉴

好设计,具体好在哪

沉浸真实的家居场景呈现

暖色环境光、电视机柜与大屏陈列直观展示了作为家庭常驻相框的实际效果,脱离了传统工具软件生硬的技术截图套路。

前置明确的防退款与预期对齐

下载前设置的三项检查清单清晰申明用户必须自备 Immich 服务与 API Key,有效避免了误以为该应用提供云存储或备份功能的用户产生误解。

02 / 下一步

值得继续打磨的地方

  1. 01

    在移动端将首屏插图调整为垂直排列

    在 390px 视口下,磨砂玻璃文字卡片直接覆盖在电视黑色边框与高亮照片上方,导致大标题与正文对比度混乱且阅读吃力。

    在 768px 以下断点将首屏布局调整为单列垂直流,文字容器置顶并采用深色纯净底色,将电视设备插图放置在其下方,消除重叠造成的对比度冲突。

  2. 02

    在移动端下载按钮旁固定支持设备标识

    桌面端右下角清晰标有 iPhone、iPad、Apple TV 支持信息,但在移动端该标签被挤出首屏视口,导致用户在点击下载前无法立即获知是否支持电视端。

    在所有视口的首屏主卡片中,将紧凑的设备支持标签直接放置于 App Store 下载按钮下方,确保关键支持信息不因屏幕收窄而脱节。

03 / 设计语言

把气质拆成可复用的参数

色彩

背景

#111111

文字

#ffffff

字体与尺度

标题字体
Inter
正文字体
Inter
标题 / 正文
58px / 16px

间距与形状

区块间距
0px
组件内距
—
卡片圆角
—
按钮圆角
999px

表达也可以更准确

文案润色对照

现在

Apple TV in the living room, an iPad on a shelf, or a spare iPhone on a nightstand.Connect once, then let your Immich photos play where you will actually see them.

建议表达

Apple TV in the living room, an iPad on a shelf, or a spare iPhone on a nightstand. Connect once, then let your Immich photos play where you will actually see them.

修复英文句号后缺失的空格,提升文案排版严谨度。

04 / 检查依据

观察与实测依据

逐项查看观察、建议与采集记录。

品味1 项观察

移动端首屏文字与背景画面严重重叠

高优先级

白色标题文字横跨电视黑色边框与画面高光区域,背景杂乱破坏了排版辨识度与高级感。

在移动端断点解除绝对定位或半透明浮层覆盖,改为先排版文字再在下方渲染电视图解。

FOR YOUR SELF-HOSTED IMMICH LIBRARY. Bring your Immich photos back into view
转化5 项观察

页面上没有人或证明

中优先级

陌生人落到一个看起来像 AI、没有作者、没有客户、没有联系方式的站点上,不会把邮箱给你。

加上真名、真脸、真实联系方式,或一句真实客户的话。

no about, no first-person, no quote

线上页没有统计

中优先级

看不到谁跳出,就不知道下一次修改有没有用。没有计数就等于盲飞。

在公开页放上 Plausible、PostHog 或 GA4。一段脚本就够。

no gtag / plausible / posthog / umami

找不到真人联系方式

中优先级

想买、想问、想投诉的人没有出口。这是转化漏洞,也是信任漏洞。

页脚放一个能用的邮箱、表单,或真实社交账号。一个就够。

no mailto / telegram / x / github / email

图片没有 alt

中优先级

没有 alt,读屏到这里就断了,搜索也会减分。装饰图可以 alt="",内容图不行。

产品和照片写短 alt。纯装饰才用空 alt。

9 images without alt

标签标题和 H1 对不上

标签、分享卡、首屏各说各的,访客就记不住这是同一个产品。

让 title、og:title 和 H1 共用同一个名词。

title="immichSlides | Immich Slides for Apple TV, iPad & iPhone" h1="Bring yourImmich photosback into view"
上线4 项观察

没有 HSTS 响应头

中优先级

没有 Strict-Transport-Security,第一次访问仍可能被降到 http。浏览器不会钉死 HTTPS。

在边缘设置 Strict-Transport-Security: max-age=31536000; includeSubDomains。

strict-transport-security missing

HTML 体积过大

中优先级

首包超过 350 KB,多半是内联垃圾:整份 CSS、JSON,或整个应用。手机还没看到标题就已经在付钱。

把 CSS 和数据移出文档。首包 HTML 控制在 200 KB 以内。

743 KB HTML

没有 Content-Security-Policy

CSP 是限制脚本源的标准做法。vibe 页面常常什么都加载,包括被注入的脚本。

先开 report-only CSP,再收成 default-src 'self' 和明确的 script-src。

content-security-policy missing

特性描述段落存在标点后连字错误

英文标点后缺少空格导致两句话粘连,显得排版未经校对。

在源码文案模板中于 'nightstand.' 后添加标准 ASCII 空格。

or a spare iPhone on a nightstand.Connect once, then let your Immich photos play
链接分享预览

05 / 开始动手

把下一步,交给你的 AI

优化指令用于调整这个页面;设计指令用于借鉴它的视觉语言。「做同款」会附带截图与实施步骤。复制后粘贴到你的代码助手中。

查看完整指令
重构营销页面的 Hero 首屏区域,消除移动端的视觉重叠问题并保持桌面端美感。

1. 移动端布局重构:
- 在小于 768px 的视口(重点测试 390px)中,取消毛玻璃卡片对电视硬件图的绝对覆盖浮层。
- 将首屏改为自上而下的标准单列流:先显示文本容器(包含小标 'FOR YOUR SELF-HOSTED IMMICH LIBRARY.'、大标题 'Bring your Immich photos back into view'、介绍文案、App Store 下载按钮以及 'Supports: iPhone · iPad · Apple TV' 标签),下方再陈列电视与照片画框图示。
- 确保白色文字与底色之间拥有不低于 4.5:1 的对比度。

2. 文案修正:
- 在 'Turn spare screens into photo frames for your home' 模块中,将 'nightstand.Connect once' 修正为带空格的 'nightstand. Connect once'。

3. 完整保留提取的设计系统变量:
- 保留背景色 #111111、--bg #f4f1e8、--paper #fffdf7、按钮圆角 999px、卡片圆角 34px 以及 Inter 字体体系。
- 在 1440x900 与 390x844 两个典型分辨率下验证视觉效果。