50 replies

1. Aleš Roubíček Mastodon 6 min later

   @zachleat Browsers should do better than size-shaming

   1. Zach Leatherman Mastodon 9 min later

      @alesroubicek especially not at 800 nodes, c’mon

      1. Søren Birkemeyer Mastodon 45 min later

         @zachleat @alesroubicek Agree that 800 is an excessive threshold size, but I like the trigger to question whether there might be a way to make the DOM leaner.

         We saw nice benefits for mobile users when we switched to incremental loading of upcoming events (chunks of 7 days) for a state opera website. Now initial load contains ~900-1000 DOM nodes instead of ~16.000.

         `content-visibility` will for sure be a player here, but we had too many accessibility concerns when we investigated it last year.

         1. Aleš Roubíček Mastodon 53 min later

            @polarbirke @zachleat When you do incremental loading, you still end up with ~16.000 nodes in the end. :) We need a native virtual scroller for this.

            1. Søren Birkemeyer Mastodon 2 hr later

               @alesroubicek @zachleat You're right!

               But… it depends on the scenario.

               Sure, if you scroll down into the future until you load events for Christmas, you'll get to 16k.

               There's filter by month feature though and the server returns a new page with (again) only events for the first 7 days of that month.

               Also, most visitors either look for events that happen soon (like, within a fortnight, because they're local) or far away (like, in a few months because they're tourists arriving on vacation).

               1. Søren Birkemeyer Mastodon 3 hr later

                  @alesroubicek @zachleat Not sure if a native virtual scroller would be needed or if content-visibility is going to be the catch-all already, but obviously we and the state opera are nowhere near the end of the journey.

                  I just wanted to make a (small) case that the DOM node threshold can lead to something good. 😁

      2. webbureaucrat Mastodon 54 min later

         @zachleat @alesroubicek

         In this economy?!

         1. Zach Leatherman Mastodon 1 hr later

            @webbureaucrat @alesroubicek *exactly*

2. Mike Hostetler Mastodon 6 min later

   @zachleat but doesn’t jQuery work better that way?

   1. Zach Leatherman Mastodon 8 min later

      @mikehoss it used to matter a lot before querySelector! But erroring at 1400 nodes — I’m trying to feed my family here

3. Bill Criswell Bluesky 8 min later

   I replaced SVGs with PNGs in some software that ran on very old hardware and the results were incredible. I now take that suggestion a little more seriously (though maybe an edge case).

   1. Zach Leatherman Bluesky 10 min later

      <img src="/bluesky/zachleat.com/3llbwstjev22z/svg"> would work too!

      1. Bill Criswell Bluesky 33 min later

         That was a while ago... I hope I tried that. Honestly don't remember, though.

4. Chris Smith Mastodon 21 min later

   @zachleat I'm being told that too by Lighthouse but my DOM has 49,000 nodes, so I have to hold my hands up.

   In reality, with content-visibility: auto on my repeated nodes, it still performs quite well, but I'll give it a trim.

   1. Zach Leatherman Mastodon 1 hr later

      @chris22smith ok wait 49K is wild

      1. Chris Smith Mastodon 1 hr later

         @zachleat It's one of those badly designed all data ever scenarios. It'll just keep going till it snaps.

5. westbrook Mastodon 22 min later

   @zachleat Dude all you have to do it put you entire JS bundle/workflow behind a `setTimeout(work, 3000)` and you will ace that test EVERY TIME!!

   1. Zach Leatherman Mastodon 1 hr later

      @westbrook client rendering is always faster weeeee

6. Eric Eggert Mastodon 28 min later

   @zachleat *looks at https://www.w3.org/WAI/WCAG22/quickref/*

   1. Zach Leatherman Mastodon 1 hr later

      @yatil see, they get it. 9616 nodes is barely a scratch!

      1. Eric Eggert Mastodon 1 hr later

         @zachleat Hehe :-) For the amount of content that is in there, it really is not that much. It has an HTML file size that is smaller than most of the JS frameworks these days, and yet I had a lot of doubts putting a file that size.

         (Tho that was with Flash and Silverlight techniques which balooned to over 1MB, if I recall correctly.)

         1. Zach Leatherman Mastodon 1 hr later

            @yatil clearly a 🏆.

            https://www.11ty.dev/speedlify/ is 8104! we’re all in this one together

7. Bradley Farias Bluesky 34 min later

   Isn't this the opposite of what Shadow DOM encourages?

   1. naugtur Bluesky 1 hr later

      especially on a hot and sunny day

   2. Zach Leatherman Bluesky 1 hr later

      depends if it’s closed or open, I think?

8. Mike Aparicio Bluesky 43 min later

   Rude.

   1. Zach Leatherman Bluesky 1 hr later

      Cannonball run!!

9. Michał Wilski Bluesky 1 hr later

   Every problem can be solved with a finite number of divs

   1. Zach Leatherman Bluesky 1 hr later

      640K should be enough for anybody — wait

   2. ☔ Jim Schofield 🌼 Bluesky 2 days later

      I heard divs are turning complete

10. Josh “Yoshi” Vickerson Mastodon 1 hr later

    @zachleat 🎶 I like big DOMs and I cannot lie 🎶

11. Jason Garber Mastodon 5 hr later

    @zachleat If it can’t fit in a `<div id="app"></div>`, I don’t want it.

    1. Zach Leatherman Mastodon 5 hr later

       @jgarber 100K nodes or bust

       1. Jason Garber Mastodon 5 hr later

          @zachleat

          •slaps roof of car•

          this bad boy can fit so many fucking nodes in it

12. Jack Harner 🚀 Web Developer Bluesky 16 hr later

    Lighthouse just wants you to have <body> be the lowest nested element on the entire page.

    Apparently, all hell's going to break loose if you embed SVG code in your markup. 😂

    1. Zach Leatherman Bluesky 23 hr later

       we need an SVG minifier that converts a complex SVG into a single path 😅

       1. Jack Harner 🚀 Web Developer Bluesky 2 days later

          or some kind of linear-gradient magic to apply to a single div. No nesting AT ALL!! 😂

          1. Zach Leatherman Bluesky 2 days later

             everything must be a.singlediv.com sorry @lynnandtonic.com you’re in charge of everything now

             1. Lynn Fisher Bluesky 2 days later

                I accept

13. xeophin Mastodon 18 hr later

    @zachleat Nothing wrong with being a DOM TOP 🙃

14. Ben Brignell Bluesky 2 days later

    I know a guy called Dominic who is 6ft 11.

    1. Stuart Robson Bluesky 2 days later

       ludicrous

    2. Zach Leatherman Bluesky 4 days later

       this is how the fast and furious franchise started

       1. Ben Brignell Bluesky 5 days later

          I will watch one or all of these films tonight so I can understand this better

          1. Ariel Salminen Bluesky 5 days later

             Fast & furious through Hull

             1. Stuart Robson Bluesky 5 days later

                Fast & furious through Hull 2: With your eyes closed

             2. Ben Brignell Bluesky 5 days later

                Ludicrous

          2. Zach Leatherman Bluesky 5 days later

             I only ask that you watch the one where they drive their car to space

15. Daniel Smith Bluesky 5 days later

    hide complexity in iframes, and hope Lighthouse does not notice :)

    1. Zach Leatherman Bluesky 5 days later

       delete ads, hope client doesn’t notice 😅