Swizec Teller - a geek with a hatswizec.com

    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

    Right.

    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"
    <!-- use in a page -->
    <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"
    // ...
    ;<StaticImage
    src="../images/cover.png"
    alt="Serverless Handbook cover"
    loading="eager"
    objectFit="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:

    <img
    data-gatsby-image-ssr=""
    data-main-image=""
    style="object-fit: cover; object-position: 50 50; opacity: 1;"
    sizes="(min-width: 1877px) 1877px, 100vw"
    decoding="async"
    loading="eager"
    src="/static/12464dcff493620208d29a0abec73bb7/69e59/cover.png"
    srcset="
    /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

    Cheers,
    ~Swizec

    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 😍

    Did you enjoy this article?

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

    Learned something new? Want to become a React expert?

    Learning from tutorials is easy. You follow some steps, learn a smol lesson, and feel like you got dis 💪

    Then comes the interview, a real world problem, or a question from the boss. Your mind goes blank. Shit, how does this work again ...

    Happens to everyone. Building is harder than recognizing and the real world is a mess! Nothing fits in neat little boxes you learned about in tutorials.

    That's where my emails come in – lessons from experience. Building production software :)

    Leave your email and get the React email Series - a series of curated essays on building with React. Borne from experience, seasoned with over 12+ years of hands-on practice building the engineering side of growing SaaS companies.

    Get Curated React Essays

    Get a series of curated essays on React. Lessons and insights from building software for production. No bullshit.

    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 ❤️