Hacker News Reader

Comment by smacktoward | Hacker News Reader

Looking at that first table, one question jumps out at me: what the heck is Jeff Atwood doing on pages at Coding Horror that makes them weigh 23MB?

I mean, I'm all for avoiding premature optimizations, but 23MB for one page is just... wow.

EDIT: As a sanity check, I just tried loading the CH home page from a cold cache myself. Total weight: 31.26MB. Yowch.

View on HN

Just been to Atwood's homepage, https://blog.codinghorror.com/.

Looks like there's some lazy loading of later content so I actually get accessible content very quickly, indeed I thought something was up as the page appeared to be only a couple-hundred kB, which didn't match your description.

Scrolling down I continue (in FF Network Monitor) to see content loading - reviewing I see that YouTube is responsible for over 1MB of "base.js" which gets downloaded 7 times, and ¼MB of CSS files (again 7 times over). Now Atwood may be to blame in part but Google ... shouldn't they at least do better?? CodingHorror is loading very large image files [1] (which get scaled) for me, perhaps a "retina" handling issue.

[1] https://gtmetrix.com/reports/blog.codinghorror.com/d1x7zZBk

Appears to be mostly lack of image optimization (and he loves gifs). A common issue with blogs.

Images are meticulously optimized, problem is, retina is expensive in file size.

Seems that images such as the superman image [0] or pinball image [1] currently on the front page are much much larger than they should be -- body max-width is 700 (70% of 1000px). Even for retina that's overkill. If you want to get really fancy you could restrict all (served) image widths to under 700px and make a 1400px @2x version to use in a srcset.

[0] https://blog.codinghorror.com/content/images/2017/01/help-ke...

[1] https://blog.codinghorror.com/content/images/2016/11/pro-pin...

I'm working on a visually lossless optimization tool [1] and could reduce the images a bit further from 20.8MB to 16.11MB (-22.6%). But you're right, hidpi images is the main cost factor, adding an srcset polyfill would be a good measure.

[1] http://getoptimage.com

Reply on news.ycombinator.com