Set a boundary around the expensive part

This website uses one procedural Three.js object in the hero. The object is an enhancement, not the page’s information structure. The headline, navigation, links and content are server-rendered. They do not wait for a renderer to become available.

The renderer is dynamically imported for eligible desktop viewports with motion enabled and no Save-Data preference. Smaller screens and reduced-motion users receive a composed SVG version of the same motif. This is a deliberate alternative, not an error screen.

The broader lesson is to identify the feature that needs browser execution and isolate it. Making an entire marketing page interactive because one visual needs a pointer handler gives unrelated content an unnecessary cost.

Render when something changes

The Relay responds to pointer movement and a short user-triggered action. When the scene settles, it stops requesting frames. It also pauses when offscreen or when the document is hidden. Device pixel ratio is capped at 1.5, and geometry and materials are reused.

These choices are visible in the implementation rather than inferred from a score. They limit ongoing rendering work, especially when a visitor has already moved on to the projects or articles. Disposal removes listeners and observers and releases the scene’s resources.

A decorative loop can consume resources long after it has stopped communicating anything. Before adding one, ask what information the changing frame supplies to the person looking at it.

Keep useful behavior when enhancement fails

The static hero remains present beneath the canvas. If WebGL is unavailable or its context is lost, that visual remains the intended composition. Reduced motion keeps the action’s understandable result without requiring the spatial sequence.

The contact form also has a native server path. Navigation uses semantic links and a disclosure menu. These decisions preserve a route through the site when JavaScript is delayed or unavailable; they are not substitutes for making the enhanced path work well.

  • The important text is present before the animation starts.
  • The page has a coherent reduced-motion composition.
  • A failed visual does not hide the CTA or navigation.
  • Below-fold media loads when needed.
  • Interaction listeners and animation work are cleaned up.

Measure loading, responsiveness and stability separately

Google’s Core Web Vitals describe loading through LCP, responsiveness through INP and visual stability through CLS. The recommended good thresholds are LCP at or below 2.5 seconds, INP at or below 200 milliseconds and CLS at or below 0.1, evaluated at the 75th percentile.

A laboratory score and field data answer different questions. A local test can reveal a regression under controlled conditions. It does not prove how a deployed page behaves across real devices, networks and user journeys. Keep that distinction explicit when reporting results.

Make performance part of the design review

Review the first action on a narrow screen, not only the hero on a fast laptop. Check layout movement as fonts and images arrive, delays when controls are used, and rendering that continues when the visual is offscreen. Repeat these checks after meaningful design changes.

Fast feedback, readable content and stable controls make a product easier to use. They also help teams maintain it: a clearly isolated enhancement is easier to change without disturbing the rest of the system.

The goal is not to remove ambition. It is to spend browser work on the moments where it earns its place, while keeping the main journey dependable.