Creating a page full of product shots, animations, and videos that still loads fast and performs well can be tricky. Throughout the process of building GitHub\u2019s new homepage<\/a>, we\u2019ve used the Core Web Vitals<\/a> as one of our North Stars and measuring sticks. There are many different<\/a> ways<\/a> of optimizing<\/a> for these metrics, and we\u2019ve already written about how we optimized our WebGL globe<\/a>. We\u2019re going to take a deep-dive here into two of the strategies that produced the overall biggest performance impact for us: crafting high performance animations and serving the perfect image.<\/p>\n As you scroll down the GitHub homepage, we animate in certain elements to bring your attention to them:<\/p>\n Traditionally, a typical way of building this relied on listening to the scroll event, calculating the visibility of all elements that you\u2019re tracking, and triggering animations depending on the elements\u2019 position in the viewport:<\/p>\n There\u2019s at least one big problem with an approach like this: calls to getBoundingClientRect() will trigger reflows<\/a>, and utilizing this technique might quickly create a performance bottleneck.<\/p>\n Luckily, As we moved over to One might think a reasonable implementation of the \u201conly animate transform and opacity\u201d principle might be to define a transition in CSS like so:<\/p>\n In other words, we\u2019re only explicitly changing opacity and transform, but we\u2019re defining the transition to animate all changed properties. These transitions can lead to poor performance since other property changes can pollute the transition (you may have a global style that changes the text color on hover, for example), which can cause unnecessary style and layout calculations. To avoid this kind of animation pollution, we moved to always explicitly defining only opacity and transform as animatable:<\/p>\n As we rebuilt all of our animations to be triggered through IntersectionObservers and to explicitly specify only opacity and transform as animatable, we saw a drastic decrease in CPU usage and style recalculations, helping to improve our Cumulative Layout Shift score:<\/p>\n If you\u2019re powering any animations through video elements, you likely want to do two things: only play the video while it\u2019s visible in the viewport, and lazy-load the video when it\u2019s needed. Sadly, the lazy load attribute<\/a> doesn\u2019t work on videos, but if we use Together with setting preload<\/a> to none, this simple observer setup saves us several megabytes on each page load.<\/p>\n We visit web pages with a myriad of different devices, screens and browsers, and something simple as displaying an image is becoming increasingly complex if you want to cover all bases. Our particular illustration style also happens to fall between all of the classic JPG, PNG or SVG formats. Take this illustration, for example, that we use to transition from the main narrative to the footer:<\/p>\n To render this illustration, we would ideally need the transparency from PNGs but combine it with the compression from JPGs, as saving an illustration like this as a PNG would weigh in at several megabytes. Luckily, WebP<\/a> is, as of iOS 14 and macOS Big Sur, supported in Safari on both desktops and phones, which brings browser support up to a solid +90%<\/a>. WebP does in fact give us the best of both worlds: we can create compressed, lossy images with transparency. What about support for older browsers? Even a new Mac running the latest version of Safari on macOS Catalina can\u2019t render WebP images, so we have to do something<\/i>.<\/p>\n This challenge eventually led us to develop a somewhat obscure solution: two JPGs embedded in an SVG (one for the image data and one for the mask), embedded as base64 data\u2014essentially creating a transparent JPG with one single HTTP request. Take a look at this image<\/a>. Download it, open it up, and inspect it. Yes, it\u2019s a JPG with transparency, encoded in base64, wrapped in an SVG.<\/p>\n Part of the SVG specification is the mask element<\/a>. With it, you can mask out parts of an SVG. If we embed an SVG in a document, we can use the mask element in tandem with the image element to render an image with transparency:<\/p>\n This is great, but it won\u2019t work as a fallback for WebP. Since the paths for these images are dynamic (see href in the example above), the SVG needs to be embedded inside the document. If we instead save this SVG in a file and set it as the src of a regular img, the images won\u2019t be loaded, and we\u2019ll see nothing.<\/p>\n We can work around this limitation by embedding the image data inside the SVG as base64<\/a>. There are services online where you can convert an image to base64, but if you\u2019re on a Mac, base64 is available by default in your Terminal, and you can use it like so:<\/p>\n Where the in-file is your image of choice, the outfile is a text file where you\u2019ll save the base64 data. With this technique, we can embed the images inside of the SVG and use the SVG as a src on a regular image.<\/p>\n These are the two images that we\u2019re using to construct the footer illustration\u2014one for the image data and one for the mask (black is completely transparent and white is fully opaque):<\/p>\n We convert the mask and the image to base64 using the Terminal command and then paste the data into the SVG:<\/p>\n You can save that SVG and use it like any regular image. We can then safely use WebP with lazy loading and a solid fallback that works in all browsers:<\/p>\n This somewhat obscure SVG hack saves us hundreds of kilobytes on each page load, and it enables us to utilize the latest technologies for the browsers and operating systems that support them.<\/p>\nHigh performance animation and interactivity<\/span><\/a><\/h2>\n
![](\"https:\/\/github.blog\/wp-content\/uploads\/2021\/01\/106009518-b6ad6d00-60b8-11eb-980d-061d5f414a37.gif\")
<\/p>\n\/\/ Old-school scroll event listening (avoid)\nwindow.addEventListener('scroll', () => checkForVisibility)\nwindow.addEventListener('resize', () => checkForVisibility)\n\nfunction checkForVisibility() {\n animatedElements.map(element => {\n const distTop = element.getBoundingClientRect().top\n const distBottom = element.getBoundingClientRect().bottom\n const distPercentTop = Math.round((distTop \/ window.innerHeight) * 100)\n const distPercentBottom = Math.round((distBottom \/ window.innerHeight) * 100)\n \/\/ Based on this position, animate element accordingly\n }\n}\n<\/code><\/pre>\nIntersectionObservers<\/code><\/a> are supported in all modern browsers<\/a>, and they can be set up to notify you of an element’s position in the viewport, without ever listening to scroll events, or without calling getBoundingClientRect.\u00a0 An IntersectionObserver can be set up in just a few lines of code to track if an element is shown in the viewport, and trigger animations depending on its state, using each entry\u2019s isIntersecting method:<\/p>\n\/\/ Create an intersection observer with default options, that \n\/\/ triggers a class on\/off depending on an element\u2019s visibility \n\/\/ in the viewport\nconst animationObserver = new IntersectionObserver((entries, observer) => {\n for (const entry of entries) {\n entry.target.classList.toggle('build-in-animate', entry.isIntersecting)\n }\n});\n\n\/\/ Use that IntersectionObserver to observe the visibility\n\/\/ of some elements\nfor (const element of querySelectorAll('.js-build-in')) {\n animationObserver.observe(element);\n}\n<\/code><\/pre>\nAvoiding animation pollution<\/span><\/a><\/h3>\n
IntersectionObservers<\/code> for our animations, we also went through all of our animations and doubled down on one of the core tenets of optimizing animations: only animate the transform and opacity properties, since these properties are easier for browsers to animate<\/a> (generally computationally less expensive). We thought we did a fairly good job of following this principle already, but we discovered that in some circumstances we did not, because unexpected properties were bleeding into our transitions and polluting them as elements changed state.<\/p>\n\/\/ Don\u2019t do this\n.animated {\n opacity: 0;\n transform: translateY(10px);\n transition: * 0.6s ease;\n}\n\n.animated:hover {\n opacity: 1;\n transform: translateY(0);\n}\n<\/code><\/pre>\n\/\/ Be explicit about what can animate (and not)\n.animated {\n opacity: 0;\n transform: translateY(10px);\n transition: opacity 0.6s ease, transform 0.6s ease;\n}\n\n.animated:hover {\n opacity: 0;\n transform: translateY(0);\n}\n<\/code><\/pre>\n![\"\"](\"https:\/\/github.blog\/wp-content\/uploads\/2021\/01\/106009495-af865f00-60b8-11eb-84de-b28f3281f5de.png?resize=1024%2C654\")
<\/p>\nLazy-loading videos with
IntersectionObservers<\/code><\/span><\/a><\/h3>\nIntersectionObservers<\/code> to play videos as they appear in the viewport, we can get both of these features in one go:<\/p>\n<!-- HTML: A video that plays inline, muted, w\/o autoplay & preload -->\n<video loop muted playsinline preload=\"none\" class=\"js-viewport-aware-video\" poster=\"video-first-frame.jpg\">\n <source type=\"video\/mp4\" src=\"video.h264.mp4\">\n<\/video>\n\n\/\/ JS: Play videos while they are visible in the viewport\nconst videoObserver = new IntersectionObserver((entries, observer) => {\n for (const entry of entries) entry.isIntersecting ? video.play() : video.pause();\n});\n\nfor (const element of querySelectorAll('.js-viewport-aware-video')) {\n videoObserver.observe(element);\n}\n<\/code><\/pre>\nServing the perfect image<\/span><\/a><\/h2>\n
![\"\"](\"https:\/\/github.blog\/wp-content\/uploads\/2021\/01\/106011272-99799e00-60ba-11eb-8c47-b636c1619353.jpg?resize=1024%2C561\")
<\/p>\n<svg viewBox=\"0 0 300 300\">\n <defs>\n <mask id=\"mask\">\n <image width=\"300\" height=\"300\" href=\"mask.jpg\"><\/image>\n <\/mask>\n <\/defs>\n <image mask=\"url(#mask)\" width=\"300\" height=\"300\" href=\"image.jpg\"><\/image>\n<\/svg>\n<\/code><\/pre>\nbase64 -i <in-file> -o <outfile><\/code><\/pre>\n![\"\"](\"https:\/\/github.blog\/wp-content\/uploads\/2021\/01\/106009473-ab5a4180-60b8-11eb-8da9-dd432a5c832b.jpg?resize=1024%2C606\")
<\/p>\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 2900 1494\">\n <defs>\n <mask id=\"mask\">\n <image width=\"300\" height=\"300\" href=\"data:image\/png;base64,\/* your image in base64 *\/\u201d><\/image>\n <\/mask>\n <\/defs>\n <image mask=\"url(#mask)\" width=\"300\" height=\"300\" href=\"data:image\/jpeg;base64,\/* your image in base64 *\/\u201d><\/image>\n<\/svg>\n<\/code><\/pre>\n<picture>\n <source srcset=\"compressed-transparent-image.webp\" type=\"image\/webp\">\n <img src=\"compressed-transparent-image.svg\" loading=\"lazy\">\n<\/picture>\n<\/code><\/pre>\nTowards a faster web<\/span><\/a><\/h2>\n