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 [name|]. 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, Frontend, Performance, Lighthouse

    Learned something new?
    Want to become an expert?

    Here's how it works 👇

    Leave your email and I'll send you thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

    Join Swizec's Newsletter

    And get thoughtful letters 💌 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 over 14,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. ✌️

    Have a burning question that you think I can answer? I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

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

    Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

    Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first 💰 on the side with ServerlessReact.Dev

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