User:Brion VIBBER/Wikipedia data size test

Just for kicks, I cleared my cookies & caches and loaded up en:Frog fresh to see what the breakdown of network bandwidth would look like...

Totals
645,947 bytes of data content are transferred, not counting any HTTP headers:
 * 72.5% content images
 * 10% JavaScript code
 * 7.5% style sheets
 * 5.5% HTML web page <- the important stuff
 * 4.5% UI images

Connections must be made to three distinct hosts (en.wikipedia.org, meta.wikimedia.org, and upload.wikimedia.org).

This would take about 90 seconds to download on a 56kbit connection. It's easy to forget what low-bandwidth feels like for those of us with broadband, but people outside cities may not have good broadband, and mobile devices are often stuck on pretty slow networks too. Compare regular Wikipedia against our mobile gateway on your mobile phone sometime; even a fancy browser like the iPhone's will feel like molasses trying to load the full site, while loading things up lickety-split from the more minimal mobile gateway.

Fairly simple compression improvements could save 128kb of that:
 * 64k by gzipping JS and CSS files that are currently served uncompressed
 * another 64k through smarter compression of thumbnails (animated GIF optimization, use of JPEG for some PNG thumbs)

That would save approximately 18 seconds of download time for our hypothetical low-bandwidth user.

HTML

 * http://en.wikipedia.org/wiki/Frog
 * 35621 zipped

35,621 bytes of HTML

CSS

 * http://en.wikipedia.org/skins-1.5/common/shared.css?148
 * 4725 -> 1732 (2993)
 * http://en.wikipedia.org/skins-1.5/monobook/main.css?148
 * 27642 -> 7452 (20190)
 * http://en.wikipedia.org/skins-1.5/common/commonPrint.css?148
 * 5289 -> 1757 (3532)
 * http://en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&usemsgcache=yes&action=raw&ctype=text/css&smaxage=2678400
 * 7824 zipped
 * http://en.wikipedia.org/w/index.php?title=MediaWiki:Monobook.css&usemsgcache=yes&action=raw&ctype=text/css&smaxage=2678400
 * 2544 zipped
 * http://en.wikipedia.org/w/index.php?title=-&action=raw&gen=css&maxage=2678400
 * 144 zipped

48,168 bytes of CSS.

GZIP would save 26,715 bytes.

JS

 * http://en.wikipedia.org/skins-1.5/common/wikibits.js?148
 * 27235 -> 8967 (18268)
 * http://en.wikipedia.org/skins-1.5/common/ajax.js?148
 * 4555 -> 1833 (2722)
 * http://en.wikipedia.org/skins-1.5/common/mwsuggest.js?148
 * 22992 -> 7115 (15877)
 * http://en.wikipedia.org/w/index.php?title=-&action=raw&gen=js&useskin=monobook
 * 6631 zipped
 * http://meta.wikimedia.org/w/index.php?title=MediaWiki:Wikiminiatlas.js&action=raw&ctype=text/javascript&smaxage=21600&maxage=86400
 * 4861 zipped

66,274 bytes of JS.

GZIP would save 36,867 bytes.

Images

 * 175829 http://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Frog_spawn_time-lapse.gif/180px-Frog_spawn_time-lapse.gif
 * 56050 http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Rana_skeleton.png/180px-Rana_skeleton.png
 * 36801 http://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Fossilised_frog.jpg/180px-Fossilised_frog.jpg
 * 34320 http://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Caerulea3_crop.jpg/240px-Caerulea3_crop.jpg
 * 31607 http://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Dendrobates_pumilio.jpg/180px-Dendrobates_pumilio.jpg
 * 22665 http://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Haeckel_Batrachia.jpg/180px-Haeckel_Batrachia.jpg
 * 16462 http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png
 * 15817 http://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Frogspawn_closeup.jpg/180px-Frogspawn_closeup.jpg
 * 15538 http://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Frog_distribution.png/240px-Frog_distribution.png
 * 10601 http://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Green-leopard-frog-in-swamp.jpg/180px-Green-leopard-frog-in-swamp.jpg
 * 10513 http://upload.wikimedia.org/wikipedia/en/thumb/f/f9/L_tyleri.jpg/180px-L_tyleri.jpg
 * 10203 http://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Bufo_bufo_couple_during_migration%282005%29.jpg/190px-Bufo_bufo_couple_during_migration%282005%29.jpg
 * 9243 http://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Hip-pocket_Frog_-_Assa_darlingtoni.jpg/180px-Hip-pocket_Frog_-_Assa_darlingtoni.jpg
 * 7881 http://en.wikipedia.org/skins-1.5/monobook/headbg.jpg
 * 6335 http://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Bombina_bombina_1_%28Marek_Szczepanek%29_tight_crop.jpg/180px-Bombina_bombina_1_%28Marek_Szczepanek%29_tight_crop.jpg
 * 5502 http://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Bufo_periglenes1.jpg/180px-Bufo_periglenes1.jpg
 * 4881 http://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Wikibooks-logo-en.svg/50px-Wikibooks-logo-en.svg.png
 * 4493 http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Haswell%27s_Frog_-_Paracrinia_haswelli_tadpole.jpg/180px-Haswell%27s_Frog_-_Paracrinia_haswelli_tadpole.jpg
 * 4482 http://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Wikispecies-logo.svg/50px-Wikispecies-logo.svg.png
 * 3762 http://upload.wikimedia.org/wikipedia/en/thumb/9/9c/Frog1larcomuseum.jpg/180px-Frog1larcomuseum.jpg
 * 3545 http://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/White-Lipped-small.jpg/50px-White-Lipped-small.jpg
 * 2834 http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/50px-Commons-logo.svg.png
 * 1933 http://en.wikipedia.org/skins-1.5/common/images/poweredby_mediawiki_88x31.png
 * 923 http://en.wikipedia.org/skins-1.5/monobook/user.gif
 * 908 http://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Padlock-silver-medium.svg/20px-Padlock-silver-medium.svg.png
 * 890 http://en.wikipedia.org/images/wikimedia-button.png
 * 697 http://upload.wikimedia.org/wikipedia/en/6/60/LinkFA-star.png
 * 388 http://en.wikipedia.org/favicon.ico
 * 267 http://en.wikipedia.org/skins-1.5/common/images/magnify-clip.png
 * 195 http://upload.wikimedia.org/wikipedia/en/d/d4/Monobook-bullet-star.png
 * 165 http://en.wikipedia.org/skins-1.5/monobook/external.png
 * 104 http://upload.wikimedia.org/wikipedia/en/1/18/Monobook-bullet.png
 * 50 http://en.wikipedia.org/skins-1.5/monobook/bullet.gif

495,884 bytes of images, 28,959 bytes of which consist of global UI components (stylesheet icons, site logo).

Nearly half that total is made up of two inefficiently stored images: a poorly-optimized animated GIF, and a PNG of a scanned drawing.

The animated GIF can save about 20k with an upgraded ImageMagick, but is simply not a very efficient format. More could be saved by dropping information from the animation, so frames share more data.

The PNG is a grayscale scan of a textbook drawing, but is saved as an RGB PNG. Resaving as grayscale saves 4kb in the thumbnail; JPEG saves 44kb.

More efficient compresssion of top two images could save about 64kb.