
Web Bloat Score Calculator - zdw
http://www.webbloatscore.com
======
lazyjones
I found an interesting case where WebBS does not seem to reflect my
understanding of "bloat". A very long page with

Page size: 3,672 kB and 219 requests

Image size: 11,390 kB
([http://www.webbloatscore.com/Screenshots/58b58030-6807-4638-...](http://www.webbloatscore.com/Screenshots/58b58030-6807-4638-b8f2-c6a7fba5eac9.png))

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.

~~~
ZeljkoS
Hi, author here.

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.

~~~
idlewords
I don't have a suggestion, but I wanted to congratulate you on a wonderful
idea, really nicely executed.

~~~
ZeljkoS
Thanks Maciej, your obesity article was a one of the sources of inspiration :)

------
userbinator
_Look at the homepages of Tim Berners-Lee, Bjarne Stroustrup, and Donald
Knuth. All three together have 235 kB, less than one Google SERP. Images are
optimized, most of the content is above the fold, and their pages were
"responsive" two decades before responsive design became a thing. But they are
all ugly._

"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.

~~~
rimantas
1/3 of KB of CSS can convert any of them from ugly into really nice.

~~~
ab36x90128
How? They aren't ugly in the first place. In fact they're eminently readable
and navigable.

~~~
vcarl
My biggest complaint on most of those sorts of sites are:

    
    
        * Tight line spacing
        * Full window width lines
        * Small fonts
        * Sometimes, font choice
    

When I'm reading something lengthy on a site like those named, I'll usually
set a max-width on the body, give it auto margins, and play with line-height,
font-size, and usually set it to Arial. Takes me 30 seconds on pages that
aren't terrible and makes it much easier to read.

~~~
vram22
How? By changing those things in the browser's console, or some other way? And
if in console, do you have to do it each time, or can you save it somehow?

~~~
Nadya
You can use a Bookmarklet to inject/change styles. I have one that toggles CSS
on/off:

    
    
        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 also use Stylish and Greasemonkey to style and script any sites I visit
frequently to match my personal tastes and add missing functionality or
helpful features.

------
hawski
I find "The long tale of two tribes" at the bottom of the page far more
interesting than the score calculator itself. We should discuss this and not
nitpick on WebBS gaming. It would be better for discussion to have article at
the beginning of the page and later on introduce the score calculator.

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.

[1] [http://danlec.com/st4k#](http://danlec.com/st4k#)

[2] [https://sandstorm.io/](https://sandstorm.io/)

[3] [https://openconnect.netflix.com/en/delivery-
options/](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.

~~~
userbinator
st4k is very much not a "simple static page"; it's a tiny SPA which requires
JS.

~~~
majewsky
What's on it? It doesn't render for me with NoScript enabled. :)

~~~
hawski
It's Stackoverflow in 4kB. Here is the explanation:
[http://danlec.com/blog/stackoverflow-
in-4096-bytes](http://danlec.com/blog/stackoverflow-in-4096-bytes)

------
belvoran
Quite funny. My blog page (with text only) has score 4.06. Converting it to
image is stupid. Btw. I've been working with a Korean company on a couple of
Korean websites. What they provided was ONLY IMAGES. All the texts were
images, new content was in images, all the changes were just image changes. It
was a nightmare.

~~~
dasboth
A lot of Japanese websites are the same. All the navigation buttons are images
for example, I found that quite a bad experience over slow wifi!

------
benkaiser
Calling the metric "WebBS" was fantastic, it had me continually reading it as
"Web Bulls!@#"

~~~
michalstanko
I would be surprised if it wasn't author's exact intent.

------
unoti
This is like a poster child for a bad metric. It's bad because it's possible
for a team to do a good job and have the metric look bad, it's possible for a
team to do a bad job And have the metric look good. Are we sure that this
metric is measuring something that we care about?

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.

~~~
titzer
To some extent this is true of many metrics.

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.

------
JoshTriplett
While the phrasing seems problematic, as HTML has value even if larger than
the equivalent image (selectable text, clickable links, interactive elements,
etc), the metric seems vaguely reasonable. In particular, if you compare to
the _compressed_ screenshot size, then you've incorporated a very simplistic
complexity metric beyond just the dimensions of the page.

------
j4_james
Minor bug report: I was testing a page that was using SVG Stacks[1], where
multiple icons are encapsulated in a single SVG image and the individual icons
are referenced via fragment identifiers. This caused the WebBS calculator to
count the SVG image multiple times (once for each fragment reference),
resulting in a score that was significantly worse than it should have been.

[1] [http://simurai.com/blog/2012/04/02/svg-
stacks](http://simurai.com/blog/2012/04/02/svg-stacks)

------
Etheryte
It makes me glad to see that HN scores well, as presumed:

Page size: 10.4 kB and 6 requests

Image size: 59 kB

Web-BS: 0.176

------
bikamonki
Seems WebBS is not accurate to measure information density of: pages with lots
of images, video streaming and text rendered as images. It seems it aims to
measure bloat for information delivered as text (layout, colors, etc also
convey information but for simplicity let's avoid trying to measure them).

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).

------
Raed667
Why don't you cache the results for your proposed websites (or at least just
your own's ? )

~~~
tinodotim
+1, that should take quite some load off. Some kind of retest link would be
helpful though, to clear the cache and test a page again.

------
highfestiva
A job well done, congratulations! The idea is fantastic and your
implementation, including the choice of non-lossy reference image, has a sound
design. The purpose and intent is obvious.

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!

------
oxguy3
Tried to run it on boston.com, and I got a "Calculator stopped measuring after
~20 sec timeout." error. When the bloat tool can't even fully measure your
bloat, you might have a problem.

------
pvdebbe
While the implementation is not optimal (favors photograph content as PNG is
not going to win JPEG here; overall favors pages of few colors) the idea is
actually quite decent.

------
Aoyagi
I'd very much prefer script bloat calculator.

~~~
oolongCat
1.Open dev tools

2.run a JS CPU profile.

3\. :)

------
vbernat
The score is a bit flawed as it assumes pertinent information can only be
contained in text, not in images.

------
JohnStrange
Is there a site or software that allows you to really convert your site to an
image map?

------
revital9
They can't process requests now. Hug of death already?

~~~
sillysaurus3
Whoa. Your last comment before this one was 6.2 years ago.

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](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.

~~~
dasil003
Unbanned already as far as I can tell.

~~~
sillysaurus3
The comment I replied to was marked [dead], which usually indicates a ban.
It's alive now since I vouched it. Is there another way to know?

~~~
oneeyedpigeon
Despite having used HN for several years now, I've never really understood
[dead] etc. The FAQ says it's anything that has been flagged as such by mods
or the software itself. So does the original author of the comment see
"[dead]"? Does it happen automatically if the author is banned/shadow banned?
Why/how are so many 'New' submissions 'DOA'? Is there anywhere that explains
this so I never have to ask these questions - and others - again?

~~~
labster
The first HN moderation rule is "don't talk about HN moderation rules". The
goal is maturity through obscurity.

~~~
jayjay71
How does a lack of transparency help?

------
trymas
google cache:
[http://webcache.googleusercontent.com/search?q=cache:VB9qf1V...](http://webcache.googleusercontent.com/search?q=cache:VB9qf1VIk-
EJ:www.webbloatscore.com/+&cd=1&hl=en&ct=clnk&gl=us)

------
siddharthdeswal
Timeout when checking vwo.com

------
ryanbertrand
Not loading at all.

------
ralish
It's certainly a lean web site. Or rather, the 503 is lean.

------
calineczka
It would kind-of-make sense but only for static pages. Pages are now an
interactive applications so comparing them to size of visual representation of
their initial state is not a best metric.

~~~
adrianN
Almost all pages I regularly visit are not interactive applications. HN is one
of the most interactive sites.

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.

