How I Fixed a 42/100 Lighthouse Score on a B2B 3D WebGL Landing Page (and Open-Sourced the Fix)

Tan Phan — Sun, 26 Apr 2026 00:40:25 +0000

A few weeks ago, I was building a B2B landing page that embedded an industrial 3D model using <model-viewer>. The page looked fantastic. Then I ran Lighthouse.

Score: 42/100.

Here are the silent killers I found - and what made them non-obvious:

1. The Font Weight Trap (8 requests instead of 3)

Google Fonts was loading wght@300;400;500;600;700;800. That's 6 weights for Inter plus 2 for JetBrains Mono = 8 separate HTTP requests just for fonts.
Each one is render-blocking.
The fix: Reduce to exactly the weights used (400;600;700). Saved ~400ms.

2. `<model-viewer>` Blocking the Main Thread

The WebGL script was 300KB. Sitting right in the <head>.
The fix: Move it to the very end of the <body>. Use type="module" so the browser defers it automatically.

3. The Silent SEO Killer: JavaScript in JSON-LD

This was the nastiest bug.
A background animation (Particle.js) was running on the page. Due to a weird timing issue, it injected callback code directly into my <script type="application/ld+json"> block.
The page looked perfect visually. No console errors. But the JSON-LD was now invalid. Google Search Console quietly dropped my rich snippets for 3 months before I noticed.

The Open-Source Fix: `web-performance-surgeon`

I got tired of hunting these issues manually, so I built a Python CLI that scans your HTML and auto-fixes all of them in one go:

# Audit only - shows all issues
python web_performance_surgeon.py index.html

# Audit + auto-fix everything
python web_performance_surgeon.py index.html --fix

Final score after fixes: 100/100 Lighthouse.

I've open-sourced this tool along with my entire B2B web toolchain (including a JSON-LD guardian that specifically catches the injection bug):
GitHub: tanphan1105/web-performance-surgeon

Has anyone else run into that JSON-LD corruption bug? It's terrifying how silently it fails.

How I Found and Fixed 5 Critical Lighthouse Issues in a WebGL 3D Landing Page (With a Python CLI)

Tan Phan — Sun, 26 Apr 2026 00:07:34 +0000

A few months ago, I was building a B2B landing page that embedded a 3D industrial model using . The page looked great visually. Then I ran Lighthouse.

Score: 42/100.

Here are the 5 issues I found -- and what made each one non-obvious:

1. Too Many Font Weights (8 requests instead of 3)

Google Fonts was loading wght@300;400;500;600;700;800 -- 6 weights for Inter plus 2 for JetBrains Mono = 8 separate HTTP requests just for fonts.

Each one is render-blocking. The fix: reduce to wght@400;600;700. Saved ~400ms.

2. Script in (Render-Blocking)

The WebGL script was 300KB. Sitting in

. Blocking everything.

Fix: Move it to the end of

. Use type="module" so it defers automatically.

<!-- Before (in <head>) -->
<script src="model-viewer.min.js" type="module"></script>

<!-- After (end of <body>) -->
<script type="module" src="model-viewer.min.js"></script>

3. Missing preconnect and dns-prefetch

The page used Google Fonts, a QR code API, and the model-viewer CDN -- but had zero preconnect tags. Each domain needed a full DNS lookup + TLS handshake before any resource could load.

Fix: Add preconnect for all external domains in

4. Hero Image Set to loading="lazy"

Someone (me) had applied loading="lazy" to ALL images including the hero image at the top of the page. The browser would defer loading the most important image -- the one that determines LCP.

Fix: Hero image gets loading="eager" and fetchpriority="high". Everything below the fold stays lazy.

5. The Silent SEO Killer: JavaScript Injected Into JSON-LD

This one is the nastiest bug.

A Particle.js animation was running on the page. Due to a timing issue, it appended animation callback code into a block. The page looked perfect in the browser. No console errors. But the JSON-LD was now invalid. Google Search Console quietly stopped indexing the Product rich snippet. I only found out 3 months later when I ran a structured data audit. <hr> <h2> <a name="the-fix-webperformancesurgeon" href="#the-fix-webperformancesurgeon" class="anchor"> </a> The Fix: web-performance-surgeon </h2> I got tired of hunting these issues manually, so I built a Python CLI that scans and auto-fixes all of them: <div class="highlight"><pre class="highlight shell"><code># Audit only -- shows all issues python web_performance_surgeon.py index.html # Audit + auto-fix everything python web_performance_surgeon.py index.html --fix </code></pre></div> Final score after fixes: 98/100 Lighthouse. I also built companion tools for the other issues: <ul> <li>json-ld-schema-guardian -- specifically scans for JS injection into JSON-LD blocks</li> <li>static-dom-surgeon -- surgically patches HTML elements at scale (used BeautifulSoup to patch 21 product cards without touching surrounding code)</li> <li>b2b-landing-page-checklist -- 50-point pre-launch checklist with all the lessons from this project</li> </ul> All free and open source: <a href="https://github.com/tanphan1105">github.com/tanphan1105</a> <hr> Have you run into the JSON-LD injection bug before? Curious if this is more common than I think.

DEV Community: Tan Phan