24 replies

1. Nathan Knowler 17 min later

   @zachleat The latest researched take I’ve seen is @csswizardry’s article: https://csswizardry.com/2023/10/the-three-c-concatenate-compress-cache/ (tl;dr at the end)

   1. Zach Leatherman 21 min later

      @knowler @csswizardry excellent, thank you!

2. Anthony 23 min later

   @zachleat You want nuance? https://askastaffengineer.com will always have your back.

   Courtesy of @ksylor 😂

   1. Zach Leatherman 24 min later

      @anthony @ksylor I… 😅

3. Chris Ferdinandi 26 min later

   @zachleat I ran a test on this with CSS recently. got slightly different results than the Harry Roberts article that was linked in another toot https://gomakethings.com/modular-css-and-different-ways-to-structure-your-stylesheets/

   1. Nicolas Hoizey 48 min later

      @cferdinandi I would say that “a concatenated file is still the most performant for people on the slowest connections and oldest devices” is only true if the concatenated file weight is low, don't you think?

      On my side, as I don't have much CSS code, I even inline it all. There is no CSS network request on https://nicolas-hoizey.photo/

      My tests in the past showed that is was faster than requests. Because there is not much CSS.

      @zachleat

      1. Zach Leatherman 57 min later

         @nhoizey @cferdinandi yeah! I’m interested to learn at what inflection point does it start to break down (and if you fancy, what inflection point for different network connections)

         1. Nicolas Hoizey 59 min later

            @zachleat I'm not sure anyone did try with different file weights to find the inflection point.

            Also, I'm not sure it’s worth it trying to have a dynamic solution to account for different network connections. It's already complicated enough! 😅

            @cferdinandi

            1. Zach Leatherman 1 hr later

               @nhoizey @cferdinandi not looking for a dynamic solution, just research!

               1. Nicolas Hoizey 1 hr later

                  @zachleat ok 👍

                  When you can't find research from others… 😅

                  @cferdinandi

            2. Private reply 2 days later
               1. Private reply 2 days later
                  1. Private reply 2 days later
                     1. Private reply 3 days later
                        1. Private reply 3 days later
            3. Christian "Schepp" Schaefer 2 days later

               @nhoizey @zachleat @cferdinandi it also depends on so many other factors that you can't formulate a rule of thumb. For example, if you run nginx, then inlining CSS leads to much better FCP and LCP, as it will not send the CSS until the HTML is fully sent over the wire: https://x.com/derSchepp/status/1595334081969020928?t=O6P8EI8Gf_3hNjonQz0wRQ&s=19

               1. Nicolas Hoizey 2 days later

                  @Schepp without an X account, I can't read the responses to your tweet, were there any?

                  @zachleat @cferdinandi

                  1. Christian "Schepp" Schaefer 2 days later

                     @nhoizey @zachleat @cferdinandi Here is the thread screenshotted. The bug report mentioned is this one: https://issues.chromium.org/issues/41392507

                     1. Nicolas Hoizey 2 days later

                        @Schepp thanks! 🙏

                        From what I read in the bug report, Pat Meenan said “it's not likely to work in practice for most origins where it's lucky if they even support prioritization at all”… 😞

                        So it looks like inlining critical CSS is important indeed, even more for large HTML documents.

                        But inlining CSS is complex and can be detrimental, as shown by @csswizardry: https://csswizardry.com/2022/09/critical-css-not-so-fast/

                        @zachleat @cferdinandi

                        1. Christian "Schepp" Schaefer 2 days later

                           @nhoizey @csswizardry @zachleat @cferdinandi yes, as always, things are more complicated than initially anticipated. It always depends on the specific setup.

                           1. Nicolas Hoizey 2 days later

                              @Schepp always indeed. 😅

                              @csswizardry @zachleat @cferdinandi

      2. Chris Ferdinandi 1 hr later

         @nhoizey @zachleat I also inline everything, because my combined CSS + HTML + JS is nearly always at about 14kb or less. But for the average person, that's probably a level of yak shaving that doesn't matter in a material way, IMO.

         1. Nicolas Hoizey 2 hr later

            @cferdinandi I agree 👍

            @zachleat

4. Doug Parker 🕸️ 1 day later

   @zachleat "Minimum Viable Chunk" is a good deep dive into the complexity of the problem and the trade offs you're forced to make.

   https://www.youtube.com/watch?v=ImjzA7EMI6I

   Unfortunately it kind of ends with "You should do it like Google does, but no open source tools on the market actually do that so 🤷‍♂️."