THREE.JS, WEBGL, AND SEARCH
Can a 3D website rank and stay fast?
It can, but 3D alone is not enough. Keep the text and links in a normal web page. Make them work even if the 3D does not load. Then test the page on phones as well as computers.
START WITH A USEFUL PAGE
Keep the text outside the 3D.
A canvas is the part of a web page where the browser draws 3D. It should not hold the only version of your service details. Put titles, prices, links and contact tools in normal HTML, the code used for page text and controls.
Send useful page content first, then load the scene. Leave space for it so text does not jump around. If the scene fails, people should still understand the offer and contact you. Google also recommends sending ready-made page content when possible. See its JavaScript SEO guidance.
Give useful images useful text.
Show key project or product images as normal page images, not only inside the 3D. Use a clear filename, a short caption and alt text that describes what matters. Alt text helps people who cannot see the image. Pure decoration can have empty alt text.
A 3D product view can sit beside a photo gallery. A video can have a still image and a written transcript. Google explains how in its image guide and video guide.
Check speed before adding more effects.
Google’s Core Web Vitals check loading, response time and page movement. A good result means the main content loads within 2.5 seconds (LCP), actions respond within 200 milliseconds (INP), and unexpected movement stays at or below 0.1 (CLS). These limits apply to at least 75% of recorded visits.
A Lighthouse test is a useful check under set conditions. It is not the same as measuring real visitors, and a high score does not prove the site brings in customers.
| What to check | What can help | What can go wrong |
|---|---|---|
| Page code | Load heavy 3D code only when it is needed. | Buttons may respond late while the browser is busy. |
| Drawing the scene | Limit detail and reuse repeated objects. Pause work that is not visible. | Phones may get hot and movement may stutter. |
| Images and models | Use smaller files and load only what the view needs. | Large files delay the rest of the page. |
| Page layout | Reserve space before images and videos load. | Text and buttons can jump while someone uses them. |
| Movement | Respect the visitor’s reduced-motion setting. | Unwanted motion can make the page hard to use. |
Threshold source: web.dev’s Core Web Vitals definition.
CHOOSE THE RIGHT TOOL
Sometimes an image does the job better.
| Medium | Best use | Main cost | Fallback |
|---|---|---|---|
| CSS motion | Simple button and text movement. | Cannot show a full 3D scene. | A still page. |
| A set of images | A fixed view that changes as you scroll. | Many files to load. | One useful image. |
| Video | The same view for every visitor. | File size and fewer controls. | A still image and written transcript. |
| Three.js/WebGL | Letting visitors move a view or change product options. | More build work, device power and testing. | Page text with images or video. |
If visitors do not need to change the view, a prepared image or video may be enough. Use live 3D when moving or changing something helps them understand it.
Let people use the page their way.
- Make menus, forms and links work with a keyboard, outside the 3D.
- Use readable colours, a visible keyboard focus and a link to skip the menu.
- Respect the reduced-motion setting. Remove extra movement, not useful content.
- Test small screens, slow connections and devices that cannot run the 3D.
- Stop drawing and release the scene’s memory when it is no longer needed.
Write down how the test was run.
Test the finished build, not just the developer’s preview. Check page text, links, forms and search labels. Test phone and desktop layouts. For speed results, record the date, page, device settings, network settings and tool version. Say whether the site was local or live.
After launch, use real visitor data when it is available. Google Search Console can show search visits and speed reports. A test score cannot tell you everything.
AI search uses many of the same basics. Google does not require special AI files or special search labels. Useful content and pages it can read still matter. Read Google’s guide to AI search features.
BEFORE YOU BUY
Ask these questions.
Want a practical handover sheet? Use our free website launch checklist. It covers 24 checks for your offer, forms, phone experience, search access and ownership, with a printable copy and no sign-up.
- What will the 3D help a visitor understand?
- What can they still do if it does not load?
- Which phones will be tested, and how much must they download?
- Can search tools read the main text and images?
- Will the site work with a keyboard and reduced motion?
- Where do enquiries go, and who replies?
Compare 3D website design, custom Three.js work, our working demo and prices. Ready to choose? Get my free quote.