8 ms·

This is an inaccurate over-simplification. If you just use HTML and CSS, you can also have really bad Lighthouse scores. For example, vanilla `<img>` will ship

by Rauchg 6y ago

This is an inaccurate over-simplification. If you just use HTML and CSS, you can also have really bad Lighthouse scores. For example, vanilla `<img>` will ship the same image to every device, regardless of viewport size. Vanilla `<img>` doesn't enforce setting `width` and `height`, which makes your layouts shift. Slow-loading images and layout shifts are the very things that will downgrade the "100" score he's currently proud of. Frontend performance is basically an iceberg[1]. We tend to look at the top and that's where the fashionable "silver bullet" currently is (whether Rust+wasm or HTML+CSS or a JS framework). Then we find deeper in the iceberg that even a `box-shadow` property[2] can ruin our day, and let alone images, YouTube and Twitter embeds, and all the things that make the web more interesting and powerful than a black page with white text. Oh and it gets even more fun! A Lighthouse score in itself is an over-simplification. There's more to a great experience than the initial impression the site makes, like what happens to FPS when you scroll or click around[2] [1] https://rauchg.com/2020/next-for-vercel#realistic https://rauchg.com/2020/next-for-vercel#realistic [2] https://ishadeed.com/article/new-facebook-css#using-an-image-for-the-shadow https://ishadeed.com/article/new-facebook-css#using-an-image...

deleted 6y ago
[deleted]
dceddia 6y ago
Oh boy, YouTube embeds! I went through checking the Lighthouse score on a few of my pages a while back, and the ones that had videos were performing pretty badly. It turned out that embedded YouTube videos were pulling down something like 1mb of JS, just to show the thumbnail, before the user even clicked Play. I ended up making a static thumbnail with a hover-over "play" icon that would replace itself with the real embed when it was clicked. Got the Lighthouse score up and saved all those unnecessary downloads. But it was pretty amazing to me that while one arm of Google is pushing for web performance, another is building this YouTube player that auto-downloads a megabyte of JS just to show a thumbnail.
- leerob 6y ago
  Twitter embeds are equally bad. Ended up remaking them to output static HTML + CSS to improve perf (https://leerob.io/tweets https://leerob.io/tweets).
  - recursive 6y ago
    As a user, I hate twitter embeds. If I select text inside them, they redirect my user agent location. That's never what I want.
  - umaar 6y ago
    Same, I get ~500 tweets displayed with: - No JavaScript necessary - All profile images turned into one massive sprite - Minimal payload size Here are what the tweets look like when rendered: https://umaar.com/dev-tips/feedback https://umaar.com/dev-tips/feedback Here's the code to achieve that: https://github.com/umaar/better-twitter-embed https://github.com/umaar/better-twitter-embed
    - leerob 6y ago
      Nice job!
    - toinbis 6y ago
      Well done, thanks for sharing!
- winrid 6y ago
  You can also use lazy loading with iframes.
  - pabe 6y ago
    This is often a very useful hack indeed! <3
alberth 6y ago
You might not be aware of the ‘<picture>’ HTML tag that only sends the correct size img to the user based on their browser size. https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimed...
- Rauchg 6y ago
  Definitely. But notice he's not using the <picture> tag in this post for his image. "Just HTML+CSS" cannot possibly be connected to the 100 score conclusion (same for dismissing WordPress, which could have yielded that element as well.)
masswerk 6y ago
I fail to understand why you wouldn't set dimensions for an `<img>`tag or use a `<picture>`tag with `<source>` elements for appropriate variants using just HTML and CSS. (I'm doing this all the time, also with perfect Lighthouse scores. That is, there's often also a bit of PHP involved for includes and setting some meta tags, and a bit of non-essential JS sprinkled in.)
henlo 6y ago
> Vanilla `<img>` will ship the same image to every device, regardless of viewport size. You can have responsive images with vanilla <img>[0]. You can even lazy load images with just `loading="lazy"` attribute[1]. I'm pretty sure I can optimize more things. I'm mostly agree with this blog post. Plain HTML+CSS is really good for simple webpages, like landing page or portfolio that requires less update. But for a blog with pagination? I don't think so. Imagine updating each page in plain HTML. SSG can help my life easier. [0] https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimed... [1] https://web.dev/browser-level-image-lazy-loading/ https://web.dev/browser-level-image-lazy-loading/
- Rauchg 6y ago
  The point is that "just HTML+CSS" is not the recipe for performance. You get into the same nuance as any other technology: how you use HTML+CSS is the recipe for performance. In fact, his image in this blog post doesn't have `width` and `height` set, so had it been higher up on the page and part of the "Largest Contentful Paint", not sure we'd have a 100 here. This is where frameworks can be really helpful, and I wouldn't dismiss them. It gets quite tedious to keep up with the new attributes, cross-browser and cross-platform differences, image optimization CDNs and so on :)
  - lhorie 6y ago
    At the same time though, in my experience, performance optimizations follow paretto's law: try to get 80% of the way with 20% effort. There are pitfalls both with and without frameworks (e.g. it's equally easy to accidentally plop a hi-res image into a Next.js app), but generally speaking, limiting the tech stack means there's less potential stack-specific pitfalls. If "I'm gonna restrict myself to HTML and CSS only" gets them 80% of the way to their performance goals then IMHO, that's a perfectly valid approach. As far as images go, the reality is that most mainstream sites with image/video content are heavy sites with multi-second page load times, despite literal millions of dollars being spent on engineer salaries. In that context, does it really matter if a random blog decides to just use pngcrush and a dumb img tag for the occasional eye candy imagery, instead of whatever is the state of art multi-resolution technology?
