GitHub

Making GitHub’s new homepage fast and performant

Jan 29, 2021Tobias Ahlin
Making GitHub’s new homepage fast and performant
SummaryAI, from the source post

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.

More from the Client-side Caching for Issues Navigation trail