PERFORMANCE
Improving performance without removing motion
The issue is often not motion itself, but invisible scenes continuing to do work.
This article offers a decision framework, not a substitute for project-specific scoping and technical validation.
Measure first
Examine initial load, scrolling and interaction separately on the same device and viewport. Smaller files can help, but file size alone is not a real-device smoothness or Core Web Vitals result.
Avoid work for invisible scenes
Pause particle drawing after the hero leaves the viewport, suspend work in hidden tabs and update only relevant scenes. Reduced-motion preferences should work without removing information.
Separate rendering from layout
Avoid remeasuring dimensions and positions every frame. Cache stable geometry when resizing. Use transform and opacity where appropriate, and apply will-change selectively rather than permanently to every element.
Images and initial load
The key above-the-fold image and below-the-fold images do not have the same priority. Use appropriately sized assets, stable aspect ratios and lazy loading. Prefer cacheable files over repeatedly embedding large assets in HTML.
Acceptance
Content and links must work with motion disabled. After optimization, retest card order, closing menus, back navigation and touch interactions. Lost functionality is not a successful performance improvement.
Example budget: the same scene, less unnecessary work
Imagine an opening with moving particles, a text transition and three project previews. Removing the scene is not our first choice. We inspect whether particles keep drawing below the fold, whether the loop runs in a hidden tab and how much work a pointer movement triggers.
Instead of writing “it feels smoother,” record concrete changes: an off-screen drawing loop stopped, event listeners were removed after navigation or a large unused image left the initial load. These are implementation changes, not measured outcomes on a physical device. Compare before and after on the same device, network and motion preferences.
Review motion together with visual quality
If optimization changes card timing, text order or menu closing behaviour, a better technical score is not sufficient. Preserve the approved choreography and treat reduced motion as a deliberate alternative. Essential content should not remain inaccessible until an animation reaches its final frame.
Test repeated scrolling, reopening the menu, resizing and returning to the tab. Some failures appear when a scene is initialized for a second time rather than on first load. Reserve image space and do not put readable content exclusively inside canvas. This article does not provide Lighthouse or Core Web Vitals results for a specific site. Any published score should include its measurement conditions and record.