我如何在 WebGL 3D 着陆页中发现并修复 5 个关键的 Lighthouse 问题（使用 Python CLI）
Source: Dev.to
几个月前，我在构建一个嵌入 3D 工业模型的 B2B 落地页。视觉效果很好，但 Lighthouse 给了它 42 / 100 的得分。下面是我发现的五个关键问题以及对应的解决方案。
1. 字体粗细过多（8 次请求，而不是 3 次）
Google Fonts 为 Inter 加载了 wght@300;400;500;600;700;800，并为 JetBrains Mono 加载了两个粗细——共计八个独立的 HTTP 请求，每个请求都会阻塞渲染。
解决方案： 只保留实际需要的粗细，例如 wght@400;600;700。这样大约节省了 400 ms。
2. <head> 中的脚本（阻塞渲染）
WebGL 脚本 (model‑viewer.min.js, ~300 KB) 被放在 <head> 中，导致所有资源被阻塞。
解决方案： 将其移到 <body> 末尾，并使用 type="module" 让其自动延迟加载。
) -->
) -->3. 缺少 preconnect 和 dns-prefetch
页面依赖外部资源（Google Fonts、二维码 API 以及 model‑viewer CDN），但没有 <link rel="preconnect"> 标签。每个域名都需要完整的 DNS 查询和 TLS 握手才能加载资源。
解决方案： 在 <head> 中为所有外部域名添加 preconnect（可选地再加 dns-prefetch）。
4. Hero 图像使用 loading="lazy"
我对 所有 图片都使用了 loading="lazy"，包括页面顶部的 hero 图像。这导致最重要的视觉元素被延迟加载，影响了 Largest Contentful Paint (LCP)。
解决方案： 将 hero 图像设置为 loading="eager" 并添加 fetchpriority="high"。其余折叠以下的图片仍保持懒加载。
[Image: Hero]5. 静默的 SEO 杀手：向 JSON‑LD 注入 JavaScript
Particle.js 动画把回调代码注入到了 <script type="application/ld+json"> 块中。页面表面上可以正常渲染，但 JSON‑LD 变得无效，导致 Google Search Console 停止索引 Product rich snippet。这个问题我在三个月后的结构化数据审计中才发现。
解决方案： 确保运行时的 JavaScript 不会修改 JSON‑LD 块。可以在服务器端生成 JSON‑LD，或保持其为静态内容。
解决方案：web-performance-surgeon
为了自动化检测和修复，我编写了一个 Python CLI，能够扫描并可选地修复上述所有问题。
# 仅审计 – 显示所有问题
python web_performance_surgeon.py index.html
# 审计 + 自动修复全部
python web_performance_surgeon.py index.html --fix应用修复后的最终 Lighthouse 得分： 98 / 100。
伴随工具
json-ld-schema-guardian– 扫描 JSON‑LD 块是否被 JavaScript 注入。static-dom-surgeon– 大规模外科式修改 HTML 元素（例如使用 BeautifulSoup 更新 21 张产品卡片）。b2b-landing-page-checklist– 从本项目提炼出的 50 项上线前检查清单。
所有工具均免费且开源。
你之前是否遇到过 JSON‑LD 注入的 bug？我很好奇这个问题是否比表面上更常见。