8 ms·
Big Fat Websites (2021)
- zelphirkalt 4y agoAnd this blog actually loads fast and does not require me to trust random third-party scripts to be able to see text. Good job!
- kretaceous 4y agoYes! You should check out https://bearblog.dev https://bearblog.dev, developed by the OP.
- dncornholio 4y agoevery website should load fast. If they should be clean is something that's too subjective IMO.
- noisymemories 4y agoI'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.
- zelphirkalt 4y agoThere 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.
- giantrobot 4y agoThe 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.
- FridayoLeary 4y agoAutoplay videos blinking ads and basically any dynamic content have no place on a text-based website.
- dncornholio 4y agoAutoplay videos have no place on any website. If my blog needs a video or dynamic content, it's not up to you to decide ;).
- hypertele-Xii 4y agoIt'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.
- johnchristopher 4y ago> 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 ?
- buro9 4y ago> 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/ 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/details/#waterfall_view_step1 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)
- johnchristopher 4y agoHere's the code: https://ctxt.io/2/AADgpNP9FA https://ctxt.io/2/AADgpNP9FA for the review. Now I do agree with you, Medium uses way too much data around its core content.
- rerx 4y agoWhere 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).
- kkfx 4y agoHum, "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
- detay 4y agoAnd they have to have a publish date. (You wouldn't believe the number of blog posts that do not have one)
- searchableguy 4y agoThat's because of SEO and perception reasons, I believe. It's intentional.
- jl6 4y agoYou are correct - this is an attempt to appear fresh. But it is no excuse. It’s still an anti-user dark pattern.
- dgb23 4y agoFully agree. Also you can appear fresh regardless _if you are actually fresh_, simply by adding an review/update date.
- wrycoder 4y agoOr if you’re not, just use a cron to keep the dates fresh
- jrwoodruff 4y agoBut... then what's the point of a date at all? May as well not have one.
- wrycoder 4y agoI should have used /sarc The idea was to fool people and bots into thinking it was fresh!
- ratww 4y agoYep. 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.
- Jamie9912 4y agoLol 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?
- dgb23 4y agoNot 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.
- john-doe 4y agoI 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.
- Jamie9912 4y agoDo you have 5 seconds to spare? 10 seconds to spare?
- john-doe 4y agoIf the content is worth accessing, certainly :)
- klibertp 4y agoThe question is more how often rather than how long. For example, this page: https://www.gnu.org/software/emacs/manual/html_mono/elisp.html 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.
- OezMaster 4y agoI was pleasantly surprised to find out that the author created https://justsketch.me/ https://justsketch.me/, which sponsors http://reference.sketchdaily.net/ http://reference.sketchdaily.net/ I found these to be great resources for drawing exercises.
- deleted 4y ago[deleted]
- icemelt8 4y ago
- fleddr 4y ago"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.
- rimliu 4y ago> 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.
- leokennis 4y agoBeautiful analogy.
- deleted 4y ago[deleted]
- capableweb 4y agoNot 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.
- Dave3of5 4y agoMost of the JS on a blog site will be analytics, don't hate the playa ...
- josephg 4y agoWhy 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.
- spicybright 4y agoSomewhat 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.
- Dave3of5 4y agoThen create a blog without using any of this tech and you'll soon realise it goes nowhere.
- josephg 4y agoI 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.
- TAKEMYMONEY 4y ago(including the site this article is hosted at)
- 4y ago
- qudat 4y agoI totally agree with the sentiment of this post. Bear blog inspired me to build https://lists.sh https://lists.sh which has been a blast to build. The goal is to foster a smaller web.
- aledthemathguy 4y agofinancial incentives.
- D13Fd 4y agoI 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.
- LordDragonfang 4y agoI 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.
- csw-001 4y agoI 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.
- yakshaving_jgt 4y agoI believe the author had intended to link to this[0] page instead. [0]: https://idlewords.com/talks/website_obesity.htm https://idlewords.com/talks/website_obesity.htm
- westcort 4y agoThis 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();
- damir 4y agoIf 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 https://news.ycombinator.com/item?id=17513447
- TAKEMYMONEY 4y agoMinimalism 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.
- throwaway4220 4y agoWell, HN has many of these elements but is unique. Maybe a maverick? Also, bit unfair there is no exclamation after subscribe.
- LordDragonfang 4y ago>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) https://en.wikipedia.org/wiki/Emoticon#Japanese_(kaomoji) http://kaomoji.ru/en/ http://kaomoji.ru/en/
- deleted 4y ago[deleted]
- coldtea 4y ago>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!
- TAKEMYMONEY 4y ago"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.
- deleted 4y ago[deleted]
- mch0lic1 4y agoIt'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.