1MB Club
1mb.club
1mb.club
I feel like the 1MB limit is excessively generous, especially for text-only pages. But maybe that's what makes it so damning when pages fail to adhere to it. I know at least one website I maintain fails it spectacularly (though in my defense it's entirely because of that website being chock-full of photos, and full-res ones at that; pages without those are well under that 1MB mark), while other sites I've built consist entirely of pages within a fraction of that limit.
It'd be interesting to impose a stricter limitation to the 1MB Club: one where all pages on a given site are within that limit. This would disqualify Craigslist, for example (the listing search pages blow that limit out of the water, and the listings themselves sometimes do, too).
I also wonder how many sites 1mb.club would have to show on one page before it, too, ends up disqualifying itself. Might be worthwhile to start thinking about site categories sooner rather than later if everyone and their mothers starts spamming that GitHub issues page with sites (like I'm doing right now).
My toy project https://k8.fingswotidun.com/static/ide/?gist=ad96329670965dc...
Gives you an emulator, an 8-bit AVR Assembler, and an IDE for just over 500k transferred. Almost all of it JavaScript.
Using math.js is by far the heaviest part but at least your Asm already knows things like solarMass and planckConstant :-). CodeMirror comes in second heaviest but for user-experience-per-byte you're always going to be streets ahead of a gif.
It's over one hundred thousand lines of JavaScript code minified and Gziped into a 300KB bundle which should fully load in about 300ms on a decent computer.
No kidding. I just checked and the average text-only page on my blog well under 100kb. Even the image-heavy front page is under 1MB...
Even the page where I used images came in at juuuust about the limit -- to the point where you'd have to make a ruling of whether the rest of the page gzipped counted because over the wire was technically <1MB but it was just above after decompress. The site does specifically say "downloaded", haha
(This is a flexible target, depending on the complexity of a page. E.g. for a "bloated" page, a fully styled video display for competition winners showing 200+ entries and 280+ individual videos in categorized views is about 250K, including a few images, two and a half font families and the Vimeo Player SDK, but excluding the load of any external video streams. However, with compression we still manage the 140K mark.)
Then reality hits: Client insists on a full-width photographic hero image as it's still 2014. Usual controversies about a full-size intro video (autoplay, of course), we must have this highly intrusive chat asset installed, etc, etc… – And we easily blow the 1MB limit.
Lets say you write a daily blog. A single A4 of text contains on average 3000 characters, your posts average slightly above that by being 4000 characters. How long until the text content alone is above the 1MB limit.
https://dictionary.cambridge.org/grammar/british-grammar/all...
Being more verbose is generally just poor writing. Now, using a separate website per topic seems like a silly limitation, but the more topics being discussed the less relevant the discussion.
A 700kB JavaScript page can take up to 10 sec. to render on older mobile devices. And a 500kB image can contain megapixels which will slow down non-PGU browsers.
Personally I always go for a max 2 sec. limit on all devices.
For context, 1MB is the same order of magnitude as the original Doom which was about 2.4MB in size. [1]
[1]: https://www.wired.com/2016/04/average-webpage-now-size-origi...
Even better - fixed site-wide assets (i.e css, js) to features; hence loading an entire framework only to use a small % of it's features is penalised.
Google's headline research on the subject says "Improving your load time by 0.1s can boost conversion rates by 8%."
Some add'l data, sourced by Neilsen Group below:
- Google found that increasing the load time of its SERPs by half a second resulted in a 20% higher bounce rate.
- Google found 53% of mobile visits ended if a page took longer than 3 seconds to load.
- Akamai aggregated data from 17 retailers (7 billion pageviews) and found that conversion rates were highest for pages that loaded in less than 2 seconds; longer load times correlated with 50% drops in conversion rates and increased bounce rates, especially for mobile visitors.
- BBC found that for every extra second of page load time, 10% of users will leave.
Want to sell / fix this?
Here's the best three simple resource illustrating objective third party results from increasing site speed:
- https://blog.hubspot.com/marketing/page-load-time-conversion...
- https://www.cloudflare.com/learning/performance/more/website...
Here is a more compelling deeper look from a leader in the UX space:
- https://www.nngroup.com/articles/the-need-for-speed/
Here's a really well written article about how to PROVE to the powers that be that site speed is worth testing:
In e-commerce, the biggest factors (that come to mind) to compete on are—SEO and brand aside—price, offerings, and convenience. Convenience has two dimensions: UX and performance.
If a user has a very clear idea of what they want from your site, they'll probably be patient. If a user is channel surfing (and the vast majority are when it comes to shopping, comparing options, etc.), then every millisecond matters. Every millisecond spent loading is a millisecond not spent selling/convincing.
If I'm spending an hour's pay on something I really want, of course I'll wait 10 seconds for the page to load, or if I can't get it to load at all, I'll make a note to try again later from different browser or internet connection. I'll manually enter my address details if they didn't auto-fill properly. I'll respond to emails on what I want to declare for customs, and various other efforts.
I, and people I know, feel like we buy very little on a whim. Is that unique? Are there whales who buy everything you can put in front of their face, or a different demographic who searches for something to buy and then changes their mind in precisely 850 milliseconds?
I would accept that like candy in the checkout lane, the profit is small but worth more than the extra effort it takes to put the offering there, but the revenue is small compared to the actual stuff people need to buy, but the analytics that suggest that hundreds of people click a link to your page but most close it faster than you can read the headline just seem unbelievable.
They seemed to come from when mobile phones were much slower when there was a valid use for AMP pages. A/B test data is very easy to cherry pick from and you can see a 10% increase in conversation based on random chance. I can see my marketing team misinterpret data like that and use it for promotion. I am skeptical.
I improved the initial loading speed of a website so it was 30% faster on an old mobile phone and it made no difference in conversation based on the analytics.
Most people used faster phones with faster internet that it really didn't matter. After the first page load, most of the bloated assets were cached so even those with slow connections were relatively fast navigating further.
There could be some types of websites where speed matters more like if you promoted click bait articles with high bounce rates. But if you have high quality content, it isn't going to be that important unless you have really terrible bloat.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#662113" d="M27.3 5.7c4.9-3.1 11-3.9 16.8-4.1A162 162 0 0031 10l-3.7-4.5zm4.1 5.6c4.8-3.6 10.1-6.5 15.3-9.6a18 18 0 01-4.3 12.7l-11-3z"/><path fill="#c1694f" d="M44 1.6l3.3-.3-.6.4c-5.2 3.1-10.5 6-15.3 9.6 3.7 1.2 7.3 2.2 11 3l-6 6.2c-3.6-.8-7.4-2.8-11-2.4a70.5 70.5 0 00-17 18.3c2.7.2 5.5.4 8.2.4h.5c-3.3.2-6.6.4-9.9.9 3.6.6 7.2.5 10.8 1-3.7 2.2-8.2 1.7-12.4 1.7-1.6 2.4-2.7 5.3-5 7.1.7-2.8 2.6-5.2 3.8-7.8.1-2-.4-4.1-.5-6.2L6.7 36l.3-.3c5.2-7 10.7-13.7 17-19.7l-1.6-7.7L27 5.4l.3.2 3.6 4.5c4.3-3 8.7-5.9 13.2-8.5z"/><path fill="#d99e82" d="M8 21.2C11.6 16 17 12 22.3 8.3L24 16A178 178 0 007 35.7c-1-4.8-1.3-10 1-14.5zm.5 15.2c4.6-6.8 10-13.4 16.8-18.3 3.7-.4 7.5 1.6 11.1 2.4L33 24.1c-2.5-.2-4.9-.4-7.4-.4l5.4 2.4-3.2 3.5c-3.7-.3-7.4-1-11.2-1l9.7 3a10.7 10.7 0 01-9.5 5.2c-2.7 0-5.4-.2-8.2-.4z"/></svg>
I went with:
<link rel="icon" href="data:;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAA
AAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA">
Renders a black square, everywhere except Safari. The black square actually goes with the brand.Performance is important, but if your site is clocking in at 17kb then you're probably doing okay.
But calling larger sites a "cancerous growth on the web" just feels immature to me. Everything is just cost/benefit. There's no need to bring a black-and-white fanatical exaggerated mindset to it.
You can celebrate something you like without having to make the alternative a disease, sheesh.
There is zero benefit to me in loading 20mb of garbage just so I can read 10kb of text.
2) Sometimes things might be useful to people other than you. The world doesn't exist to cater to your needs, and referring to things that aren't exactly what you want as cancerous is childish.
>You can celebrate something you like without having to make the alternative a disease, sheesh.
You can, but would you be equally successful at it?
Name Status Type Size
------------ ------ -------- --------
danluu.com 200 document 2.5 kB
analytics.js 200 script 18.9 kB
collect 200 xhr 67 B
favicon.ico 404 text/html 266 B
Shameless plug: I maintain a lightweight home page myself at https://susam.in/ and I try to keep it as lean as possible without compromising on some custom formatting I care about. So far I have got the transfer size down to less than 6 kB.Ah, the late 90s and early 00s when we still had user.css (in a meaningful sense).
Does an analogous window exist for QUIC and HTTP/3?
Please use uBlock Origin.
What I think they mean by this is that you shouldn't link to resources on their website to make it seem like they endorse your (product, website, whatever).
From the legal disclaimer at the bottom:
> linking to this website without written permission is prohibited
"If you have any comments about our WEB page, you can write us at the address shown above. However, due to the limited number of personnel in our corporate office, we are unable to provide a direct response."
I see they have a link to "Berkshire Activewear". Now that's a much much more heavyweight page.
Can it be assumed that this same website has been in place since 1978? Obviously not exactly like it is now, but probably not far off.
I wonder what the logic for the 1978 date is. It's hard for me to believe they had any reasonably connected predecessor of this in 1978.
But, the website looks rather similar to how it did back in 2001 (with the recognizable two-column list of bullet points):
https://web.archive.org/web/20011129002047/https://www.berks...
How about you average their subsidiary web pages? Start with DQ.com (Dairy Queen)
In situations like that, it's right and proper to ask who built the site. Then shake your head with absolute contempt.
The correct response is to work out who was responsible for maintaining the site for the past five years.
Includes analytics, chat client, big product screenshot, theming and payment integration, so you can still do a lot well within 1MB.
Assuming kB and dialup, which was 83% of the US at the time (easiest stat to quickly find), that was a difference of about 23s vs 121s load time.
Edit: Seems like the UK would have been about 50/50 around that time according to this article: https://www.independent.co.uk/news/business/news/broadband-o...
Page size does not matter. Render time/time 'til functional does.
Stripe.com is 1.2MB fully loaded but is pretty much all non blocking so it feels as fast as a very small site. By the time you've scrolled to the bottom of the homepage it's loaded >2MB. The convert pretty well, and my experience is that Stripe knows what they are doing better than most. So what should we be optimising for? Total page size? or a lightning fast experience with non-blocking content which can be as big as we require?
IMO developers need to optimise for building fast sites, not light ones for the sake of being light.
In these situations all I want to say is "Who cares".
Optimization matters when it actually solves a problem, before that it's just wasted effort.
I don't hear the general public yelling from the rooftops "The web is too slow! Developers are building too fast! I wish we could go backwards!"
Meanwhile valley bros keep helpfully reminding me to upgrade my computer to a reasonable 2020sh.
This is said by someone who is not a "valley bro" and often lives in rural Canada.
YouTube redesign, Twitter redesign, and one other huge site I can't remember at the moment all had plenty of complaints about how much slower --- and less featured --- they were. The average user doesn't know a static page has been replaced with a bloated SPA, but can sure feel the difference.
The web has declined for sure, and it's precisely because of ignorant developers with attitudes like yours.
To any twitter "engineers" on HN, sort it or abort it.
Not only due to developers. Designers have a hand in this too. Example: on many sites (Twitter, Imgur, etc.), it is not possible to simply zoom in an image without jumping to a lot of hoops. You hover the mouse over the image, the pointer becomes a magnifying glass, you click and...
The image blows up to fill to the screen until it his a overly large and useless border that some daft designer thought looked cute. There is no way to zoom in any further, that is blocked. So zooming to see a part if the image in full detail is out of the question. What's worse, if you have a small screen, likely to be the reason that you wanted to zoom in the first place, the zoomed image is actually smaller than the original. Great!
So, I've wasted my data plan to download a large high resolution image and a bunch of javascript libraries that make sure I don't get to enjoy that resolution. I can't remember for sure, but I bet that his already worked fine in Mosaic in 1994. Not anymore. And why? What benefit does this bring? Other than that it looked nice on the designers computer, I mean.
This list has a second hidden benefit: Typically, I find that those who have very lightweight pages have more interesting things to say.
That being said, that's not a hard and fast rule, as I both have a lightweight page, and not much that's interesting to say.
I can point to two blogs on either side that have a lot to offer.
Large bundle: https://www.joshwcomeau.com/
Small Bundle: https://www.eugenewei.com/
And just as someone who grew up horrified if individual pages got over 100kb (or whatever the company rule was), the idea of not caring at all about "page" weight is how my old company wound up passing 20+ megs of JSON around just because it was a little easier.
The same thing is not true for the general public.
Except they usually yell "My phone is too slow" when the problem is actually the web that got 3X bloated since they bought their phone.
With the major disclaimer that if your website serves ANY commercial utility for you personally or your business website speed is hugely important a clear cause / effect impact on engagement, conversion rate, bounce rate, etc.
Makes them feel like the site actually does some calculations, even if everything is cached in the background.
See travel agencies, airline comparators, train booking services, insurance benchmarks or credit simulations.
I mean never mind that my internal page links load in <50ms thanks to prefetching and all the other smart stuff that Gatsby does.
I'll keep listening to my users.
What I've found is that the users I have that complain are by far the minority of my users. They ask for every little whim, many of them conflicting. If I'd been listening to them my website would be a mess right now. Alexa top 5k. 7 million uniques / day. 550kb. Less than 2 years old.
Every time I implement a new feature, there is no significant change in my site's trajectory. Improving latency by adding an auto-scaler, however, has lead to a massive uptick in usage in the past 90 days.
People obviously care because people obviously want their browsers to load content quickly. No one likes waiting for webpages to load.
How do you decide when a website/webapp is fast enough and you've "solved the problem"? On what range of devices and internet speeds do you test on?
As my family's personal IT assistant, I can't tell you how often I get the complaint that "my phone is too slow" or "my laptop is slow and heats up" when all they are doing is browsing popular websites. An we live in a developed nation with decent internet -- I can't imagine how awful it must be when you don't have those luxuries.
I think your comment is lacking severely in perspective, and the mindset you've demonstrated to be particularly bad for the web. Not to mention snide and dismissive.
That’s actually a core reason for slow pages. People in offices with large monitors and huge bandwidth develop those sites
I think it might be like bicycle parts. It is ridiculous that parts are sold with a pricetag PLUS a weight in grams.
I mean, you could save the equivalent of $100 by wearing a short-sleeved shirt.
But those obsessive people end up making most bicycles lighter weight, and thus bike rides for normal people are more enjoyable.
Flippant but I doubt there's any clear correlation between reducing the size of a web page and reducing overall CO2 emissions.
Ironically you can google about and find it probably.
When I started writing Web sites (late '90s), we'd get spanked for 50K pages.
I'm not sure it's possible, anymore, with a lot of the CSS and JS libraries; let alone the content.
But back then, we didn't have content delivery networks. CDNs make a huge difference.
This was back when Lycos was news to most people and Alta Vista was just launching. It was a poor man’s Yahoo. I don’t think it was a coincidence that the end of its usefulness came so close to the birth of better alternatives. The ungainliness of the status quo is usually what goads someone into trying something new.
It was an observation, and recounting some personal experience.
What is bloat, as far as I'm concerned, is hitting a page with a 4K background video.
If you want a real "I had to walk 2 miles, barefoot" story, I can tell you about writing [C]WAP/WML sites (the old "m.<yourdomain>" sites). I actually considered using XSLT to extract WML from the regular site HTML.
priorities all over the place and major regression in the most crucial things
I love the idea, just needs a better measurement.
I do agree that 1MB is arbitrary, but it's the right kind of arbitrary IMHO.
1. Weight sites by some popularity count. Otherwise does anyone care if some random small site generates a 0.1k response just to get to the top
2. Do you plan continuously verify the download size is still accurate.
12 requests total, 322kB transferred (914kB uncompressed, so either way), finish in 991ms. Request was made between Texas and AWS us-east-1. Server running on a T3a instance. This is .NET Core 3.1 on Windows Server 2019.
Of the 322kB, blazor.server.js is 39.2k and our JS interop shim is 3k. This represents all that is required to communicate between server and client. The rest of the static source is ace code editor, bootstrap, jQuery and open iconic. All remaining interactions happen as deltas over the websocket connection.
Every day that I work with Blazor, I am further convinced that it is the only way to build our web applications moving forward. I don't have a good answer for Blazor server side in mass-scale public-facing scenarios (a la Netflix), but anyone can come up with an edge case to poke holes. Our 'internal' dashboards are actually accessible from the public web and we have not experienced any DDoS or other performance incidents. If something does come up, I will just pop the VM over to the internal network & require VPN access. That said, I really prefer accessing Blazor server side apps as directly as possible due to the latency concern.
So, instead of sending tons of js on the client side that does the job, let's connect via websocket to the server and let the server return HTML with new content dynamically, yea?
Does that mean LiveView?
I guess we need a term for that since every framework is using a different name for it.
Single page applications are horrible, and oh-so-common.
With good code splitting, which is supported basically out of the box by Webpack and all the big front-end frameworks, I would argue a well-written SPA transmits less data in the long run than a fully server-rendered app. The initial payload is bigger by a few hundred KB sure, but after that:
- Like server rendered pages, you still only load pages on demand, thanks to code splitting
- Unlike server-rendered pages, you can cache everything except the data that changes, because it’s JavaScript not HTML.
Yes you’re still making a request for fresh data on every page load, but while the code is cached you need only download the raw data itself. You’d have to be really clumsy to send a JSON payload bigger than a full HTML document containing a rendered representation of the same data.
Of course, this only really applies to apps. Static or infrequently changed content, you’re better off either server rendering or just serving static files.
You can also make the argument that it would be more efficient to serve mostly static HTML, with the bare minimum JavaScript required to fetch new data, but ultimately everything is a trade off :)
Seriously though, this isn't just a "grammar" thing. If you don't know the difference between millibits and megabytes, you probably shouldn't post on the subject of page size (or anything else relating to bandwidth consumption / network performance).
I still hate it when people flag comments like yours because maybe it sounds "offensive" or something, but you can improve your tone too.
[0] - https://en.wikipedia.org/wiki/International_System_of_Units
My blog is pretty lightweight, but I use Japanese in the about page, and that font on that page blows everything else out on download size. I could subset it just for that line, but consider sites containing entirely CJK content...
Don't.
I'm a huge fan of minimalism using gopher:// frequently.
But blanket statements like this seems seems a little too much.
I'm personally aware of some educational tools that non-techy educator are able to use with just a user name and password. A few years ago in order to deliver tools like that the process was a physical CD, some key, some installation wizard... and if you had Mac? tough luck.
Let's be conscious about bandwidth usage and bloat, but we are no longer in the 90's and, even if imperfect, progress has happened in tech
Performance is just one piece of the UX puzzle. Users don't really care about bundle size... They care if your site provides value in a reasonable amount of time.
> Min is used by over 65,000 people in 195+ countries, from North Korea to South Sudan to Mongolia to Somalia. Think your software is critical? Try a webapp keeping you alive in a warzone.
Now, whether or not this actually happens is a good question, but it does seem like a plausible possibility.
Can you share some such situations?
Performance metrics are better when put into perspective.
To do this, there is almost no runtime dependencies - while I "lost" a few months building things I could borrow from bigger libraries (from parts of rxjs to much bigger component libraries/design systems), development speed is now excellent!
Currently sitting at 750kb and close to feature completion so I'm pretty sure that it will be achieved.
People decide it’s more economical to add more stuff to existing pages than it is to introduce a new page. As time progresses the number of pages goes up logarithmic to the amount of functionality.
This hits on two fronts. One is pressure from the non technical people, who want the cost of new stuff to be O(1). “This is so simple. Why do you have to make it a big deal?” Makes sense the first time. Makes no sense at all the 58th time.
The other one is that we don’t have an easy way to carve up functionality and move it around efficiently. Webpack and friends try to solve this problem, but it leaves a lot to be desired. It’s easier logistically to have the same giant couple of JS bundles where almost every bit of logic is available everywhere. Which makes it more tempting to expose all functionality everywhere.
I discovered at one point that the quite effective strategy I used for maintaining mature wikis is essentially applying the B-Tree algorithm by hand, with depth weighted by recency (eventually all outdated documentation is relegated to the leaves, or updated in order to avoid relegation).
I have a hunch you could do much the same for websites, but I haven’t worked out how to do it in a spirit of refactoring (stability is the first word, but progress has the final say).
There’s a related issue with Conway’s law, where the links on the main page or in the footer are always proportional to the number of divisions in the organization, and the number of initiatives currently in progress or recently finished. This vastly increases the decision tree even when you avoid having a giant landing page. I’ve only seen one solution to this and that is to treat these links as what they are: ads. Ads are either short lived or get rotated frequently to avoid overwhelming the audience.
Site: http://packet.city/
CDN's, network speed, server load, page render time, all have a greater effect than the fractions of kilobytes that differentiate these sites...
https://www.speedshop.co/2015/11/05/page-weight-doesnt-matte...
> Bandwidth is not the problem, and the performance of the web will not improve as broadband access becomes more widespread.
> The problem is latency. Most of our networking protocols require a lot of round-trips. Each of those round trips imposes a latency penalty. Latency is governed, at the end of the day, by the speed of light. Which means that latency isn’t going anywhere.
Of course, this will get downvoted on an all-text forum. That won't make it less true.
I can understand why (frameworks, rich assets, etc) but it puts us in an interesting place.
I wonder what the web will look like in 2030?
Some part of the growth is bloat(analytics frameworks, janky animations, needless SPAs), but another factor driving bundle size is the fact that the raw web is mostly unaesthetic and unnatural to use, HN excepted.
The DOM being what it is, you need a lot of code to make it look like a native app, and I think it’s a noble goal to get as close as possible to native even if bundle sizes grow.
A few years ago I wrote a little blog software which is based completely on JS functionality (including i18n and page transition animations) and doesn't work without it. So much so that no search engine ever finds the posts (my mistake, if you would do it right, that should not be a problem nowadays).
And yet, loading a page is less than 1 MB. In fact, loading the HTML and JS only, the page would fit in 100kb. The Webfonts are responsible for most of the traffic.
Also, if you can develop a website for half the cost with twice the size, isn't that the right thing to do? Developer time is the expensive resource, and bandwidth is cheap.
2. Even when speed is not an issue, many people are billed by the megabyte. My phone's data plan for example. I almost never use it for anything more than email and a handful of very trusted sites.
Part of what made it possible was the Mu CSS Framework: https://bafs.github.io/mu/
https://john-doe.neocities.org/
I'm just looking at modern front end web again (we're using react, ant - and I've stockholmed myself into considering react with tailwind as a "lightweight" alternative... Nice to be reminded about truly simple html+css).
Is this just some sort of self host?
That said, the metric here is too blunt, too broad.
1) We need to call out avoidable bloat. A simple example: too often I'll visit a site where say the full-hero image is full width and full height. The problem is the same 300-500k+ image that's served to desktop is served to mobile. No media queries (if they're using background-image), no sizes and srcset if it's an image tag.
2) It's about expectations. Some site are naturally image heavy (e.g., photography). Within reason, that's acceptable. Some use of lazy load is better than paging, and such.
3) And do we throw the baby out with the bathwater? If a site is slightly bloated but accessible, I think there should be redeeming points for that. That is, you had X or Y amount of resources and you made #a11y a priority, at say the expense of trimming some bloat. I'm okay with that.
I do miss the lightweight early/mid 90s web sometimes, but I have no interest in artificial constraints that treat smallness as a virtue in and of itself.
width: calc(var(--data-size)/1000 * 100%);Are there no tools to extract only the portions of js / css etc that your site actually uses, and just host that mini package yourself?
This makes me feel pretty guilty when I realize that my blog is loading 118.18 kB of minified (!!) css, and almost 200 kB of web fonts, even though the front page of my blog still doesn't exceed 1MB overall.
(And I actually don't like the current theme of my blog that much anyway. I have a hard time picking a clean, "brutalist" theme.)
Despite all that, I propose an additional, even more exclusive club, because the internet needs a break. I propose 250kb compressed first-load size.
Can anyone recommend a drop-in, minimal stylesheet that will make basic HTML (without classes/ids) format well on both web and mobile?
In particular, by default stuff is really small on mobile screens, you have to zoom around.
Basically bootstrap, but more lightweight and without the effort of learning all the classnames etc.
Maybe you can derive some inspiration from it.
That's just because mobile browsers are intentionally broken by default. All you need to get them back to sanity is the following element in your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Client requests page with 500kb budget? Send text-version with tiny images. Client requests page without any budget? Send full rich version, with full-res images.
This is interesting though. Wonder what the average newly founded website sits at these days.
That being said, one of the top sites is text.npr.com. It’s cool NPR has that (from an accessibility standpoint), but it shouldn’t get any awards for compact design.
And yes, doing anything mildly responsive with jquery is too hard. And not in the "I don't know how to do this" way. Its just a huge waste of time. What takes 100 lines of jquery code can be done for free with jsx. Usually jquery sites settle for sub optimal UX because its too hard to do the things react sites do.
Don't get me wrong, jsx is great. but it should be used in the right place.
If you want great UI and UX, these are anything but trivial. This is why taking an off the shelf solution is preferable to reinventing the wheel in the pursuit of marginal improvements of speed (not mentioning 3rd party solutions are often still faster than what you could whip up in a day or 2).
In my day, we'd tie an onion to our belt.
If it’s just a static or almost static content I’d lean more towards just plain HTML, maybe with a little server templating.
I believe it should be similar on Chrome and Safari as well, just locate the Network tab in the browser console.
lmfao a little dramatic. JS heavy sites _can_ be great experiences if they are developed properly just like <1MB sites can be garbage if they are poorly developed.
Glad Google Maps lets me view the world in 3D and with street views and make custom maps, and read reviews with photos, etc. Don't care that it takes more than 1meg.
Love Apple's beautiful pages like the Macbook Air page at 14meg
Could we have Facebook without a huge download? Is this saying the web should not have these features? Are we intended to download each new application separately on a PC like we do mobile?
I see so many complains about "the bloated web", but no solution that let's us keep the tremendous value the internet has given to the world. It just comes across so short-sighted and reactionary.
Your 1mb webpage is approximately 60ms worth of Disney+ streaming.
Your 1mb webpage is approximately 1.7s worth of Zoom chat.
Your 1mb webpage is approximately 1.9s worth of Tiktok video.
Unless you are specifically targeting low-bandwidth users, you need to worry about product market fit long before you worry about slimming your js bundles down.
There aren't some tiny number of low bandwidth users with some esoteric internet problem, there is a significant divide due to technological and geographic reasons. Averages are very misleading when the majority of people in cities connected to various fiber end points keep getting crazier and crazier speeds while 50% of the US is stuck on ADSL, with a theoretical max of 20Mbit down - add geographical limitations and that's often far lower due to line noise. Where I live in the UK it's also just a matter of luck, I live in the middle of a major city and yet in the 5 places I've lived over the last 10 years the only option was ADSL, and never >6Mbit.
I haven't even started the argument about other countries with poorer internet infrastructure.
When you assume being able to download at 1MiB/s is basic, you make the internet suck for a huge chunk of the population, they are not the majority - but barely.