Making GitHub’s new homepage fast and performant

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.

Use this post, company, and trend context to find content marketing opportunities, perform competitive analysis, or address product feature gaps via the Plushcap MCP server or the Plushcap API.