NDS Site Optimizations

Review of key front-end performance, efficiency, and accessibility aspects of NDS-built sites, highlighting potential improvements and optimized implementations.

  1. Site: TrumpCard.gov

    Issue: The eagle animation at the bottom appears to cycle 165 .webp images (2.6 MB) via JavaScript, with the head separate from the body. On Safari, images continue loading even when you scroll away, increasing bandwidth and document requests. Chrome and Firefox do not show this behavior.

    Efficient Solution: For better performance and reduced code and asset complexity, the same effect can be achieved with a single animated .webp (2.1 MB) or .webm (514 KB). This removes the JS frame cycling, reduces network requests, and preserves transparency. Safari has limited support for transparent video, so an animated .webp is the safest option currently.

    Demo: The demo uses a single .webp for the eagle head animation and requires no JS. Note that the brown feathers have the same slight color shift as the original assets.

    View Demo

  2. Site: Freedom.gov

    Issue: Based on the markup and behavior, the .mp4 horse animation appears to use a <canvas> layer to remove the black background and create transparency. If so, each frame is probably being decoded and processed through a canvas/WebGL pipeline rather than relying on the browser's native video compositing. The video also contains both color and white versions of the horse animation, likely to help the canvas/WebGL layer achieve the transparent effect.

    Efficient Solution: For better performance and reduced code and asset complexity, the same visual effect could be achieved using an animated .webp or optimized .mp4 with CSS mix-blend-mode, removing the need for a canvas layer. This lets the browser handle decoding and compositing natively, reducing file size, runtime complexity, and sustained GPU overhead.

    Demo: The animation on the left shows the .webp (112KB) version and the animation on the right shows the .mp4 (134KB) version, with both using mix-blend-mode. As comparison, the .mp4 on the current site is 280KB.

    Note that following this approach while using the original assets would ensure color accuracy, and possibly remove the need for mix-blend-mode if they already have a transparent background.

    View Demo