Big Fat Websites (2021) | Hacker News Reader

Big Fat Websites (2021)

herman.bearblog.dev

"Text is small" so a website should be extremely light in resources is a really simplistic way to go about things.

Most web pages are not hand crafted page by page, they're part of a CMS with a million other capabilities. Or, the team creating the website was under cost pressure and went for some performance-compromised "good enough" solution. Or, the website is old (true for almost all of them) and no longer under serious active maintenance.

It's not just incompetence leading to technical bloat.

The same is true for some of the "dark patterns" like auto-playing videos and pop-ups. We should stop with the narrative that this is due to publication truly hating users or being completely tone-deaf. It's purposefully done because it works. It serves marketing and monetary goals.

Yes, this comes at the expense of usability. You should see it as an act of desperation that is existential. It keeps the lights on. The terrible state of web usability is due to it not having any reliable business model other than the current status quo.

   > Most web pages are not hand crafted page by page,
   > they're part of a CMS with a million other capabilities

Why should it matter? By this token a car should weight about as much as the a factory that made it.

Beautiful analogy.

Not necessarily the weight, but lots of other attributes of cars and other factory-made products are the way they are just because of the process in the factory. Sometimes to make production itself cheaper (not just material cost, but process-wise), sometimes to make it more efficient and sometimes just because automating it fully with good results is impossible, compared to making it by hand.

>Not necessarily the weight, but lots of other attributes of cars and other factory-made products are the way they are just because of the process in the factory.

Well, the magic of the digital realm is that the process doesn't dictate much, if anything at all, regarding the end result of a CMS.

My electric kettle recently broke. When I got into the guts of it, I noticed there were a lot of weird components that weren't really used, or didn't seem that useful. When I searched youtube for help, I found out those components were for kettles with a physical on/off switch. Mine didn't have the switch, but everything else on the inside was still there.

That's funny. It must have been cheaper to use the board they already had than to make a new one with less stuff on it.

A CMS, fundamentally, is a server application that pulls things out of the database, puts them into templates, and spits the resulting HTML out to the browser. There is no inherent reason why a page that comes out of a feature-rich CMS has to be bloated.

Under that definition of a CMS I agree, however I think what you are describing is an MVP of a CMS that would require additional features and (likely) bloat to truly be useful to most publications.

Examples:

  Social Media integrations
  Subscriptions integration
  Advertisements + trackers (which will likely pull in additional garbage)
  Analytics (GA, etc.)
  Comment section + moderation tools
  Media: images, videos
  Font(s)
  Responsiveness

It CAN all add up fast unless someone is keeping track and responsible for keeping these sites lean.

> It's not just incompetence leading to technical bloat.

it's bad decisions after all. How would you call that? Alien invasion?

