1. 89
  1.  

  2. 25

    That favicon tip was great - I’ve just used it on my site to prevent the needless 404 that always bugged me.

    1. 7

      I also immediately added this to my site and I can confirm, that it gets rid of the pointless request. Great idea!

    2. 14

      Opinion about the favicon: this makes it harder for non-web browsers to fetch it.

      Example: feed readers have to fully implement HTML and embedded image parsing to be able to get it.

      I would appreciate there still being one at /favicon.ico, this would give the best of both worlds (unless web browsers prematurely fetch, not sure of the impacts of that).

      (Otherwise: I appreciate everything else :) )

      1. 13

        IMO you should keep that favicon, it’s rather good. <3

        1. 10

          […] the entirety of the CSS inlined in <style> tags.

          So, you’re copying the same style over to all other pages and everyone has to load it n times (n being the number of pages visited). This is only an “optimisation” if one loads a single page. Surely, having it in a dedicated .css file, and taking advantage of browser cashing would have been better, no?

          I’d also mention that one would need to rebuild each and every .html file if style is to be changed - again, not taking advantage of caching (neither CSS nor HTML!).

          1. 13

            I also do this on my website. Most visits only load a single page (e.g. an article linked from lobsters).

            If the HTML is one kilobyte larger it has practically no effect on the load times. Requesting an additional file has.

            You are right about the rebuilding but that takes only a few seconds and it is rare.

            1. 2

              Have you measured how costly the additional request is?

            2. 3

              I’d also mention that one would need to rebuild each and every .html file if style is to be changed

              Don’t you have to do it anyway to use bust the cache?

              1. 3

                This site has slightly more CSS than my site, but I think that for such small amounts the size really is negligible.

                <style>body { max-width: 40rem; padding: 1rem; }</style>
                

                vs

                <link rel="stylesheet" media="all" href="/assets/main.css" />
                

                (I added whitespace I don’t have between tokens in my CSS code, so as to avoid having to check whether getting rid of quotes or whatever in the second example still works). That’s 56 bytes against 61 bytes. My (admittedly tiny, subjectively ugly) CSS (which doesn’t cater for any situations I haven’t had the need for (scrollable code blocks, images to fit the viewport) is 5 bytes smaller, from a purely size viewpoint. Regardless of caching the link to the external CSS is larger.

                If you were to get rid of the media="all" and store the CSS in the root (href="/m.css") it’d get smaller, but I’ve not found that my CSS is the bottleneck in loading any pages.

                1. 1

                  The author of the linked submission mentions that the files are generated by a static site generator, so adding a snippet of CSS to every file is trivial in that case.

                  My personal site (still an old-fashioned “blog”) works in the same way, except I link the CSS from an external resource as I’ve never even considered the level of optimization the author has implemented.

                  I still think the inline CSS stuff is premature optimization. If nothing else, it makes tweaking CSS more of a pain than neccesary. I like the favicon trick, if nothing else than for keeping the logs clean.

                2. 7

                  The CSS on this website is still far from perfect however! The hardest minification technique (at least for me) is the removal of unused, unneeded or unapplied CSS rules. I’m still having fun with this one

                  Dunno about Chrome, but Firefox devtools will show unused CSS rules in devtools.

                  1. 2

                    I’m assuming they want to do it per page. So if a page doesn’t have images they want some sort of tool to remove any declarations relating to images. Not sure if Firefox can be used in such a pipeline, but considering the nature of the project I’d doubt they’d want it to be.

                  2. 7

                    Nice work (I especially liked the trick with the favicon)! One objection though, which I think is more of a remark about scale: I prefer to have a separate css-file, especially when the website has more CSS or changes often, as then the browser can leverage caching and, if the main site changes, it only has to transfer the information, and not the style.

                    In particular, I’m a big fan of semantic (X)HTML, and strive to challenge myself by first having an (X)HTML structure, then applying an external CSS to it, using as little id’s/classes as possible.

                    For dynamic websites with interactive content I do it as follows: I first create a website that has all the functions without Javascript. Then, I write the Javascript such that it changes the DOM so the “Javascript enabled”-experience is present. This way, you can have a fully static, but also fully dynamic site.

                    1. 5

                      I first create a website that has all the functions without Javascript. Then, I write the Javascript such that it changes the DOM so the “Javascript enabled”-experience is present.

                      “Progressive enhancement”. (Or “graceful degradation” if you look at it from the other direction.) This was the standard in the noughts, and largely seems to have been forgotten.

                      1. 4

                        SPAs have pretty well killed progressive enhancement, which is one of the many reasons they should be chosen carefully.

                        1. 2

                          How sad that it has come to this…

                      2. 7

                        I love this. Very cool idea and site.

                        This is respectful of a lot of things: bandwidth for the user, consideration of unnecessary user distractions, disregard of playing content to the metrics, etc. It also shows a desire to compare and contrast what we need from the web as opposed to what we get. If you spend your time trying only to do the minimum necessary to tell me what you think is important without any other “engagement” activities, I’ll return the favor and spend the time trying to consume what you’re creating. It shows that you value our relationship.

                        1. 4

                          For favicon, I touch an empty favicon.ico file and set a cache public and a very long expires header on it.

                          1. 3

                            As this site contains near zero images, I optimize each image by hand using Compress or Die and load a webp or jpg image depending on browser support.

                            I rather like dataurls plus grayscale dithering to make inline images. :)

                            1. 2

                              Seriously, I had forgotten how pleasant it could be to browse such a fast website. And IMHO is looks beautiful and modern.

                              1. 2

                                Since I read this post, I have been using the HTML minification command as a fun “arcane Unix” quiz question with my friends. Obviously, the thing is very complex and probably not the best practice, but there’s a special place in my heart for learning new Unix tricks through trying to decode arcane commands.

                                1. 1

                                  Please turn off justified text. It looks like ass. There’s too much space between the words.

                                  The rule of thumb for traditional typesetting is that the column of text should be wide enough to fit the whole alphabet twice, and your column isn’t quite wide enough by that rule. But since you’re not using LaTeX, but rather the dumb* text layout algorithm built into the web browser, you really need a wider column than that.

                                  * If the LaTeX algorithm were used in a browser, the text would jump around horribly during progressive loading, so it’s probably the right call. But it does make CSS text justification rather useless, since you usually don’t want to use a wide enough column for it to look good anyway.

                                  1. 3

                                    These seems rather needlessly picky and nonconstructive.

                                    1. 2

                                      I think GP formulated a bit too confrontational but I agree. I really liked how thoughtful the author of the article was for all kinds of things but the text column is infuriatingly narrow so for a better experience I would need to switch into Reader mode (which does very little to the site except make the text more readable). A shame since the rest is very nice and could be easily improved.