measuring memory usage of popular webapps
Switch branches/tags
Nothing to show
Clone or download
Latest commit 941490f Sep 16, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images add patchfoo Sep 15, 2018
README.md add patchfoo Sep 15, 2018

README.md

your web app is bloated

Using firefox's memory snapshot tool, I measured the heap usage of a variety of web apps. Here is how everything did.

App Memory (MiB = 10242 B)
google inbox 215 (!!!)
gmail (standard) 158
google sheets (spreadsheet) 96.98
slack 76.53
google-maps 65.61
patchbay (patchlite) 59.93
youtube video 59.04
nytimes 56.08
facebook messenger 57.78
facebook newsfeed 56.12
riot 55.31
toggle 49.77
google docs (document) 46.57
soundcloud (track open) 45.80
hackmd (document) 44.9
reddit 43.77
airbnb 40.8
jitsi 40.21
tweetdeck 40.38
the onion 38.30
rocketchat 32.12
open collective 31.22
vimeo (video) 31.15
youtube 30.00
sandstorm (spreadsheet) 27.63
pinterest 26.80
images.google (result) 26.41
twitter 25.09
google docs 24.7
facebook 23.49
soundcloud 22
spotify 19.64
medium 18.53
medium (article) 17.99
bandcamp 14.86
google results 14.77
patchless 12.43
google-maps-mobile 12.06
google 11.30
google hangouts 10.76
talky 9.40
bandcamp (album page) 8.76
dat-shopping-list 8.28
gmail-mobile 7.93
the guardian 7.36
duckduckgo images (result) 7.31
github 7.41
openstreetmap (on new york, transportation layer) 6.72
wikipedia page 5.93
duckduckgo 5.63
meatspace chat 4.48
duckduckgo results 4.81
stackoverflow 2.55
wikipedia 1.73
gmail (vintage) 0.81
patchfoo 0.7

Table of Contents

Method

I opened each site in firefox, and used the memory shapshot tool. I screen shotted the output using scrot. I was running ublock, and that probably made some sites smaller.

Work

github - 7.41 MB

^top

github homepage (my news feed)

memory-snapshot

google - 11.30 MB

^top

empty google page. A surprising amount of memory used since it shows nothing but a single field.

memory-snapshot

google results - 14.77 MB

^top

prehaps still a lot of memory considering very little images or real time interactions here.

memory-snapshot

duckduckgo - 5.63 MB

^top

much less memory than google! I guess it's the tracking features in google that uses the extra memory!

memory-snapshot

duckduckgo results - 4.81 MB

^top

memory-snapshot

google images (result) - 26.41 MB

^top

fairly efficient, compared to reddit, youtube etc

memory-snapshot

duckduckgo images (result) - 7.31 MB

^top

1/3 the memory google images uses

memory-snapshot

wikipedia - 1.73 MB

^top

memory-snapshot

wikipedia (article) - 5.93 MB

^top

static page with some images

memory-snapshot

stackoverflow - 2.55 MB

^top

static site

memory-snapshot

google docs - 24.7 MB

^top

memory-snapshot

google docs (document) - 46.57 MB

^top

this seems like more than should be necessary. mainly js objects.

memory-snapshot

google sheets (spreadsheet) - 96.98 MB

^top

a lot of memory, especially considering spreadsheets were the killer app back in the apple 2 days, where lots of people brought computers for the first time to run visicalc on 64k of memory?

memory-snapshot

hackmd (document) - 44.9 MB

^top

about the same as a google doc

memory-snapshot

sandstorm (spreadsheet) - 27.63 MB

^top

almost 1/4 that of google spreadsheets.

memory-snapshot

toggl - 49.77 MB

^top

time tracking software, quite bloated.

memory-snapshot


Social / Comms

twitter - 25.09 MB

^top

loaded twitter homepage and didn't scroll or touch anything

memory-snapshot

tweetdeck - 40.38 MB

^top

twitter power user interface, with mentions and messages, one user's feed, and a search feed added.

memory-snapshot

twitter (mobile) - 30.84

^top

not better than regular web twitter

memory-snapshot

reddit - 43.77 MB

^top

the reddit homepage has an infinite scroller, usually means lots of javascript and js objects.

memory-snapshot

facebook - 23.49 MB

^top

just the login page! already a lot of javascript has been loaded. The most bloated landing page, twice as much as google, 10x wikipedia.

memory-snapshot

facebook newsfeed - 56.12 MB

^top

a lot of objects are in memory, presumably this is from using react.

memory-snapshot

facebook messenger - 57.78 MB

^top

same memory use as fb news feed. react, of course.

memory-snapshot

gmail (basic) - 0.81 MB

^top

