xiry.

Development · Tip

GPU Landing Page Performance Checklist

Audit checklist to optimize WebGPU, Three.js, and 3D web performance.

From the Xiry library · Updated 11 October 2026

A practical checklist of technical fixes to eliminate stutter and frame drops on graphics-heavy landing pages. It targets common bottlenecks like layout thrashing, repetitive DOM lookups, and unoptimized shader compilations. Use it when profiling or refactoring complex 3D experiences and canvas animations.

How it works

What was changed: (1) Pre-warm pipeline — renders 3 hidden frames after init so shader compilation happens before users see anything, eliminating initial stutter. (2) IntersectionObserver replaces scroll-based reveal checks via getBoundingClientRect caching. (3) Cached DOM queries — querySelector and scroll-related elements looked up once, not every frame. (4) Scroll read batching — scroll position recalculated only when a scroll event actually fires (dirty flag), avoiding redundant layout reads. (5) Debounced resize — prevents expensive resize ops from firing rapidly. (6) Adaptive DPR — smaller screens cap pixel ratio (~1.5x) for a meaningful GPU workload reduction. Suggested: add a simple GPU-tier detection (e.g. check renderer.info) and for lower performance devices lower BLADE_COUNT to ~90k for a big FPS boost with minimal visual difference.

What it's for

  • Audit 3D and WebGPU landing pages for common frame-rate bottlenecks
  • Eliminate first-frame stutter caused by synchronous shader compilation
  • Prevent layout thrashing during scroll-driven 3D camera animations

Key points

  • Pre-warm pipeline by rendering hidden frames after initialization to handle shader compilation offscreen
  • Replace scroll event getBoundingClientRect checks with IntersectionObserver
  • Cache DOM query results outside the animation loop rather than querying each frame
  • Batch scroll reads using a dirty flag so layout positions recalculate only on actual scroll events
  • Debounce viewport resize handlers to prevent repetitive render buffer recreation
  • Implement adaptive device pixel ratio (DPR) caps and GPU-tier asset scaling

Pricing

Free

Details

Type
Tip
Category
Development
Topic
Performance Optimization
Open source
No
Platforms
Web
For
Creative technologists and frontend developers building WebGPU or Three.js landing pages.
Tags
webgpu, threejs, web performance, optimization, 3d, creative coding

Why it was saved

  • @omma_ai, 27 March 2026: A reusable checklist of WebGPU/3D landing page performance fixes.

Related

Updated