Making GitHub’s new homepage fast and performant
Jan 29, 2021Tobias Ahlin

Summary
This post details two key performance optimization strategies for the GitHub homepage: 1) High-performance animation and interactivity using IntersectionObservers to avoid scroll event listeners and reflows, and explicitly animating only `transform` and `opacity` properties. It also covers lazy-loading videos with IntersectionObservers. 2) Serving the perfect image by leveraging WebP for modern browsers and an SVG-based transparent JPG fallback for older browsers, embedding base64 encoded images within the SVG for a single HTTP request.