leeoniya 6y ago
[srcset] https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimed...
m___ 6y ago
Just meant to be humorous, does your brain not provide any illumination, while at it, do you have time and energy left to address other then software in itself, for adding to the cycle of aggregate rentier-ism?
tomc1985 6y ago
Back in the day you sized your image for the web, there was no need for dimensions in img tags > For example, vanilla `<img>` will ship the same image to every device, As it should be, for simplicity's sake. Designers trying to assert pixel-perfect control of layout is part of why the web sucks so much today. Let the browser handle layout, that is one of the things it is designed to do!
- pastjean 6y ago
  Well on my low latency nordic cellphone connection, it's always nice to receive a lower resolution image. Especially if I don't have the resolution to display it
  - onion2k 6y ago
    It would be good if more browsers and websites implemented the prefer- reduced-data setting that Chrome and Edge have right now, but you do have that option in Chrome for Android right now. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-data https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
- onion2k 6y ago
  Designers trying to assert pixel-perfect control of layout is part of why the web sucks so much today. Sending a high resolution image to a user with a low pixel density display is wasting their bandwidth and battery. Sending a low resolution image to a user with a high pixel density display isn't giving them the good experience they paid for when they bought a high end device. Optimization is about giving all the users the best experience you can on a website. It doesn't necessarily change the design at all.
- deleted 6y ago
  [deleted]
- fouric 6y ago
  Removing the dimensions from the image tags is absolutely the wrong thing to do. If you do this, then a browser/user/client that wants that information simply doesn't have it - you can't create bits from thin air. If you leave the metadata in, then any browser that wants it can use it, and any brower that doesn't want it can ignore it. I can code up a Greasemonkey script in a few minutes that will strip the width and height attributes from img tags, but nobody on earth can write a script that will magically detect what size the author wants them to be if they don't send that data to you.

by Rauchg 6y ago

deleted 6y ago

[deleted]

dceddia 6y ago

Oh boy, YouTube embeds! I went through checking the Lighthouse score on a few of my pages a while back, and the ones that had videos were performing pretty badly. It turned out that embedded YouTube videos were pulling down something like 1mb of JS, just to show the thumbnail, before the user even clicked Play. I ended up making a static thumbnail with a hover-over "play" icon that would replace itself with the real embed when it was clicked. Got the Lighthouse score up and saved all those unnecessary downloads. But it was pretty amazing to me that while one arm of Google is pushing for web performance, another is building this YouTube player that auto-downloads a megabyte of JS just to show a thumbnail.

