Swizec Teller - a geek with a hatswizec.com

    The surprising performance boost from changing gif embeds

    wanna hear something cool?

    You can 2x your Lighthouse performance score just by changing how you embed 8 gifs on a gigantic 6000 word page with 130 requests and 16megs of data.

    Change in Lighthouse score after change
    Change in Lighthouse score after change

    whoa giphy

    How I found out

    On the internet, ain't nobody got time to read 3 paragraphs of emotion setting. You'd find it boring.

    So we use gifs.

    pratt_surprise giphy

    But looking for gifs breaks your writing flow. You leave the editor, go on giphy, search for the emotion, dig through the search results, copy paste the link, go back to your editor ...

    Wait what was I saying? ๐Ÿค”

    Happens every time. Slows you down. Wasted effort.

    What if you could find the perfect gif without leaving your editor? Write a search right in your markdown?

    ![](giphy:pratt_surprise)

    Becomes

    pratt_surprise giphy

    Been using that with TechLetter.App for over a year now and it is wonderful. Saves so much time and effort. ๐Ÿ‘Œ

    This weekend I turned it into my first Gatsby plugin โ€“ gatsby-remark-giphy.

    Now you can use it too โค๏ธ

    Click through for source
    Click through for source

    3 ways to embed a gif

    gatsby-remark-giphy supports 3 ways to embed a gif

    • plain <img>
    • using HTML5 video
    • as an iframe

    Configure via gatsby-config.js and the plugin changes how it transforms markdown nodes.

    Here's what happens.

    At build time, gatsby-remark-giphy visits each markdown image node whose URL starts with giphy:, pings the Giphy API, and runs 1 of 3 functions:

    • embedGif
    • embedVideo
    • embedIframe

    embedGif

    Click through for source
    Click through for source

    To embed a gif, we maintain the markdown-ness of this node. Change the URL to the search result and add a title. Further markdown transformers will turn it into a regular image.

    Something like this:

    Click through for source
    Click through for source

    This is the slowest.

    9543257d7dd2cbf88a0009844cbe7e2900309101 68747470733a2f2f692e696d6775722e636f6d2f6c6852647169452e706e67

    You're loading the gif as soon as the page renders. Whether it's visible or not. And you have to wait for the whole gif to download before it plays.

    embedVideo

    Click through for source
    Click through for source

    Here we change the node into HTML and tell markdown exactly what to do. The gif becomes an HTML5 video element playing an mp4.

    Adding autoplay loop muted playsinline makes it behave like a gif. But with one crucial difference ๐Ÿ‘‰ mp4 is optimized for streaming.

    That means your browser can play the video while it's downloading. And the filesize is smaller.

    2.29MB gif vs. 1.09MB mp4 for our surprise example. ๐Ÿคฏ

    This is the fastest.

    f04e81be56821573c3b13431282e080864c48c94 68747470733a2f2f692e696d6775722e636f6d2f6e305a32536c562e706e67

    But this result is suspicious, we'll get to that.

    embedIframe

    Click through for source
    Click through for source

    Similarly to the video embed, we change the node to HTML and tell markdown exactly what to do.

    Create an iframe Giphy embed in this case. I borrowed the code from gatsby-remark-embedder and added loading="lazy" to speed things up.

    The result is an iframe with some annoying Giphy branding on mouseover and a nice Lighthouse boost.

    c1QcNNs

    8719b20c378309194a227a90f89c1788112c1a16 68747470733a2f2f692e696d6775722e636f6d2f514935426152702e706e67

    What's interesting is that Giphy's iframe embeds a webp version of the gif that's just 880KB for our surprise example. ๐Ÿคจ

    So iframe should be fastest, right?

    loading="lazy"

    loading="lazy" is a new native implementation of lazy loading. Mark something as lazy and the browser avoids loading it until it's visible.

    I think it's only supported on Chrome right now, but that's where we measure Lighthouse scores isn't it? Also what Google cares about when determining page speed for that sweet sweet SEO boost ๐Ÿ˜›

    Lazy loading will almost always give you a speed boost and improve user experience.

    Where my results get tricky is that the <video> element does not support loading=lazy. And yet it still gave me a Lighthouse performance boost. From 44 to 63 ...

    Maybe it's a Lighthouse bug? ๐Ÿค”

    Either way, <video> is much better than <img> and I don't like the overlays and extra tracking that comes with <iframe>.

    shrug giphy

    Cheers,
    ~Swizec

    PS: I benchmarked using the ServerlessReact.Dev landing page, changing how 8 gifs are embedded and nothing else.

    Did you enjoy this article?

    Published on April 6th, 2020 in Front End, Technical,

    Learned something new?
    Read more Software Engineering Lessons from Production

    I write articles with real insight into the career and skills of a modern software engineer. "Raw and honest from the heart!" as one reader described them. Fueled by lessons learned over 20 years of building production code for side-projects, small businesses, and hyper growth startups. Both successful and not.

    Subscribe below ๐Ÿ‘‡

    Software Engineering Lessons from Production

    Join Swizec's Newsletter and get insightful emails ๐Ÿ’Œ on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.

    "Man, love your simple writing! Yours is the only newsletter I open and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. ๐Ÿ‘Œ"

    ~ Ashish Kumar

    Join 15,883+ engineers learning lessons from my "raw and honest from the heart" emails.

    โญ๏ธโญ๏ธโญ๏ธโญ๏ธโœจ
    4.5 stars average rating

    Have a burning question that you think I can answer? Hit me up on twitter and I'll do my best.

    Who am I and who do I help? I'm Swizec Teller and I turn coders into engineers with "Raw and honest from the heart!" writing. No bullshit. Real insights into the career and skills of a modern software engineer.

    Want to become a true senior engineer? Take ownership, have autonomy, and be a force multiplier on your team. The Senior Engineer Mindset ebook can help ๐Ÿ‘‰ swizec.com/senior-mindset. These are the shifts in mindset that unlocked my career.

    Curious about Serverless and the modern backend? Check out Serverless Handbook, for frontend engineers ๐Ÿ‘‰ ServerlessHandbook.dev

    Want to Stop copy pasting D3 examples and create data visualizations of your own? Learn how to build scalable dataviz React components your whole team can understand with React for Data Visualization

    Want to get my best emails on JavaScript, React, Serverless, Fullstack Web, or Indie Hacking? Check out swizec.com/collections

    Want to brush up on modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com

    Did someone amazing share this letter with you? Wonderful! You can sign up for my weekly letters for software engineers on their path to greatness, here: swizec.com/blog

    Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com

    By the way, just in case no one has told you it yet today: I love and appreciate you for who you are โค๏ธ

    Created by Swizec with โค๏ธ