8 ms·

Two Years and over 700 Websites Later

140 points by bradley_taunt 4y ago

frontrowseat 4y ago
My next side project, this gave me the goal/hope to keep it under 1mb just to be in this club! The internet is too bloated these days, and I swipe away if it takes even a few seconds to load a webpage. We can all do a little better for our users
- denysvitali 4y ago
  <link rel="stylesheet" type="text/css" href="https://thebestmotherfucking.website/main.css https://thebestmotherfucking.website/main.css"> And you're done :)
- xigoi 4y ago
  1MB is a low bar. Depending on what kind of project it is, you can go for way less.
tambourine_man 4y ago
For folks who started web dev in the 90s, with 9600 and 1440kbps modems, 1mb seems way too much. Probably not always accomplishable with the high res hero imagens and videos we need these days, but we should strive for a web that’s instant. There’s no reason we should be waiting for a page to download and render with the bandwidth and hardware available today.
- jl6 4y ago
  A page with a big image should still be able to quickly load the important parts (text and layout) and then have the big image finish loading in parallel.
  - tambourine_man 4y ago
    Exactly
  - chubot 4y ago
    1 MB is even too big for an image. Most 1 MB images won't suffer quality loss when viewed on typical devices when they are 100 KB or even 60 KB. And they should definitely be minimized for mobile devices I'd say that the only way a single web page should be 1 MB is if it has 10 or more images, which of course can be useful.
    - bombcar 4y ago
      The number of massive 5+ MB images I've been able to shave down tremendously by doing no more than using https://tinypng.com https://tinypng.com is absolutely frightening ...
      - vanderZwan 4y ago
        Were all of those images transparent? As in, did they even need to be PNGs?
        bombcar 4y ago
        Many were JPGs (the "site" is unfortunately named based on originally being used for PNG mainly) - but yes, many were not transparent but were deemed to need to be PNG because it is "better". Made even more headway on some of the ones we could control by using SVG instead (images that are basically text shouldn't be PNG or JPG).
    - hypertele-Xii 4y ago
      > typical devices If you need to design for today, that's fine. If you're designing for the future, well, already pushing 4K. Your "looks just fine on most devices" image is gonna look like an eye-squintingly tiny compressed-to-hell JPEG from 1992 in a decade or two. Think about music. "Sounds good on most devices (earbuds at the time)" caused an entire generation of music to be mixed to shit. You expect everyone to remaster? My own website doesn't qualify because I have gallery pages with multiple 1MB works of art. I hope my works can be appreciated in the future, on better devices. If that excludes me from a tiny ring of web designers essentially running an ad hoc demoscene competition for who can make the prettiest page in 1MB, so be it.
- nine_k 4y ago
  I suppose that most of the time the culprits are not excessively heavyweight assets. Number one culprit is client-side rendering. Don't deploy an SPA where a statically rendered page suffices. Don't delay rendering until your whatever other JS loads. Use fewest trackers of lightest weight. Somewhere distant second places would be asset download times (CDNs help), TLS handshake times (don't overload your server), complicated CSS that prevents fast rendering, etc.
  - DrBazza 4y ago
    Many media websites are now so full of cruft, the actual text of the story is barely a few Kb, and the other multi-Mb assets are videos, video adverts, trackers, javascript cruft, unoptimized css, unomptimized images, "infinite scroll", and god knows what else. The irony is lost on these companies that if the page doesn't load quickly enough I and many other people navigate away before half the cruft that pays for the page has loaded....
    - cercatrova 4y ago
      You're in the minority. Apparently those types of websites generate much more revenue [0]: I spent 3ish years making these kinds of websites (specifically those click bait-y “Can you name these Canadian snack foods??” quiz sites). They generate _a lot_ more revenue. Like more than double. Digital publishing’s main business model is paying as little as possible for 1 click and monetizing that click as much as possible on the other end. The sales “funnel” isn’t a funnel here, its just two steps “1. Show link to article . 2. Show ads.” Now if you’re an organic heavy site like NFL.com, you get plenty of free clicks just by reposting articles to social media. Its more important to keep your brand strong with a couple of small, highly paid ad units. But if you’re just an average publisher, you gotta literally pay for attention. It turns into a game of spending $1.00 for an ad on Facebook/Tabola/Outbrain/Snap/etc and trying to make $1.30 when they land on the page. Long term bet IMO is still high quality organic content makes more profit, but you can still make a lot with 3-4 engineers and average-ish content. [0] https://news.ycombinator.com/item?id=32133656 https://news.ycombinator.com/item?id=32133656
- Siilwyn 4y ago
  With proper srcset and sizes attributes, that serve compressed images in a modern image format you'll usually get below 1MB.
- chubot 4y ago
  Yeah I thought that was 1 MB per SITE, but it's 1 MB per PAGE which is WAY too big! I don't want to load that on my phone I just checked and my home page is 3,575 bytes, which is 280x smaller than 1 MB: $ curl https://www.oilshell.org | wc --bytes 3575 The longest article on the site is ~5200 words, and less than 57KB, or 17.6x smaller: $ curl 'http://www.oilshell.org/blog/2022/03/backlog-arch.html' | wc --bytes 56672 http://www.oilshell.org/blog/2022/03/backlog-arch.html http://www.oilshell.org/blog/2022/03/backlog-arch.html
  - pSYoniK 4y ago
    neat command! my homepage works out to 3,121 bytes and the longest article is 21,164. Never knew it's that small..
  - speedgoose 4y ago
    I just did a fast.com speed test on my phone with 2 bars out of 4 of 5G and I have 400 Mbps.
    - rustyminnow 4y ago
      Neat! I just did a fast.com speed test with 3/4 bars of 4G and got 60 Mbps! I didn't do a speed test, but I spent the weekend in an area where I was getting 1 bar and probably 5 Mbps if that. 5G coverage even when poor, is optimal conditions - not baseline.
      - speedgoose 4y ago
        The future is exciting (and warm)!
  - hdbdhzuwb 4y ago
    That is just counting the markup you deliver for those requests, not your style and JS bundles, which I don’t think is the spirit of the post.
    - 4y ago
dimmke 4y ago
I'm really proud that two websites I designed and built are on that list, but especially proud of https://foodpartners.us/ https://foodpartners.us/ which unlike a lot of the sites isn't a blog but is a full brochure style website for a business that would normally load many MB of crap if built by a normal agency.
- sonofhans 4y ago
  You should be proud! That’s an excellent website. It’s clear, usable, attractive, light, fast, informative, and obvious. A wild outlier, in other words :)
  - enraged_camel 4y ago
    I like the clean design, but the marketing copy could use work. For example, "We’re the leading southeast new business specialists" doesn't mean a lot, and also has a typo (region names should be capitalized).
    - dimmke 4y ago
      Fixed that, thanks!
- tut-urut-utut 4y ago
  Wow. It's great, you have a reason to be proud. Clean, to the point, light, crazy fast, zero bloat, no external trackers. And it looks nice. The only thing I don't like are the banners that waste precious vertical space when seen on a 14" laptop, but can't blame you for that, given how prevalent it is nowadays.
  - dimmke 4y ago
    There is one external tracker - Google Analytics. But blocked obvs if you use uBlock etc... I also designed and built this site in 2016 - over half a decade ago and it still looks and feels modern. It's an interesting look at how web design trends have slowed down from how things went from 2000-2010 to 2014-Present.
freediver 4y ago
You may want to consider dropping the criteria to 64k (if it can't fit in a RAM of c-64, it is bloated!). There are sites in your index like: https://www.pe-we.com/mengenal-kelebihan-dan-kekurangan-asuransi-mobil-all-risk/ https://www.pe-we.com/mengenal-kelebihan-dan-kekurangan-asur... that look like content marketing blogs also running google anayltics. Not sure if that was in the spirit of the project.
- vanderZwan 4y ago
  I think arguably it was, if we assume we want to target the worst offenders, which are exactly those types of webpage. I'm sure there are other list sites for the truly "spartan web"
oefrha 4y ago
1MB pages are performance-oriented now. Apparently this isn’t a parody. https://idlewords.com/talks/website_obesity.htm https://idlewords.com/talks/website_obesity.htm: > Today’s egregiously bloated site becomes tomorrow’s typical page, and next year’s elegantly slim design.
- coffeeblack 4y ago
  I remember 100kB as the upper limit for pages, but that was a time when internet connections were measured in kbps. So 1MB sounds reasonable.
- bombcar 4y ago
  As speeds get higher the amount of data that can "slip in" during the expected latency gets larger and larger. If your round-trip latency is 400 ms or whatever, why not have 1MB as your page if that comfortably fits into that latency?
  - oefrha 4y ago
    Complex web apps aside, the average page today doesn’t have more information than five years ago. There’s nothing useful to slip in.
  - xigoi 4y ago
    You know mobile data is a thing?
- _Algernon_ 4y ago
  >I shouldn't need sled dogs and pemmican to navigate your visual design. This was great. Thank you!
philliphaydon 4y ago
I just scrolled the list and saw craigslist.org, visited it, and its 2.3mb? Aren't the sites meant to be under 1mb?
- Minor49er 4y ago
  When you submit a site, you also provide its Pingdom results from this link, which may be different from the in-browser experience: https://tools.pingdom.com/ https://tools.pingdom.com/
rozenmd 4y ago
I shipped a ~8KiB status page app last week, it's still early days, but even with the features I have planned I doubt the size will be above 10KiB. With frameworks like Remix it's easier than ever to write React and ship pure HTML/CSS.
peanut_worm 4y ago
> Total size of all member websites combined: 169.4 MB Apparently that is comparable to a single page load of digital ocean’s blog https://news.ycombinator.com/item?id=32076634 https://news.ycombinator.com/item?id=32076634
- capableweb 4y ago
  Did you try loading https://www.digitalocean.com/blog https://www.digitalocean.com/blog yourself and measure it? I just did, and saw it pulled down 4.28MB worth of stuff, which is way too high for a blog, but nowhere close to 169MB. Maybe there was a bug and they fixed it quickly?
  - hombre_fatal 4y ago
    If I load it in Safari and scroll to the bottom, it reports 27MB transferred with a 110MB total (decompressed) payload. Looks like an error since most of the transfer is large JSON files that seem to be duplications of all of the content on the blog, but I only glanced.
whoibrar 4y ago
Glad to see this project grow, made my first pull request here :) Occasionally, I would go there and checkout random peoples blogs and its surprisingly how much great it can be. Some sites look good and are surprisingly fast. I love this collection.
8organicbits 4y ago
A quick check on pagespeed[1] gives me great performance numbers. Here is largest contentful paint (desktop): www.google.com 4.3 seconds (yikes...) 1mb.club 1.2 seconds (edit) news.ycombinator.com 0.7 seconds t0.vc 0.2 seconds tutor.0b.ee 0.3 seconds [1] https://pagespeed.web.dev/ https://pagespeed.web.dev/
bob1029 4y ago
I've been making complex biz admin websites for a few years now that fit in under 20kb (uncompressed) by cheating a little bit with web sockets and js eval. Blazor server-side is a pretty good approximation for what my technique looks like today. These websites are not the most accessible if we are factoring in network and platform concerns. But, they are by far some of the fastest (non-static) web experiences I have ever been responsible for. For employees in the same state as our datacenter, "instant" is really the best way to describe most interactions. We also use things like in-process SQLite for all of our persistence, so latency between button click & updated DOM is about as low as you could ever hope for. I think having lightweight & fast web experiences is the key to building a successful technology business. When your customers & employees have to wait seconds for each interaction to "come back", they are going to have way more time to think about competitors and spending their time/money/attention elsewhere.
nelsonfigueroa 4y ago
Similarly, there's also https://512kb.club/ https://512kb.club/
300bps 4y ago
What frameworks are everyone using to achieve small and fast page size?
- moonbooth 4y ago
  I'm using Hugo hosted on Netlify. 5Kb homepage including two SVG images at 1.2Kb each. Very happy with my stack!
harryvederci 4y ago
Proud member[0] of the 250kb club here, 1mb is bloat! :-D [0]https://250kb.club/withoutdistractions-com-cv/ https://250kb.club/withoutdistractions-com-cv/
- redsaz 4y ago
  The page says the avarage size is 228kb. Many of the submissions agree with you :)

