Web Bloat Score Calculator
webbloatscore.com
webbloatscore.com
Page size: 3,672 kB and 219 requests
Image size: 11,390 kB (http://www.webbloatscore.com/Screenshots/58b58030-6807-4638-...)
WebBS score: 0.322
It's apparently easy to obtain a good WebBS score by including lots of JPEG images. The PNG used for the image size calculation is typically much larger for the same bitmap, so every JPEG reduces the WebBS score.
I've got a very similar score of 0.323 for an Angular SPA with a bunch of dependencies (1,276 kB, 44 requests) that basically shows 5 jpeg images.
Would be interesting to see the result when using JPEG instead of PNG. However it's still easy to gamble, just display some large JPEG images in full size and the score will approach 1.
Edit: By the way, here's a working screenshot link for the score above (image size 3,947 kB): http://www.webbloatscore.com/Screenshots/aeea9b6a-4852-4b01-... They screenshot the whole page.
Or less, depending on the JPEG quality setting used in each case I guess. That's not completely unreasonable though - if I only want to look at a few large images (e.g. from Mars) and my browser downloads mostly just that, it's not really bloated.
The site timed out while trying to calculate the scores, so I had to do it manually. The respective sizes were 3377 (html), 283130 (png) and 3323 (html), 92815 (png).
This example is a bit contrived, but you'll see the same effect for more subtle decorations as well (e.g. box-shadow, ...).
I wanted to measure visual information content of a page, and yes, PNG is maybe not the best to do that. JPEGs are smaller, but it introduces another problem of visible artifacts around text.
If anybody knows a better way to measure visual information content, please suggest.
19.5 / 10 = 1.95. (assuming the PNG is 10 MB for simplicity).
You could be fancy and use exponent.
But I doubt there's a good mechanical way to do this. Whether an image is bloat or valuable content requires sophisticated judgment and understanding of what the purpose of the page is.
I completely agree with that. Quick check is to replace all images on a page with placeholder images—if that doesn't reduce functionality of the page then maybe you don't need that images at all.
By the way, your calculator seems to include prefetched pages in the calculation. (link rel="prefetch".) Not sure if that's deliberate or not.
"Ugly" is subjective. Personally, I like that minimal information-rich style instead of the over-designed monstrosities I come across so often which are glittery and trendy on first glance, yet quite vapid in terms of content. They also tend to be annoyingly distracting to actually try reading, due to all the extra crap. The former feels like reading a book, the latter a tabloid.
* Tight line spacing
* Full window width lines
* Small fonts
* Sometimes, font choice
javascript:(function(){function d(a,b){a.setAttribute("data-css-storage",b)}function e(a){var b=a.getAttribute("data-css-storage");a.removeAttribute("data-css-storage");return b}var c=[];(function(){var a=document.body,b=a.hasAttribute("data-css-disabled");b?a.removeAttribute("data-css-disabled"):a.setAttribute("data-css-disabled","");return b})()?(c=document.querySelectorAll("[data-css-storage]"),[].slice.call(c).forEach(function(a){"STYLE"===a.tagName?a.innerHTML=e(a):"LINK"===a.tagName?a.disabled=!1:a.style.cssText=e(a)})):(c=document.querySelectorAll("[style], link, style"),[].slice.call(c).forEach(function(a){"STYLE"===a.tagName?(d(a,a.innerHTML),a.innerHTML=""):"LINK"===a.tagName?(d(a,""),a.disabled=!0):(d(a,a.style.cssText),a.style.cssText="")}))})();
I would not say that it is easy to pick one particular side. It is true however that web feels too bloated. It is funny how simple static page with everything embedded can be faster than whatever fancy web framework. Look how quick St4k [1] is.
Computing on server may be fast and energy efficient. It also hides complexity. But then we end up in proprietary walled garden. There must be some middle ground. I am hopping that Sandstorm project [2] will bring democratization of the server space.
Lately I think that our technology meets the ceiling. In the past we imagined that everyone would have their personal flying car or that we would have a space plane. Now we have subsonic jets and maybe electric self-driving cars behind the corner. We have a promise of reusable rockets with stages landing separately like some kind of elevator. Everything is smoke and mirrors. We will not have thin clients with low latency links to servers everywhere just like we will never have independent and fully distributed thick clients. We will fake it until we make it. There may be Netflix cache [3] near you to simulate that network is fast in both senses.
[3] https://openconnect.netflix.com/en/delivery-options/
[EDIT] I worded it poorly. St4k was not meant to be an example of fully static page, but rather general trend. Yes, St4k is SPA, but after one request you have whole application. Next requests bring content only.
I guess, may be your customer has the same problem.
This metric is interesting to me, but it's an esoteric thing compared to practical issues of how well a site achieves its goals. This metric reminds me of tongue and groove house design: It's wonderful, but only matters to artisans.
The real question is whether the metric motivates people to do the right thing. Is this something people should optimize for to the exclusion of other goals? Probably not. But bloat is a serious problem, and this metric just shines the light of recognition on that.
Page size: 10.4 kB and 6 requests
Image size: 59 kB
Web-BS: 0.176
So, in essence WebBS aims to measure rendered html without tags (like using the text() function of jQuery to get contents of a div tag). In that case, why no traversing the DOM, get clean text content, measure it (count bytes) and divide by request size. In this case, WebBS will always be below 1 and a value closer to 1 is better. Also, some punishment points should be considered for number of request (or maybe define another rate since that is not bloat per-se).
And please ignore the complaining bunch! Any metric can of course be misused (think unit test coverage, linting, soft coding, etc.) but writing software is craftsmanship. We're half-way to art. To even be able to measure is an achievement, and what gets measured gets better. Me and my senior colleagues immediately took it to heart and will use it as objectively as language shootout. Many thanks for planting an industry standard seed!
2.run a JS CPU profile.
3. :)
You seem to be banned, by the way. I had to vouch this comment, and your previous comment (https://news.ycombinator.com/item?id=1525566) is dead too. Since that was long before the new mod team, you may want to email hn@ycombinator.com to discuss the possibility of getting yourself unbanned.
Welcome back to HN.
> So does the original author of the comment see "[dead]"?
Nope.
> Does it happen automatically if the author is banned/shadow banned?
Yes, all submissions and comments from a banned account are automatically killed.
> Why/how are so many 'New' submissions 'DOA'?
There is a banlist for domains in addition to accounts. Any attempt to submit a link to a banned domain will be killed.
Interestingly, news.ycombinator.com is banned in order to prevent meta-submissions. If you're curious what someone sees when they submit a banned post, submit e.g. this comment.
> Is there anywhere that explains this so I never have to ask these questions - and others - again?
Nope. :) It's an evolutionary process that's been going on for 9.7 years. http://www.paulgraham.com/hackernews.html
There are at least four other ways that a comment can become dead: if it's a dupe (try submitting the same comment twice), if it's flagged by multiple users (around three or four, I think?), if a moderator manually kills a comment, or if someone is posting from Tor under a brand-new account.
In the case of a dupe or a flag, you'll see [dupe] [dead] or [flagged] [dead] respectively. That's how you can tell why a comment is dead: if it's just [dead], either a mod killed it, it was posted by a banned user, or was posted from a Tor user. If the user's name is green, it's probably a Tor user.
In this case, they were obviously banned because the comment was only 24 minutes old when I replied. Nowadays, when a moderator kills a comment manually, they will usually leave a reply stating the reason. Since there was no reply, I suspected the user was banned.
This brings us to one of HN's most interesting features: the vouching system. If you have a certain amount of karma, I think a few hundred points, then you can cause a comment to go from [dead] to alive. The reason this was implemented is because sometimes a banned user posts an informative or harmless comment. These comments would provide value to the community.
To vouch a dead comment, you must first be able to see dead comments. If you go into your profile, you'll find a setting called "showdead" which you can set to true. (By default, no one sees dead comments.) Then to vouch, click on a dead comment's timestamp. You'll be taken to a page with a "vouch" link.
I don't know how it is for other users, but for me, clicking on "vouch" always resurrects the dead comment. I.e. only my own vouch is necessary. I assume it's the same for other users.
This is a serious responsibility. The moment that people start vouching crap comments is the moment dang will have to rework the vouching system. HN brings a bit of joy to my life, so I like to go out of my way to vouch dead comments that are high quality, and then read through the user's previous comments to see whether they were banned and why. 95% of the time, I say nothing to them. Users were almost always banned with good reason. In the case where you spot someone who was banned for seemingly no reason, the user was almost always involved in abusing the site (voting with multiple accounts, etc).
This user happened to be the exception to that. They were banned 6.2 years ago with seemingly no reason. Perhaps they were involved in some sort of abuse against HN. Or perhaps they were posting from a shared IP address and happened to get be mis-identified. Either way, 6 years is certainly enough time for them to appeal their ban. Besides, I like the idea of someone coming back to the site and being welcomed.
The HN team is very responsive and quite reasonable, so usually if you send a sincere apology and promise to behave then you'll be given another chance.
It's been pretty fascinating to watch the moderation process evolve along with the community over the years.
Let's terminate this off-topic discussion here! :)
Now that's what I call Lurking ;)
Too bad there's no Stackoverflow-style badge for it.
News websites in particular are guilty of downloading Megabytes upon Megabytes of who knows what to display the five paragraphs of text and the image that I actually want to see.
They require endless scrolling, there are often pointless template images on them and the fonts are too big, and their maintainers often want you to try out or download something 'for free' - and three days later you find out it's not free at all and they want $5/mo.
Same experience when I was working for a news site. An increasing amount of users get to articles directly from e.G. facebook and close the site after reading.