leerob 6y ago
Twitter embeds are equally bad. Ended up remaking them to output static HTML + CSS to improve perf (https://leerob.io/tweets https://leerob.io/tweets).
- recursive 6y ago
  As a user, I hate twitter embeds. If I select text inside them, they redirect my user agent location. That's never what I want.
- umaar 6y ago
  Same, I get ~500 tweets displayed with: - No JavaScript necessary - All profile images turned into one massive sprite - Minimal payload size Here are what the tweets look like when rendered: https://umaar.com/dev-tips/feedback https://umaar.com/dev-tips/feedback Here's the code to achieve that: https://github.com/umaar/better-twitter-embed https://github.com/umaar/better-twitter-embed
  - leerob 6y ago
    Nice job!
  - toinbis 6y ago
    Well done, thanks for sharing!
winrid 6y ago
You can also use lazy loading with iframes.
- pabe 6y ago
  This is often a very useful hack indeed! <3

alberth 6y ago

You might not be aware of the ‘<picture>’ HTML tag that only sends the correct size img to the user based on their browser size. https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimed...

Rauchg 6y ago
Definitely. But notice he's not using the <picture> tag in this post for his image. "Just HTML+CSS" cannot possibly be connected to the 100 score conclusion (same for dismissing WordPress, which could have yielded that element as well.)

masswerk 6y ago

I fail to understand why you wouldn't set dimensions for an `<img>`tag or use a `<picture>`tag with `<source>` elements for appropriate variants using just HTML and CSS. (I'm doing this all the time, also with perfect Lighthouse scores. That is, there's often also a bit of PHP involved for includes and setting some meta tags, and a bit of non-essential JS sprinkled in.)

henlo 6y ago

> Vanilla `<img>` will ship the same image to every device, regardless of viewport size. You can have responsive images with vanilla <img>[0]. You can even lazy load images with just `loading="lazy"` attribute[1]. I'm pretty sure I can optimize more things. I'm mostly agree with this blog post. Plain HTML+CSS is really good for simple webpages, like landing page or portfolio that requires less update. But for a blog with pagination? I don't think so. Imagine updating each page in plain HTML. SSG can help my life easier. [0] https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimed... [1] https://web.dev/browser-level-image-lazy-loading/ https://web.dev/browser-level-image-lazy-loading/

Rauchg 6y ago
The point is that "just HTML+CSS" is not the recipe for performance. You get into the same nuance as any other technology: how you use HTML+CSS is the recipe for performance. In fact, his image in this blog post doesn't have `width` and `height` set, so had it been higher up on the page and part of the "Largest Contentful Paint", not sure we'd have a 100 here. This is where frameworks can be really helpful, and I wouldn't dismiss them. It gets quite tedious to keep up with the new attributes, cross-browser and cross-platform differences, image optimization CDNs and so on :)
- lhorie 6y ago
  At the same time though, in my experience, performance optimizations follow paretto's law: try to get 80% of the way with 20% effort. There are pitfalls both with and without frameworks (e.g. it's equally easy to accidentally plop a hi-res image into a Next.js app), but generally speaking, limiting the tech stack means there's less potential stack-specific pitfalls. If "I'm gonna restrict myself to HTML and CSS only" gets them 80% of the way to their performance goals then IMHO, that's a perfectly valid approach. As far as images go, the reality is that most mainstream sites with image/video content are heavy sites with multi-second page load times, despite literal millions of dollars being spent on engineer salaries. In that context, does it really matter if a random blog decides to just use pngcrush and a dumb img tag for the occasional eye candy imagery, instead of whatever is the state of art multi-resolution technology?

leeoniya 6y ago

[srcset] https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimed...

m___ 6y ago

Just meant to be humorous, does your brain not provide any illumination, while at it, do you have time and energy left to address other then software in itself, for adding to the cycle of aggregate rentier-ism?

tomc1985 6y ago

Back in the day you sized your image for the web, there was no need for dimensions in img tags > For example, vanilla `<img>` will ship the same image to every device, As it should be, for simplicity's sake. Designers trying to assert pixel-perfect control of layout is part of why the web sucks so much today. Let the browser handle layout, that is one of the things it is designed to do!

pastjean 6y ago
Well on my low latency nordic cellphone connection, it's always nice to receive a lower resolution image. Especially if I don't have the resolution to display it
- onion2k 6y ago
  It would be good if more browsers and websites implemented the prefer- reduced-data setting that Chrome and Edge have right now, but you do have that option in Chrome for Android right now. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-data https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
onion2k 6y ago
Designers trying to assert pixel-perfect control of layout is part of why the web sucks so much today. Sending a high resolution image to a user with a low pixel density display is wasting their bandwidth and battery. Sending a low resolution image to a user with a high pixel density display isn't giving them the good experience they paid for when they bought a high end device. Optimization is about giving all the users the best experience you can on a website. It doesn't necessarily change the design at all.
deleted 6y ago
[deleted]
fouric 6y ago
Removing the dimensions from the image tags is absolutely the wrong thing to do. If you do this, then a browser/user/client that wants that information simply doesn't have it - you can't create bits from thin air. If you leave the metadata in, then any browser that wants it can use it, and any brower that doesn't want it can ignore it. I can code up a Greasemonkey script in a few minutes that will strip the width and height attributes from img tags, but nobody on earth can write a script that will magically detect what size the author wants them to be if they don't send that data to you.