5 ms·

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

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-b8f2-c6a7fba5eac9.png 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.

svens_ 10y ago
I was finally able to try it out and this is exactly my observation too. 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-b8ec-c2912dbfc589.png http://www.webbloatscore.com/Screenshots/aeea9b6a-4852-4b01-... They screenshot the whole page.
- lazyjones 10y ago
  > just display some large JPEG images in full size and the score will approach 1. 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.
IsmaOlvey 10y ago
More generally, visual simplicity will be penalized. As an example, http://jsbin.com/milelocito http://jsbin.com/milelocito gets a score of 0.011, and http://jsbin.com/fejevatihi http://jsbin.com/fejevatihi a score of 0.035. 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, ...).
ZeljkoS 10y ago
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 10y ago
  I don't have a suggestion, but I wanted to congratulate you on a wonderful idea, really nicely executed.
  - ZeljkoS 10y ago
    Thanks Maciej, your obesity article was a one of the sources of inspiration :)
- hyperpape 10y ago
  I don't have a worked out idea, but maybe if a site has more than a certain amount of images, start to multiply their contribution to the size of the page? So if you double the image content, then a page that literally takes 10 MB to load, of which 9.5 MB are images has the calculation: 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.
  - ZeljkoS 10y ago
    > 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.
- michaelmior 10y ago
  Why are visible artifacts around text a problem? The screenshots are just being used to calculate the metric. Is it really important what they look like?

svens_ 10y ago

I was finally able to try it out and this is exactly my observation too. 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-b8ec-c2912dbfc589.png http://www.webbloatscore.com/Screenshots/aeea9b6a-4852-4b01-... They screenshot the whole page.

lazyjones 10y ago
> just display some large JPEG images in full size and the score will approach 1. 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.

IsmaOlvey 10y ago

More generally, visual simplicity will be penalized. As an example, http://jsbin.com/milelocito http://jsbin.com/milelocito gets a score of 0.011, and http://jsbin.com/fejevatihi http://jsbin.com/fejevatihi a score of 0.035. 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, ...).

ZeljkoS 10y ago

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 10y ago
I don't have a suggestion, but I wanted to congratulate you on a wonderful idea, really nicely executed.
- ZeljkoS 10y ago
  Thanks Maciej, your obesity article was a one of the sources of inspiration :)
hyperpape 10y ago
I don't have a worked out idea, but maybe if a site has more than a certain amount of images, start to multiply their contribution to the size of the page? So if you double the image content, then a page that literally takes 10 MB to load, of which 9.5 MB are images has the calculation: 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.
- ZeljkoS 10y ago
  > 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.
michaelmior 10y ago
Why are visible artifacts around text a problem? The screenshots are just being used to calculate the metric. Is it really important what they look like?