And they have to have a publish date. (You wouldn't believe the number of blog posts that do not have one)

That's because of SEO and perception reasons, I believe. It's intentional.

You are correct - this is an attempt to appear fresh. But it is no excuse. It’s still an anti-user dark pattern.

Fully agree. Also you can appear fresh regardless _if you are actually fresh_, simply by adding an review/update date.

Or if you’re not, just use a cron to keep the dates fresh

But... then what's the point of a date at all? May as well not have one.

I should have used /sarc

The idea was to fool people and bots into thinking it was fresh!

Yep. It is an intention to appear fresh to Google, so that it can rank above websites that have better content but are using dates. Users be damned.

The irony of it is that if Google's algorithm made sense at all (Why is a recipe being downranked for being older than one year?), people wouldn't have to do all of this stuff.

It's a vicious circle and I don't know if it's possible to escape at this point by any means other than inventing a better search algorithm and convincing a large number of people to use it.

That number is billions of people, which means that it's not going to happen.

I agree. When I started with nixCraft, the first feedback was that visitors wanted to know the last updated date. Apart from that, having comments, RSS feed and newsletter subscription is essential. Please don't say follow me on Twitter or FB. That is like giving out free advertisements to social media, which hides your content from all followers who choose to follow you because of your blog post. I have over 250k+ followers on both FB and Twitter, but as soon as they see a link to my blog post, promote this post button appears.So please encourage your RSS and email newsletter subscription. Keep independent web alive.

Minimalism is "subtract until it breaks" and this is reaching the breaking point.

Of course, we all hate popovers, slow websites etc, we've known this for decades.

This website has no identity other than an emoji and the fact that it's purposefully lacking design beyond basic text styling. It looks like 1000 other sites, at a glance I can't tell what this website or article are about.

And there are still elements I want to get rid of! "Toast me" button, "Like and subscribe!," the ad for the CMS, analytics script etc.

Well, HN has many of these elements but is unique. Maybe a maverick? Also, bit unfair there is no exclamation after subscribe.

>This website has no identity other than an emoji

Assuming you mean the little running guy composed of unicode characters (and the bear face in the link at the bottom), the actual term is kaomoji. Emoji are specifically little images.

https://en.wikipedia.org/wiki/Emoticon#Japanese_(kaomoji)

http://kaomoji.ru/en/

>It looks like 1000 other sites, at a glance I can't tell what this website or article are about.

Yes, you have to actual read it. Oh, the humanity!

"Identity" not content. A strong identity allows the user to tell at a glance if you're on a news site instead of a shopping site, for example.

And this blog actually loads fast and does not require me to trust random third-party scripts to be able to see text. Good job!

Yes! You should check out https://bearblog.dev, developed by the OP.

If you are on wordpress, there's ton of "minimal" themes to choose from, here's a HN discussion of one minimal theme (susty wp):

https://news.ycombinator.com/item?id=17513447

This bookmarklet is one way to cut out the cruft:

javascript:void%20function()%7Bjavascript:(function()%7Bvar%20a=Math.floor,b=document.querySelectorAll(%22p,%20title%22),c=%5B%5D,e=%22%22,f=%22%22,g=%22%22,h=0,k=0,l=%22%22,m=%22%22,n=window.open(%22%22,%22_blank%22);for(var%20d%20in%20b)%7Bvar%20i=b%5Bd%5D.textContent;i%26%26(c=c+%22%5Cn%22+i)%7Dfor(f=c,e=f.replace(/%5Cn/g,%22%20%3Cbr%3E%3C/br%3E%20%22),g=e.split(%22%20%22),h=0;h%3Cg.length;h++)k=a(g%5Bh%5D.length/3)+1,l=%22%3Cspan%20style='font-weight:bolder'%3E%22+g%5Bh%5D.substring(0,k)+%22%3C/span%3E%3Cspan%20style='font-weight:lighter'%3E%22+g%5Bh%5D.substring(k,g%5Bh%5D.length)+%22%3C/span%3E%20%22,%22.%22==g%5Bh%5D.substring(g%5Bh%5D.length-1,g%5Bh%5D.length)%26%26(l+=%22%3Cspan%20style='color:red'%3E%20%20%3C/span%3E%22),m+=l;n.document.write(%22%3Chtml%3E%3Cp%20style='background-color:%23EDD1B0;font-size:40;line-height:200%25;font-family:Arial'%3E%22+m+%22%3C/p%3E%3C/html%3E%22)%7D)()%7D();

And another one that doesn’t make bold text on the first third of words:

javascript:void%20function()%7Bjavascript:(function()%7Bvar%20a=Math.floor,b=document.querySelectorAll(%22p,%20title%22),c=%5B%5D,e=%22%22,f=%22%22,g=%22%22,h=0,k=0,l=%22%22,m=%22%22,n=window.open(%22%22,%22_blank%22);for(var%20d%20in%20b)%7Bvar%20i=b%5Bd%5D.textContent;i%26%26(c=c+%22%5Cn%22+i)%7Dfor(f=c,e=f.replace(/%5Cn/g,%22%20%3Cbr%3E%3C/br%3E%20%22),g=e.split(%22%20%22),h=0;h%3Cg.length;h++)k=a(g%5Bh%5D.length/3)+1,l=%22%3Cspan%20style='font-weight:light'%3E%22+g%5Bh%5D.substring(0,k)+%22%3C/span%3E%3Cspan%20style='font-weight:light'%3E%22+g%5Bh%5D.substring(k,g%5Bh%5D.length)+%22%3C/span%3E%20%22,%22.%22==g%5Bh%5D.substring(g%5Bh%5D.length-1,g%5Bh%5D.length)%26%26(l+=%22%3Cspan%20style='color:red'%3E%20%20%3C/span%3E%22),m+=l;n.document.write(%22%3Chtml%3E%3Cp%20style='background-color:%23EDD1B0;font-size:40;line-height:200%25;font-family:Arial'%3E%22+m+%22%3C/p%3E%3C/html%3E%22)%7D)()%7D();

I agree with the sentiment, but "stock photos" are not a problem.

They add visual interest and allow the reader to quickly see what the article is about. Having a good stock photo with a blog post drastically increases the number of clicks.

Yes they can be used incorrectly, but that's true of anything.

I found it particularly ironic given he specifically used the example of Harry Potter, "a pretty thick book" being only "about 500kb of text", despite the fact that the actually book (the physical object he specifically picks as his metaphor) has pictures at the start of every chapter, not to mention the custom fonts and typesetting. You would need way more than 500kb to represent the actual book.

I won't read articles on cybersecurity if I don't see a either a bad guy in a hoodie hunched over a laptop, or (even better) a neon blue padlock in front of a Matrix style screen saver. Those are the dead give-away that an article is worth your time, otherwise it's really anybody's guess as to the content quality.

I totally agree with the sentiment of this post. Bear blog inspired me to build https://lists.sh which has been a blast to build. The goal is to foster a smaller web.

I was pleasantly surprised to find out that the author created https://justsketch.me/, which sponsors http://reference.sketchdaily.net/

I found these to be great resources for drawing exercises.

It's a daily fight for me. The underlying issue is that everyone is chasing profits and larger sites have multiple teams working on them (dev, seo, marketing, sales, etc). So while devs might be trying to optimize as much as they can, other teams can come and put 3 google analytics-like trackers, affiliate trackers, heatmap analytics, live chats, 3rd party popup services that collects emails, etc. And don't get me started on oversized images with 0 compression... And the worst part, those poorly written affiliate trackers, popups and live chats actually bringing revenue so there is always a push for more.

I believe the author had intended to link to this[0] page instead.

[0]: https://idlewords.com/talks/website_obesity.htm

Lol the irony of this. Very slow TTFB from Australia.. over 1 second

The blog is already behind Cloudflare, and this page is static content, why don't you just add a rule to cache the page?

Not sure, but might be using a free plan, as many do. It would only load from a hot cache in your region on subsequent hits and have other such limitations to make it affordable.

I have 1 second to spare. Optimization is good, but shaving milliseconds at all costs always sounded a bit pointless to me, except for real-time audio communication.

Do you have 5 seconds to spare? 10 seconds to spare?

The question is more how often rather than how long. For example, this page: https://www.gnu.org/software/emacs/manual/html_mono/elisp.ht... takes nearly 15 seconds to fully load for me, but then I can live for literally weeks without having to refresh it (ie. other than on sporadic Firefox restart). That's quite obviously different in the 1/10-of-chapter-per-page style of docs that Rust books seem to like.

If the content is worth accessing, certainly :)

