22 replies

1. Ernie Smith Mastodon 2 min later

   @zachleat This is what always makes me laugh about how aggressive Google has been with core web vitals—it’s literally their external code that is slowing everything down. When I added a script that replaced YouTube embeds with images, that helped my CWVs a lot.

   1. Zach Leatherman Mastodon 5 min later

      @ernie Yeah: Google is basically hundreds of different companies—most of Google’s performance advice can be viewed as though it is aimed directly at other teams at Google. I think in many cases the web performance resources were prepared with that in mind.

      Notably, the solution I recommend is a web component written by a Google employee 😅

2. Aram Zucker-Scharff Mastodon 26 min later

   @zachleat I've been playing with the YouTube API and embeds lately as well, but I find it frustrating that if I want to use the API inside and postMessages I *have* to use the whole YT API package. Did you find any way around that?

   1. Zach Leatherman Mastodon 35 min later

      @Chronotope unfortunately no!

3. Stuart Mastodon 2 hr later

   @zachleat As well as saving 1.1MB, I think you also avoid Google tracking your visitors before they've had a chance to decide if they want to click play or not.

   1. Šime Vidas Mastodon 6 hr later

      @slowe @zachleat To be fair, YouTube’s own embed offers such an enhanced-privacy mode.

      1. Stuart Mastodon 7 hr later

         @simevidas The "enhanced privacy" mode still isn't as private as not loading anything from YouTube until a visitor makes a choice for it.

4. Ryan Mulligan Mastodon 3 hr later

   @zachleat May as well call it a "California king embed" at that size, amirite?

   1. Zach Leatherman Mastodon 3 hr later

      @hexagoncircle hahahahaha

      1. Ryan Mulligan Mastodon 3 hr later

         @zachleat Coincidentally, I was adding a youtube embed "easter egg" on my 404 page this morning. Your post came at the right time! Now uses lite-youtube for those big savings 🙌 https://ryanmulligan.dev/oopsies

         1. Zach Leatherman Mastodon 3 hr later

            @hexagoncircle I love your web site Ryan 😍

            1. Ryan Mulligan Mastodon 4 hr later

               @zachleat Ah, thank you! My site would be nothing without the top shelf excellence that comes with using @eleventy 🏆

5. Bill Zaumen Mastodon 3 hr later

   @zachleat The idea that one 'youtube embed weighs 1.2 MB' reminds me of something I heard years ago. A government project required developing software going into an airplane. "What does it weight?" "Huh?" "Everything in an airplane has to specify a weight." So, they listed the weight of a floppy disk. This caused a major complaint: "You are way out of line on the price per pound ratio." Finally they explained it as "tooling costs."

   1. Zach Leatherman Mastodon 3 hr later

      @bzdev 😅 can a therapist somewhere please quantify psychological weight

6. Skora, Will Mastodon 4 hr later

   @zachleat a single embed of google maps with 1 Marker is 978kb (i implemented paul Irish's library for YouTube a few weeks ago) but haven't found a similar tactic for googlemaps just yet (i checked out competitor mapbox-gl, & its 2.5mb) #webperf

   1. Zach Leatherman Mastodon 5 hr later

      @wills the static maps API for a fallback might be your best bet, maybe this could be a web component you create?

      https://developers.google.com/maps/documentation/maps-static/overview

   2. Nicolas Hoizey Mastodon 5 hr later

      @wills @zachleat I use Mapbox on https://nicolas-hoizey.photo/map/ because it’s interactive.

      But on individual photo pages, the map is a static image. At @eleventy build time, if the map image is still missing (generating them is another asynchronous process), I use Mapbox static map URLs.

      1. Zach Leatherman Mastodon 5 hr later

         @nhoizey @wills @eleventy you should… (wait for it)

         …blog about this 😅

         1. Nicolas Hoizey Mastodon 7 hr later

            @zachleat I have a lot to say about this website! 😅

            @wills @eleventy

   3. Raymond Camden Mastodon 5 hr later

      @wills @zachleat don't forget Google Maps has a Static API that is just an image, nothing more. Useful for when you don't need interactivity.

   4. Pascal Mastodon 9 hr later

      @wills @zachleat other alternative with WebGl https://maplibre.org/maplibre-gl-js/docs/ (https://bundlephobia.com/package/maplibre-gl@3.6.2)

      leaflet is light (https://bundlephobia.com/package/leaflet@1.9.4)

      mapbox / googlemaps / bing maps have static maps API

      a (really minimal) example with leaflet & protomaps https://pascalmaps.s3.eu-west-2.amazonaws.com/index.html#14/43.5979/1.4391
      with a marker + popup :
      208 kB transferred
      423 kB resources

7. Sara Joy Mastodon 6 days later

   @zachleat oh good! Now I don't feel wrong about lazily including my talk just as a link instead of an embed into my site 👍