140 points by bradley_taunt 4y ago

My next side project, this gave me the goal/hope to keep it under 1mb just to be in this club! The internet is too bloated these days, and I swipe away if it takes even a few seconds to load a webpage. We can all do a little better for our users

denysvitali 4y ago
<link rel="stylesheet" type="text/css" href="https://thebestmotherfucking.website/main.css https://thebestmotherfucking.website/main.css"> And you're done :)
xigoi 4y ago
1MB is a low bar. Depending on what kind of project it is, you can go for way less.

tambourine_man 4y ago

For folks who started web dev in the 90s, with 9600 and 1440kbps modems, 1mb seems way too much. Probably not always accomplishable with the high res hero imagens and videos we need these days, but we should strive for a web that’s instant. There’s no reason we should be waiting for a page to download and render with the bandwidth and hardware available today.

jl6 4y ago
A page with a big image should still be able to quickly load the important parts (text and layout) and then have the big image finish loading in parallel.
- tambourine_man 4y ago
  Exactly
- chubot 4y ago
  1 MB is even too big for an image. Most 1 MB images won't suffer quality loss when viewed on typical devices when they are 100 KB or even 60 KB. And they should definitely be minimized for mobile devices I'd say that the only way a single web page should be 1 MB is if it has 10 or more images, which of course can be useful.
  - bombcar 4y ago
    The number of massive 5+ MB images I've been able to shave down tremendously by doing no more than using https://tinypng.com https://tinypng.com is absolutely frightening ...
    - vanderZwan 4y ago
      Were all of those images transparent? As in, did they even need to be PNGs?
      - bombcar 4y ago
        Many were JPGs (the "site" is unfortunately named based on originally being used for PNG mainly) - but yes, many were not transparent but were deemed to need to be PNG because it is "better". Made even more headway on some of the ones we could control by using SVG instead (images that are basically text shouldn't be PNG or JPG).
  - hypertele-Xii 4y ago
    > typical devices If you need to design for today, that's fine. If you're designing for the future, well, already pushing 4K. Your "looks just fine on most devices" image is gonna look like an eye-squintingly tiny compressed-to-hell JPEG from 1992 in a decade or two. Think about music. "Sounds good on most devices (earbuds at the time)" caused an entire generation of music to be mixed to shit. You expect everyone to remaster? My own website doesn't qualify because I have gallery pages with multiple 1MB works of art. I hope my works can be appreciated in the future, on better devices. If that excludes me from a tiny ring of web designers essentially running an ad hoc demoscene competition for who can make the prettiest page in 1MB, so be it.
nine_k 4y ago
I suppose that most of the time the culprits are not excessively heavyweight assets. Number one culprit is client-side rendering. Don't deploy an SPA where a statically rendered page suffices. Don't delay rendering until your whatever other JS loads. Use fewest trackers of lightest weight. Somewhere distant second places would be asset download times (CDNs help), TLS handshake times (don't overload your server), complicated CSS that prevents fast rendering, etc.
- DrBazza 4y ago
  Many media websites are now so full of cruft, the actual text of the story is barely a few Kb, and the other multi-Mb assets are videos, video adverts, trackers, javascript cruft, unoptimized css, unomptimized images, "infinite scroll", and god knows what else. The irony is lost on these companies that if the page doesn't load quickly enough I and many other people navigate away before half the cruft that pays for the page has loaded....
  - cercatrova 4y ago
    You're in the minority. Apparently those types of websites generate much more revenue [0]: I spent 3ish years making these kinds of websites (specifically those click bait-y “Can you name these Canadian snack foods??” quiz sites). They generate _a lot_ more revenue. Like more than double. Digital publishing’s main business model is paying as little as possible for 1 click and monetizing that click as much as possible on the other end. The sales “funnel” isn’t a funnel here, its just two steps “1. Show link to article . 2. Show ads.” Now if you’re an organic heavy site like NFL.com, you get plenty of free clicks just by reposting articles to social media. Its more important to keep your brand strong with a couple of small, highly paid ad units. But if you’re just an average publisher, you gotta literally pay for attention. It turns into a game of spending $1.00 for an ad on Facebook/Tabola/Outbrain/Snap/etc and trying to make $1.30 when they land on the page. Long term bet IMO is still high quality organic content makes more profit, but you can still make a lot with 3-4 engineers and average-ish content. [0] https://news.ycombinator.com/item?id=32133656 https://news.ycombinator.com/item?id=32133656
Siilwyn 4y ago
With proper srcset and sizes attributes, that serve compressed images in a modern image format you'll usually get below 1MB.
chubot 4y ago
Yeah I thought that was 1 MB per SITE, but it's 1 MB per PAGE which is WAY too big! I don't want to load that on my phone I just checked and my home page is 3,575 bytes, which is 280x smaller than 1 MB: $ curl https://www.oilshell.org | wc --bytes 3575 The longest article on the site is ~5200 words, and less than 57KB, or 17.6x smaller: $ curl 'http://www.oilshell.org/blog/2022/03/backlog-arch.html' | wc --bytes 56672 http://www.oilshell.org/blog/2022/03/backlog-arch.html http://www.oilshell.org/blog/2022/03/backlog-arch.html
- pSYoniK 4y ago
  neat command! my homepage works out to 3,121 bytes and the longest article is 21,164. Never knew it's that small..
- speedgoose 4y ago
  I just did a fast.com speed test on my phone with 2 bars out of 4 of 5G and I have 400 Mbps.
  - rustyminnow 4y ago
    Neat! I just did a fast.com speed test with 3/4 bars of 4G and got 60 Mbps! I didn't do a speed test, but I spent the weekend in an area where I was getting 1 bar and probably 5 Mbps if that. 5G coverage even when poor, is optimal conditions - not baseline.
    - speedgoose 4y ago
      The future is exciting (and warm)!
- hdbdhzuwb 4y ago
  That is just counting the markup you deliver for those requests, not your style and JS bundles, which I don’t think is the spirit of the post.
  - 4y ago

dimmke 4y ago

I'm really proud that two websites I designed and built are on that list, but especially proud of https://foodpartners.us/ https://foodpartners.us/ which unlike a lot of the sites isn't a blog but is a full brochure style website for a business that would normally load many MB of crap if built by a normal agency.

sonofhans 4y ago
You should be proud! That’s an excellent website. It’s clear, usable, attractive, light, fast, informative, and obvious. A wild outlier, in other words :)
- enraged_camel 4y ago
  I like the clean design, but the marketing copy could use work. For example, "We’re the leading southeast new business specialists" doesn't mean a lot, and also has a typo (region names should be capitalized).
  - dimmke 4y ago
    Fixed that, thanks!
tut-urut-utut 4y ago
Wow. It's great, you have a reason to be proud. Clean, to the point, light, crazy fast, zero bloat, no external trackers. And it looks nice. The only thing I don't like are the banners that waste precious vertical space when seen on a 14" laptop, but can't blame you for that, given how prevalent it is nowadays.
- dimmke 4y ago
  There is one external tracker - Google Analytics. But blocked obvs if you use uBlock etc... I also designed and built this site in 2016 - over half a decade ago and it still looks and feels modern. It's an interesting look at how web design trends have slowed down from how things went from 2000-2010 to 2014-Present.

freediver 4y ago

You may want to consider dropping the criteria to 64k (if it can't fit in a RAM of c-64, it is bloated!). There are sites in your index like: https://www.pe-we.com/mengenal-kelebihan-dan-kekurangan-asuransi-mobil-all-risk/ https://www.pe-we.com/mengenal-kelebihan-dan-kekurangan-asur... that look like content marketing blogs also running google anayltics. Not sure if that was in the spirit of the project.

vanderZwan 4y ago
I think arguably it was, if we assume we want to target the worst offenders, which are exactly those types of webpage. I'm sure there are other list sites for the truly "spartan web"

oefrha 4y ago

1MB pages are performance-oriented now. Apparently this isn’t a parody. https://idlewords.com/talks/website_obesity.htm https://idlewords.com/talks/website_obesity.htm: > Today’s egregiously bloated site becomes tomorrow’s typical page, and next year’s elegantly slim design.

coffeeblack 4y ago
I remember 100kB as the upper limit for pages, but that was a time when internet connections were measured in kbps. So 1MB sounds reasonable.
bombcar 4y ago
As speeds get higher the amount of data that can "slip in" during the expected latency gets larger and larger. If your round-trip latency is 400 ms or whatever, why not have 1MB as your page if that comfortably fits into that latency?
- oefrha 4y ago
  Complex web apps aside, the average page today doesn’t have more information than five years ago. There’s nothing useful to slip in.
- xigoi 4y ago
  You know mobile data is a thing?
_Algernon_ 4y ago
>I shouldn't need sled dogs and pemmican to navigate your visual design. This was great. Thank you!

philliphaydon 4y ago

I just scrolled the list and saw craigslist.org, visited it, and its 2.3mb? Aren't the sites meant to be under 1mb?

Minor49er 4y ago
When you submit a site, you also provide its Pingdom results from this link, which may be different from the in-browser experience: https://tools.pingdom.com/ https://tools.pingdom.com/

rozenmd 4y ago

I shipped a ~8KiB status page app last week, it's still early days, but even with the features I have planned I doubt the size will be above 10KiB. With frameworks like Remix it's easier than ever to write React and ship pure HTML/CSS.

peanut_worm 4y ago

> Total size of all member websites combined: 169.4 MB Apparently that is comparable to a single page load of digital ocean’s blog https://news.ycombinator.com/item?id=32076634 https://news.ycombinator.com/item?id=32076634

capableweb 4y ago
Did you try loading https://www.digitalocean.com/blog https://www.digitalocean.com/blog yourself and measure it? I just did, and saw it pulled down 4.28MB worth of stuff, which is way too high for a blog, but nowhere close to 169MB. Maybe there was a bug and they fixed it quickly?
- hombre_fatal 4y ago
  If I load it in Safari and scroll to the bottom, it reports 27MB transferred with a 110MB total (decompressed) payload. Looks like an error since most of the transfer is large JSON files that seem to be duplications of all of the content on the blog, but I only glanced.

whoibrar 4y ago

Glad to see this project grow, made my first pull request here :) Occasionally, I would go there and checkout random peoples blogs and its surprisingly how much great it can be. Some sites look good and are surprisingly fast. I love this collection.

8organicbits 4y ago

A quick check on pagespeed[1] gives me great performance numbers. Here is largest contentful paint (desktop): www.google.com 4.3 seconds (yikes...) 1mb.club 1.2 seconds (edit) news.ycombinator.com 0.7 seconds t0.vc 0.2 seconds tutor.0b.ee 0.3 seconds [1] https://pagespeed.web.dev/ https://pagespeed.web.dev/

bob1029 4y ago

I've been making complex biz admin websites for a few years now that fit in under 20kb (uncompressed) by cheating a little bit with web sockets and js eval. Blazor server-side is a pretty good approximation for what my technique looks like today. These websites are not the most accessible if we are factoring in network and platform concerns. But, they are by far some of the fastest (non-static) web experiences I have ever been responsible for. For employees in the same state as our datacenter, "instant" is really the best way to describe most interactions. We also use things like in-process SQLite for all of our persistence, so latency between button click & updated DOM is about as low as you could ever hope for. I think having lightweight & fast web experiences is the key to building a successful technology business. When your customers & employees have to wait seconds for each interaction to "come back", they are going to have way more time to think about competitors and spending their time/money/attention elsewhere.

nelsonfigueroa 4y ago

Similarly, there's also https://512kb.club/ https://512kb.club/

300bps 4y ago

What frameworks are everyone using to achieve small and fast page size?

moonbooth 4y ago
I'm using Hugo hosted on Netlify. 5Kb homepage including two SVG images at 1.2Kb each. Very happy with my stack!

harryvederci 4y ago

Proud member[0] of the 250kb club here, 1mb is bloat! :-D [0]https://250kb.club/withoutdistractions-com-cv/ https://250kb.club/withoutdistractions-com-cv/

redsaz 4y ago
The page says the avarage size is 228kb. Many of the submissions agree with you :)