every website should load fast. If they should be clean is something that's too subjective IMO.

I'm fully aware I'm a rather mediocre frontend developer so my opinion on the matter has very little value, but on the other hand I have this feeling that HTML, CSS and JS on the hindsight were probably some of the least suitable technological choices for what the current usage of the web actually needs to achieve this objective.

There was once the idea, that the web could work like other objects in programming. You would download an object and then send it messages (message passing concept). I think this was imagined to be in some kind of Smalltalk image like environment. I think Alan Kay mentioned the idea in one of his talks, or I have read about it elsewhere related to Smalltalk.

The triad of HTML, CSS, and JavaScript are actually fantastic for the web if used intelligently. Unfortunately the "used intelligently" part is skipped way more often than it should be.

Having HTML be the first resource at a URL is awesome. HTML can have lots of "invisible" metadata for a variety of user agents. Not every user agent is a graphical browser wanting to run arbitrary code. The microbrowsers that generate previews when shared by messaging apps have different needs than a graphical desktop browser which has different needs than a screen reader. The same HTML can serve all the user agents "for free".

Sticking styling and interactivity into separate resources let's the user agent figure out what it needs to load. A screen reader likely doesn't care about images, a phone might load a custom CSS based on a media tag, and a microbrowser wants the OpenGraph data in the header.

HTML also makes it trivial to point readers to different sections of itself so a user agent can jump to a relevant part of the page. So you get hyperlinks between documents and even specific sections of documents.

HTML is not perfect but it's great for documents. Even full JavaScript apps should at least provide a skeleton of HTML saying they need JavaScript to run and give non-graphical user agents pointers to appropriate resources. Much of the content of the web would work just fine as documents and does not need to be constructed on the client with megabytes of JavaScript and hundreds of calls to different resources.

Autoplay videos blinking ads and basically any dynamic content have no place on a text-based website.

Autoplay videos have no place on any website.

If my blog needs a video or dynamic content, it's not up to you to decide ;).

It'd be rather inconvenient if YouTube didn't autoplay the video I just clicked. It'd be tedious to have to click play every time.

Most of the JS on a blog site will be analytics, don't hate the playa ...

Why not hate the player? I loaded an article the other day, and before I could read a single word the page had two popovers - one asking about cookies and the other asking if I wanted to join their mailing list, “So you can read more great content like this!”.

Terrible websites make me angry and then get closed. What a horrible waste of our collective human potential.

Somewhat agree, but the game puts websites in a very tough place.

If you're depending on writing articles for income, either you do the dark patterns and scrape by, or you run out of money and close shop.

