Does adding Three.js to my site hurt my Google rankings?

Only if it's built badly. Google ranks HTML and can't read pixels in a canvas — so the risk is real when copy or links live inside the 3D. Keep every word in server-rendered HTML and let the scene decorate it, and rankings are unaffected. The checker above flags where you're exposed.

Will a WebGL hero become my LCP element?

It will if you let it, and that usually tanks the score because the canvas paints only after shaders compile. I keep a static poster or the H1 as the largest paint, then fade the scene in behind it. Your LCP stops depending on the GPU.

How do you keep INP green with a render loop running?

The loop gets a frame budget, pauses when the canvas scrolls out of view, and stops on hidden tabs. Heavy work is throttled or moved off the main thread. Taps and scrolls answer on time even while the scene animates.

Can you make an existing Three.js scene faster instead of rebuilding it?

Often yes. Many of these jobs are surgical: cap the pixel ratio, lazy-mount the canvas, reserve layout to kill CLS, compress the glTF, and pull content out of the canvas into HTML. I'll tell you honestly whether a fix or a rebuild is cheaper.

What happens on phones or devices without WebGL?

They get a designed static state — a poster image and the real HTML — not a black rectangle. I gate the full scene behind device and connection checks, and respect reduced-motion, so the slow path still looks intentional.

How do I start, and what does it cost?

Run the checker, then send the form with thread "An app" and your scene's numbers. Scope drives price, so I quote after seeing the target — free and itemized. You talk to me, the person who builds it, at hello@davidweaver.codes.

3D that keeps CWV green

Your search, knit into cloth. The checker below is the honest answer.

Three.js development that ships 3D without wrecking Core Web Vitals.

You searched three js development services, but the worry underneath is simpler: will 3D wreck my Core Web Vitals and hide my content from Google? It can. A canvas that paints late becomes your LCP element. A render loop that never yields the main thread ruins INP. That is how most 3D sites quietly lose rankings.

None of that is inherent to WebGL — it is a scoping choice. The fix is architectural. The H1 stays your LCP. The three.js bundle loads after first paint, not before it. Every word Google needs lives in HTML the canvas never touches. Build it that way and the 3D costs you nothing in search.

I'm David Weaver. I built the interactive WebGL loom on this site's homepage — real running proof you can pull apart, not a screen recording. Run the checker below with your scene's numbers. It tells you, client-side and free, whether your 3D is a CWV risk before you commission a single frame.

Will your 3D pass Core Web Vitals?

Will 3D hurt my SEO? — CWV checker

Configure how you'd ship WebGL. Get a risk score for Core Web Vitals — deterministic, no black box.

When does Three.js mount?

Device scaling

Engineering guards

Green neighborhood

Risk 14/100

This architecture can keep LCP on the headline and CWV green — same posture as the loom on this site. Want it built, not just checked?

Engineer 3D the right way See everything I've shipped

Where 3D actually breaks Core Web Vitals

Three failure modes cause almost every bad score. LCP: the canvas becomes the largest paint and renders only after a slow shader compile, so your headline never wins the metric. INP: the render loop hogs the main thread, so taps and scrolls answer late. CLS: the canvas mounts with no reserved height and shoves the page down as it appears.

There is a quieter fourth cost. Anything drawn into a canvas is invisible to a crawler. Put your value proposition in WebGL text and Google sees a blank box. The scene should decorate meaning, never carry it. That one rule is what keeps a 3D site indexable.

3D done wrong vs. done right, metric by metric

This is the checklist I build to. Ask any three.js vendor to fill in the right-hand column before you sign.

Metric	How 3D usually breaks it	How I ship it instead
LCP	Canvas is the largest paint and waits on shaders	A static poster or the H1 is LCP; the scene fades in behind it
INP	Render loop never yields the main thread	Capped frame budget; the loop pauses off-screen and on hidden tabs
CLS	Canvas mounts with no reserved space	A fixed aspect-ratio box holds the layout before mount
Crawl / index	Copy lives inside the canvas, invisible to Google	All content is HTML-first; the canvas is decoration only
Low-end / mobile	The full scene ships to a $150 phone	Device and connection checks gate a static fallback below the bar

Reduced-motion is a designed state, not an afterthought — the scene has a still version for anyone whose system asks for one.

What you're commissioning, and where this page stops

A commission here is the architecture above, shipped and measured: a static LCP that never moves, a scene lazy-mounted after first paint, a capped frame and pixel-ratio budget, a no-WebGL fallback, and real HTML underneath that ranks even if the GPU quits. You get staging links to test on your own phone before launch, and the numbers to prove the scores held.

This page is about keeping 3D safe for performance and search. If you just want to hire the person, the three js developer page is the front door. If you want to judge the work first, the portfolio page has live scenes to tear apart. Same builder, three doors — pick the one that matches where you are.

Proof over promises

Open the work. Judge it live.

2026 · Software · Shipped

Black Nile

A conversational website builder where small businesses talk, a site appears, and their own AI answers customers — metered to the credit.

dweaveai.space — DWeaveAi official music site

2026 · Sound · Shipped

DWeaveAi Fan Funnel

A static fan funnel, live at dweaveai.space — one owned landing page per song, routing listeners to every streaming platform.

2026 · Games · Prototype

Star Hopper: Midnight Ascent

Run. Slide. Survive. One engine that outlived three different game concepts.

Straight answers

Asked often. Answered honestly.

Does adding Three.js to my site hurt my Google rankings?: Only if it's built badly. Google ranks HTML and can't read pixels in a canvas — so the risk is real when copy or links live inside the 3D. Keep every word in server-rendered HTML and let the scene decorate it, and rankings are unaffected. The checker above flags where you're exposed.
Will a WebGL hero become my LCP element?: It will if you let it, and that usually tanks the score because the canvas paints only after shaders compile. I keep a static poster or the H1 as the largest paint, then fade the scene in behind it. Your LCP stops depending on the GPU.
How do you keep INP green with a render loop running?: The loop gets a frame budget, pauses when the canvas scrolls out of view, and stops on hidden tabs. Heavy work is throttled or moved off the main thread. Taps and scrolls answer on time even while the scene animates.
Can you make an existing Three.js scene faster instead of rebuilding it?: Often yes. Many of these jobs are surgical: cap the pixel ratio, lazy-mount the canvas, reserve layout to kill CLS, compress the glTF, and pull content out of the canvas into HTML. I'll tell you honestly whether a fix or a rebuild is cheaper.
What happens on phones or devices without WebGL?: They get a designed static state — a poster image and the real HTML — not a black rectangle. I gate the full scene behind device and connection checks, and respect reduced-motion, so the slow path still looks intentional.
How do I start, and what does it cost?: Run the checker, then send the form with thread "An app" and your scene's numbers. Scope drives price, so I quote after seeing the target — free and itemized. You talk to me, the person who builds it, at hello@davidweaver.codes.

The checker gave you a risk read. Send me your scene's numbers and I'll tell you what to fix first — free, from the builder.

Scope my CWV-safe 3D See everything I've shipped