Swizec Teller - a geek with a hatswizec.com

Senior Mindset Book

Get promoted, earn a bigger salary, work for top companies

Senior Engineer Mindset cover
Learn more

    2 quick tips for 250% better Lighthouse scores โ€“ CodeWithSwiz 28

    Your site may be fast for users, but Google don't care. Official metrics or bust.

    CodeWithSwiz is a weekly live show. Like a podcast with video and fun hacking. Focused on experiments and open source. Join live Tuesday mornings

    When you go to ServerlessHandbook.dev it feels fast. Even with a cold cache.

    Serverless Handbook page load for users

    Vercel's edge network loads HTML fast, the CDN loads assets quickly, and Gatsby is great at quick renders and hydration. Static site โ€“ optimized for speed โ€“ turns into a React webapp optimized for interaction. Wonderful ๐Ÿ‘Œ

    The problem

    Your lighthouse scores tell a different story โ€“ the story that matters to Google and SEO.

    Bad lighthouse score
    Bad lighthouse score

    16 sucks for a performance score. Google has been hammering down on slow sites and that means you have to care.

    You and I know the page doesn't take 90 seconds to become interactive and Google don't care. If they can't measure it, they can't see it.

    250% improvement with a bit of fiddling

    An hour of fiddling gave us a 250% boost in measured performance. ๐Ÿค˜

    250% better measurable performance
    250% better measurable performance

    Plenty of room for improvement, but 40 is much better than 16. Although time-to-interactive became worse ๐Ÿคจ

    There must be a bug with how Lighthouse measures Gatsby sites, surely?

    Fix 1: Kill Youtube embeds

    Despite Google's waxing poetic about web performance and how your site must be fast in the remotest of African villages, they're the worst code you can put on your site.

    Check this out:

    Youtube is the worst offender
    Youtube is the worst offender

    "Oh hey you have unused JavaScript and maybe you don't know how to write decent code. Here are the files you should look at

    • youtube
    • gumroad
    • twitter


    You can remove Youtube from your site and keep Youtube embeds. Using a facade.

    Facades let you load 3rd-party resources by showing a static preview first. When the user interacts, it turns into a full embed.

    The lite-youtube plugin by @justinribeiro implements this pattern as a web component.

    // import anywhere globally
    // gatsby-browser.js for me
    import "@justinribeiro/lite-youtube"
    <lite-youtube videoid="udqyBqCgLrU" autoload></lite-youtube>

    You get a native-looking Youtube embed with perfect lighthouse scores.

    Autoloading Youtube facade

    Fix 2: Kill big images

    Gatsby and NextJS come with optimized image components these days. You render an image, transform into fancy formats on deploy, and make your site fast.

    I forgot to use that for the cover image. Loaded 6MB of data ๐Ÿ’ฉ

    Like this:

    import coverImg from "../images/cover.png"
    // ...
    ;<img src={coverImg} />

    That works. You can import images like they're code in every modern JavaScript environment.

    And it leads to terrible performance.

    Here's what you can do since Gatsby v3 โ€“ a new image component with a fantastic API.

    import { StaticImage } from "gatsby-plugin-image"
    // ...
      alt="Serverless Handbook cover"

    StaticImage loads your image at build-time, optimizes into different formats, resizes to fit your container, and handles rendering in the browser.

    The final result is an <img> tag like this:

      style="object-fit: cover; object-position: 50 50; opacity: 1;"
      sizes="(min-width: 1877px) 1877px, 100vw"
        /static/12464dcff493620208d29a0abec73bb7/a16c8/cover.png  469w,
        /static/12464dcff493620208d29a0abec73bb7/56dcd/cover.png  939w,
        /static/12464dcff493620208d29a0abec73bb7/69e59/cover.png 1877w
      alt="Serverless Handbook cover"

    Notice how many different sizes there are. That's so your phone loads the 469px image and your computer loads 1877px. Huge difference in file size.

    eager and lazy loading supported out of the box ๐Ÿค˜

    If you need dynamic images, you'll have to reach for the <GatsbyImage> component and fiddle with GraphQL. You can read more about Gatsby's new gatsby-plugin-image on their docs.

    Tips for running Lighthouse

    Lighthouse can be fiddly.

    1. Official score on web.dev/measure
    2. Dev score in Chrome devtools
    3. Ignore your JavaScript sizes when using localhost (they're unoptimized)
    4. Use incognito, browser extensions may impact your score

    And if you know of a facade for Twitter embeds please let me know. That's the next area I gotta fix


    PS: there's a Gatsby plugin I can't wait to try called gatsby-remark-video-embed-lite which will turn every video on all my sites into a facade ๐Ÿ˜

    Published on April 27th, 2021 in CodeWithSwiz, JavaScript, React

    Did you enjoy this article?

    Continue reading about 2 quick tips for 250% better Lighthouse scores โ€“ CodeWithSwiz 28

    Semantically similar articles hand-picked by GPT-4

    Senior Mindset Book

    Get promoted, earn a bigger salary, work for top companies

    Learn more

    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

    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 โค๏ธ