nearly nothing! I use this daily. Really, it's an amazing level of functionality and user-friendlyness, packed into a very simple interface. Also, because it doesn't have any kind of dynamic updates, it's less distracting than the other email interfaces. You have to intentionally check for emails, there is no notifications or changing favicons. so ugly it's beautiful.

memory-snapshot

gmail (mobile) - 7.93 MB

^top

Google's mobile apps are respectable. again, pretending to be a nexus 5.

memory-snapshot

gmail (standard) - 158 MB

^top

amazingly bloated. mostly massive amounts of javascript (it has a progress bar that shows at startup) but just the JS objects are 37 mb.

memory-snapshot

google inbox - 215 MB (!!!)

^top

makes standard gmail look tame. did they take gmail standard and just add more stuff?

memory-snapshot

slack - 76.53 MB

^top

bloated! largely javascript.

memory-snapshot

rocketchat - 32.12 MB

^top

does the same thing as slack, but with less javascript. rocketchat is mostly js objects, but still less than slack.

memory-snapshot

riot - 55.31 MB

^top

more js objects than slack, but less javascript.

memory-snapshot

meatspace chat - 4.48 MB

^top

as tight as a static site, but does crazy javascript stuff!

memory-snapshot


video

youtube (mobile) - 5.49 MB

^top

just the landing page. acceptable.

memory-snapshot

youtube (mobile, playing video) - 15.94 MB

^top

memory-snapshot

youtube - 30.00 MB

^top

pretty light weight considering it's youtube

memory-snapshot

youtube (video) - 59.04 MB

^top

At first I thought this was reasonable (since you are playing video) but then I discovered that actually you can play video with a lot less!

memory-snapshot

vimeo (video) - 31.15

^top

memory-snapshot

maps

google-maps - 65.61 MB

^top

Pretty heavy compared to the other options. I've been informed that this uses webgl, but the mobile version only uses tiles.

memory-snapshot

openstreetmap - 6.72 MB

^top

only 10% the memory of google maps and does essentially the same thing!

on new york, with transportation layer enabled

memory-snapshot

google-maps (mobile) - 12.06

^top

pretending to be a nexus 5. Much better! you can also force this version by adding ?force=pwa to google-maps url

memory-snapshot


news / content

nytimes - 56.08 MB

^top

very bloated.

memory-snapshot

the guardian - 7.36 MB

^top

pretty good.

memory-snapshot

the onion - 38.30 MB

^top

quite bloated, nearly as much as reddit, but is created entirely by their in-house writers.

memory-snapshot

medium - 18.53 MB

^top

could be better, but not as bad as others.

memory-snapshot

medium (article) - 17.99 MB

^top

memory-snapshot


music

soundcloud - 22 MB

^top

better than youtube

memory-snapshot

soundcloud (track open) - 45.80 MB

^top

better than youtube

memory-snapshot

bandcamp - 14.86 MB

^top

front page has listings, memory use similar to google search results. the best content site.

memory-snapshot

bandcamp (album page) - 8.76 MB

^top

pretty tight!

memory-snapshot

spotify

^top

Impressive!

memory-snapshot


video chat

talky - 9.40 MB

^top

started a call with no one else in it. pretty tight!

memory-snapshot

google hangouts - 10.76 MB

^top

on a call by my self. also surprisingly unbloated!

memory-snapshot

jitsi - 40.21 MB

^top

4x google hangouts.

memory-snapshot

other

pinterest - 26.80 MB

^top

about the same as google images

memory-snapshot

airbnb - 40.8 MB

^top

Searched for "san francisco". A lot of memory used to just display a list, especially considering there is no map displayed. Smells like react.

memory-snapshot

open collective - 31.22 MB

^top

react site, but it's not data that changes very often. pretty bloated.

memory-snapshot

--

p2p

patchless - 12.43 MB

^top

A social p2p client with heavy javascript, including infinite scrollers!

memory-snapshot

dat-shopping-list - 8.28 MB

^top

simple shopping list app on dat

memory-snapshot

patchbay (patchlite) - 59.93

^top

slightly old version of patchbay because it could be bundled and run inside firefox.

memory-snapshot

patchfoo - 0.7 MB

^top

A pure html social p2p client; form-based with no javascript

memory-snapshot

conclusions

^top

I started exploring this because I was trying to figure out how to optimize my own apps. Memory use isn't the most important thing, but it is an easy to measure proxy. If you have less memory usage, you probably have a simpler app, which is probably more performant. Less memory also means lees garbage collection activity.

google's apps are particularly interesting because they provide both the worst offenders (gmail, inbox, docs), but their mobile apps are really solid!

Recently, web development style has moved towards a fully dynamic front end that generates everything in javascript. If a app really is highly dynamic, I guess that is somewhat excusable, (such as facebook or slack) but I on a site that could be static it obviously uses a lot more.

I think this just shows there is considerable room for improvement in terms of application efficiency.