Giter Club home page Giter Club logo

your-web-app-is-bloated's Introduction

your web app is boated

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

twitter 25.09
tweetdeck 40.38
github 7.41
google 11.30
google results 14.77
duckduckgo 5.63
duckduckgo results 4.81
reddit 43.77
wikipedia 1.73
wikipedia page 5.93
youtube 30.00
youtube video 59.04
google-maps 65.61
openstreetmap (on new york, transportation layer) 6.72
stackoverflow 2.55
facebook 23.49
facebook newsfeed 56.12
images.google (result) 26.41
duckduckgo images (result) 7.31
pinterest 26.80
gmail (vintage) 0.81
gmail (standard) 158
google inbox 215 (!!!)
google docs 24.7
google docs (document) 46.57
google sheets (spreadsheet) 96.98
hackmd (document) 44.9
sandstorm (spreadsheet) 27.63
toggle 49.77
nytimes 56.08
the guardian 7.36
the onion 38.30
open collective 31.22
medium 18.53
medium (article) 17.99
soundcloud 22
soundcloud (track open) 45.80
bandcamp 14.86
bandcamp (album page) 8.76
slack 76.53
rocketchat 32.12
riot 55.31
talky 9.40
google hangouts 10.76
jitsi 40.21
meatspace chat 4.48

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.

twitter - 25.09

loaded twitter homepage and didn't scroll or touch anything

memory-snapshot

tweetdeck - 40.38

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

memory-snapshot

github - 7.41

github homepage (my news feed)

memory-snapshot

google - 11.30

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

memory-snapshot

google results - 14.77

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

memory-snapshot

duckduckgo - 5.63

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

memory-snapshot

reddit - 43.77

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

memory-snapshot

wikipedia - 1.73

memory-snapshot

wikipedia (article) - 5.93

static page with some images

memory-snapshot

youtube - 30.00

pretty light weight considering it's youtube

memory-snapshot

youtube (video) - 59.04

I think if you need more memory than this and don't play videos there is something wrong.

memory-snapshot

google-maps - 65.61

I've noticed google-maps being quite heavy, and it's more than a video. but should it be?

memory-snapshot

openstreetmap - 6.72

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

on new york, with transportation layer enabled

memory-snapshot

stackoverflow - 2.55

static site

memory-snapshot

facebook - 23.49

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

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

memory-snapshot

google images (result) - 26.41

fairly efficient, compared to reddit, youtube etc

memory-snapshot

duckduckgo images (result) - 7.31

1/3 the memory google images uses

memory-snapshot

pinterest - 26.80

about the same as google images

memory-snapshot

gmail (basic) - 0.81

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 (standard) - 158

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 (!!!)

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

memory-snapshot

google docs - 24.7

memory-snapshot

google docs (document) - 46.57

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

memory-snapshot

google sheets (spreadsheet) - 96.98

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

about the same as a google doc

memory-snapshot

sandstorm (spreadsheet) - 27.63

almost 1/4 that of google spreadsheets.

memory-snapshot

toggl - 49.77

time tracking software, quite bloated.

memory-snapshot

nytimes - 56.08

very bloated.

memory-snapshot

the guardian - 7.36

pretty good.

memory-snapshot

the onion - 38.30

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

memory-snapshot

open collective - 31.22

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

memory-snapshot

medium - 18.53

could be better, but not as bad as others.

memory-snapshot

medium (article) - 17.99

memory-snapshot

soundcloud - 22

better than youtube

memory-snapshot

soundcloud (track open) - 45.80

better than youtube

memory-snapshot

bandcamp - 14.86

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

memory-snapshot

bandcamp (album page) - 8.76

pretty tight!

memory-snapshot

slack - 76.53

bloated! largely javascript.

memory-snapshot

rocketchat - 32.12

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

memory-snapshot

riot - 55.31

more js objects than slack, but less javascript.

memory-snapshot

talky - 9.40

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

memory-snapshot

google hangouts - 10.76

on a call by my self. also surprisingly unbloated!

memory-snapshot

jitsi - 40.21

4x google hangouts.

memory-snapshot

meatspace chat - 4.48

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

memory-snapshot

conclusions

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.

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

your-web-app-is-bloated's People

Contributors

dominictarr avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.