optimization case-study

Assaf Katz

I’ve always seen the development process as a natural continuation of UX design.

For example, fast page loading is one of the keys to a great user experience, something both designers and developers must keep in mind. I wanted to share some steps we at W4 have taken to improve the page loading performance on our latest web development project – BrainSpace’s website, all while meticulously preserving the exact design envisioned by T&Y’s creative team. This balancing act between performance and aesthetic was crucial to maintaining the integrity of the original concept while ensuring a seamless user experience.

With more than 15 videos and over 150 images, BrainSpace’s site is incredibly media-rich, which made optimization absolutely essential.

Here’s some of what we did:

01. Dual Video Formats

Videos were used in two formats: MP4 and WebM. WebM is a relatively new  format that provides high-quality video while maintaining a smaller file size, making it an excellent choice for web content. We used the legacy MP4 format as a fallback for devices that don’t support WebM.

02.3D Code Library for Animated Backgrounds

Instead of using heavy video files, animated backgrounds were generated using a 3D code library (such as Vanta js).

03. Using WebP image sequence instead of PNG

The rotating helmet area on the homepage (controlled by scroll position) was created using an image sequence. We optimized this by using the WebP image format instead of the familiar PNG format. WebP is a modern image format that provides superior lossless and lossy compression for images on the web, helping pages load faster. (the original PNG sequence weighs 16 MB, whereas the WebP sequence weighs 6 MB – almost a third!)

04. Lazy Loading for Images and Videos

All images and videos are lazy-loaded. This means they only load when the user scrolls to their location on the page, significantly speeding up the initial page load time.

05. GSAP Animations

We Used GSAP for code-based animations instead of relying on videos or Lottie files. GSAP (GreenSock Animation Platform) is a robust library that allows for highly performant, flexible animations, providing a powerful way to engage users while maintaining fast page loads. Code animations are usually lighter in weight than any other format.

In conclusion, the importance of a quick-loading page cannot be overstated when it comes to providing a positive user experience. It’s all about merging efficient development with creative design to create seamless online experiences.

Visit the website here: brain.sapce

    * Required Fields

    This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.