For news reports it's even worse because there's heavy incentive to use low quality sources for your posts.

I hate proposing yet another subscription service, but it would be much more bearable for everyone to have a netflix style model.

Flat rate a month in exchange for free access to quality news and content without the dark patterns.

I'm certinaly not holding my breath on that happening though.

Then create a blog without using any of this tech and you'll soon realise it goes nowhere.

I have a blog without any of that junk and it works out great. I get ~50k unique visitors on most of my posts, which I’m very happy with.

(including the site this article is hosted at)

Well, "don't hate the playa" didn't work that well as an excuse in the Nuremberg trial.

financial incentives.

Hum, "blogs" in the past means "web logs" or a place to publish your personal sh^wcra^wehmmmm things you want someone else to know... I think the author intend for blogs "personal websites" witch sometimes have only one topic, sometimes few. I argue how they can be called blog and their substantial purpose.

In the past, usenet pre-web era, there was a problem: some posts are just noise so there were not much reasons to pin them in some way, some are valuable and might be useful in the future to anyone including those who join a group after that post(s). So websites was seen as a way to keep useful contents for the posterity. Than someone observe the old mundaneum dream [1] can be real with web tech and a new revolution start ending up not so well, composition is still manual and have many issues, accessing contents was a problem, directory-website prove to be nor effective nor maintainable. Than search engines arrives. Another revolution with another loss of the original web idea ... finally blogs arrives as a way to collect data about people letting them spit some mostly irrelevant content to nearly anyone on the web.

I favor rediscovering the classic idea, perhaps the mid-classic one: personal websites with domain names, perhaps hosted at home and mirrored on ZeroNet for all who can, perhaps offering a local YaCy instance to contribute to an open web search to reduce hyper-power of corporate backed search engines, perhaps hosting something else for individual users usage from mail+webmail, VoIP services etc i.e. pushing the classic "home-server" concept since now most of the connected users can do that, can profit from that, at a little enough price, but please let's agree not only to simple script-less fast-loading without CDNs etc contents, also to kind of publishing. To avoid create another niche we new old web must be useful like:

- some personal information made public, why a phone directory? If I have phone numbers to be published I put them on my website because accessing it must be just looking for my name and surname + eventual other tag/words in case of homonymy;

- some topics I want to publish, with proper RSS feeds because 99% of the reader are mildly interested in a small percentage of the content so will not came back frequently to discover something new, they might just get it in their own "inbox" by a lighter mean than an email, or perhaps not having aliases by a mean that do not demand a mail/alias to retrieve contents;

- support for various media, not only desktop and mobile but also scrapers, screen readers, terminals etc, a website must be used ok-ish with w3m.

Long story short instead of a crapload of contents lets makes personal websites like our public face to the web, with all non-web hooks of the case, like RSS.

We need such tools to made a social society without social networks, but still modern.

[1] The ~1930 web based on cards and telegraphs depicted and partially made by Paul Otlet and Henry La Fontaine

> One thing we need to understand when building websites optimised for reading is that text is small. Harry Potter and the Deathly Hallows is a pretty thick book by most measures, and only clocks in at about 500kb of text. How is it that this review of 1/18th of the book on Medium is 5.4 times the size of the entire book?

I copy-pasted the HTML source for the review in a new file and it's 20kb. So if it was a full review it would be a 360kb file. Uncompressed, unlike epub files. Once compressed it is ~6kb. 6kb*18 = 108kb. I wouldn't read a book review that is 1/5th of the original material or I wouldn't call it a book review but I digress.

Anyway, should we include the e-reader's viewer code to know how much information is used to display the book and compare it to the CMS's code or the code of the full page of the review to compare... what ?

> I copy-pasted the HTML source for the review in a new file and it's 20kb.

I opened it in a browser and hit F12, viewed the network panel and hit refresh... it is 3.41 MB.

You can do this on the web with Web Page Test... here's the result for the page in question: https://www.webpagetest.org/result/220523_AiDc6H_8YW/

That page takes on average 20 seconds to display... and what it loads to show a tiny bit of text is pretty mind-blowing: https://www.webpagetest.org/result/220523_AiDc6H_8YW/1/detai...

It shows 124 requests, and a total weight of 1,588KB sent across the network (some of which is compressed, so I think this is the reason the browser shows more weight)

Here's the code: https://ctxt.io/2/AADgpNP9FA for the review.

Now I do agree with you, Medium uses way too much data around its core content.

Where does the "1/18th of the book" come from?

The medium article has a "(18/52)" in the title, but that rather seems to indicate that the article is number 18 in a series of 52 (weekly book reviews in a year or so).

Totally missed that !

Reply on news.ycombinator.com