Company
Date Published
Author
Tobias Ahlin
Word count
1541
Language
English
Hacker News points
None

Summary

In the third part of a series on building GitHub's new homepage, the focus is on optimizing performance through high-performance animations and effective image handling. By replacing traditional scroll event listeners with IntersectionObservers, animations are triggered more efficiently, reducing CPU usage and improving Cumulative Layout Shift scores. The team also refined animations by explicitly defining only opacity and transform as animatable properties to prevent unnecessary style recalculations. To optimize video performance, IntersectionObservers are used to play videos only when visible, complemented by setting preload to none to save bandwidth. Additionally, the use of WebP images offers a balance of compression and transparency, though older browsers require a fallback using SVGs with embedded base64-encoded JPGs. This approach enhances page load efficiency, demonstrating GitHub's commitment to creating a faster, more reliable web experience.