# GPU Landing Page Performance Checklist

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

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 is 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](https://xiry.app/topics/development.md)
- 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](https://x.com/omma_ai/status/2037563616346677260): A reusable checklist of WebGPU/3D landing page performance fixes.

## Related

- [three.js examples](https://xiry.app/resources/three-js-examples): Official gallery of interactive 3D WebGL and WebGPU demonstrations and code (Website, Open source)
- [Liquid DOM](https://xiry.app/resources/liquid-dom): WebGPU library rendering Apple-style liquid glass materials for the web. (GitHub repo, Open source)
- [Shaders](https://xiry.app/resources/shaders): Open-source WebGPU shader component library and free design editor. (Web app, Open source)
- [Omma](https://xiry.app/resources/omma): AI builder for interactive 3D websites, scenes, and web apps (Web app, Freemium)
- [Anchoring DOM Labels to a 3D Globe with CSS Anchor Positioning](https://xiry.app/resources/anchoring-dom-labels-to-a-3d-globe-with-css-anchor-positioni): Declaratively anchor and toggle DOM markers on 3D scenes with CSS (Tip, Free)
- [Animmaster Lib](https://xiry.app/resources/animmaster-lib): Catalog of 300 animated frontend UI components, shaders, and effects (Website, Paid)

Updated 11 October 2026. Page: https://xiry.app/resources/gpu-landing-page-performance-checklist

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.