davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="en">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>JavaScript Bloat in 2024 (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://tonsky.me/blog/js-bloat/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>JavaScript Bloat in 2024</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://tonsky.me/blog/js-bloat/" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-03-03
    </p>
  </nav>
  <hr>
  <p><em>Translations: <a href="https://habr.com/ru/companies/ruvds/articles/796595/" target="_blank">Russian</a></em></p>
<p>I was a bit out of touch with modern front-end development. I also remembered articles about web bloat, how the average web page size was approaching several megabytes!</p>
<p>So all this time I was living under impression that, for example, if the average web page size is 3 MB, then JavaScript bundle should be around 1 MB. Surely content should still take the majority, no?</p>
<p>Well, the only way to find out is to fuck around. Let’s do a reality check!</p>
<p>I’m writing this in 2024, so maybe do a sequel in a few years?</p>
<h1 id="method">Method</h1>
<ul>
  <li>Firefox on macOS (but should be the same in any browser)</li>
  <li>Not incognito (I want to see numbers <em>inside</em> the app, and there’s a better chance it will resemble actual everyday experience)</li>
  <li>All extensions disabled</li>
  <li>JavaScript only</li>
  <li>Uncompressed</li>
  <li>Service Workers enabled (again, more real-life)</li>
  <li>All caching disabled (cold load)</li>
</ul>
<p>Why only JavaScript? Content varies a lot from site to site (surely videos on YouTube are heavier than text messages on Slack), but JavaScript is a universal metric for “complexity of interactions”.</p>
<p>The main goal is to evaluate how much work the browser has to do to parse and execute code.</p>
<p>To set some baseline, let’s start with this blog:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/tonsky@2x.webp?t=1709315366">        </figure>
<p>The number here would be 0.004 MB. I also highlighted all the important bits you need to set if you decide to reproduce this at home.</p>
<h1 id="landings">Landings</h1>
<p>Okay, let’s start with something simple, like landing pages/non-interactive apps.</p>
<p>A normal slightly interactive page looks like this — Wikipedia, 0.2 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/wikipedia@2x.webp?t=1709315366">        </figure>
<p>Slightly bloated — like this — Linear, 3 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/linear@2x.webp?t=1709315366">        </figure>
<p>Remember: that’s without images, or videos, or even styles! Just JS code.</p>
<p>A bad landing page looks like this — Zoom, 6 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/zoom@2x.webp?t=1709315366">        </figure>
<p>or like Vercel, 6 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/vercel@2x.webp?t=1709315366">        </figure>
<p>Yes, this is just a landing page. No app, no functionality, no calls. 6 MB of JavaScript just for that.</p>
<p>You can do a lot worse, though — Gitlab, 13 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/gitlab@2x.webp?t=1709315366">        </figure>
<p>Still just the landing.</p>
<h1 id="mostly-static-websites">Mostly static websites</h1>
<p>Nothing simpler than showing a static wall of text. Medium needs 3 MB just to do that:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/medium@2x.webp?t=1709315366">        </figure>
<p>Substack needs 4 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/substack@2x.webp?t=1709315366">        </figure>
<p>Progress?</p>
<p>Quora, 4.5 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/quora@2x.webp?t=1709315366">        </figure>
<p>Pinterest, 10 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/pinterest@2x.webp?t=1709315366">        </figure>
<p>Patreon, 11 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/patreon@2x.webp?t=1709315366">        </figure>
<p>And all this could’ve been a static page...</p>
<h1 id="search">Search</h1>
<p>When your app’s interactivity is limited to mostly search. Type the query — show the list of results. How heavy is that?</p>
<p>StackOverflow, 3.5 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/stackoverflow@2x.webp?t=1709315366">        </figure>
<p>NPM, 4 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/npmjs@2x.webp?t=1709315366">        </figure>
<p>Airbnb, 7 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/airbnb@2x.webp?t=1709315366">        </figure>
<p>Booking.com, 12 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/booking@2x.webp?t=1709315366">        </figure>
<p>But Niki, booking is complicated! Look at all this UI! All these filters. All these popups about people near you stealing your vacation!</p>
<p>Okay, okay. Something simpler then. Google. How about Google? One text field, list of links. Right?</p>
<p>Well, it’ll cost you whooping 9 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/google@2x.webp?t=1709315366">        </figure>
<p>Just to show a list of links.</p>
<h1 id="simple-one-interaction-apps">Simple one-interaction apps</h1>
<p>Google Translate is just two text boxes. For that, you need 2.5 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/google_translate@2x.webp?t=1709315366">        </figure>
<p>ChatGPT is <em>one</em> text box. 7 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/openai@2x.webp?t=1709315366">        </figure>
<p>I mean, surely, ChatGPT is complex. But on the server, not in the browser!</p>
<h1 id="videos">Videos</h1>
<p>Loom — 7 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/loom@2x.webp?t=1709315366">        </figure>
<p>YouTube — 12 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/youtube@2x.webp?t=1709315366">        </figure>
<p>Compare it to people who really care about performance — Pornhub, 1.4 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/pornhub@2x.webp?t=1709315366">        </figure>
<h1 id="audio">Audio</h1>
<p>I guess audio just requires 12 MB no matter what:</p>
<p>SoundCloud:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/soundcloud@2x.webp?t=1709315366">        </figure>
<p>Spotify:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/spotify@2x.webp?t=1709315366">        </figure>
<h1 id="email">Email</h1>
<p>Okay, video and audio are probably heavy stuff (even though we are not measuring content, just JS, remember!). Let’s move to simpler office tasks.</p>
<p>Google Mail is just (just!) 20 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/gmail@2x.webp?t=1709315366">        </figure>
<p>It’s a freaking mailbox!!! How on earth is it almost as big as Figma, who ships entire custom C++/OpenGL rendering for their app?</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/figma@2x.webp?t=1709315366">        </figure>
<p>And if you are thinking: mail is complicated, too. Lots of UI, lots of interactivity. Maybe 20 MB is okay?</p>
<p>No!</p>
<p>Just no. See, FastMail, same deal, but only 2 MB. 10× less!</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/fastmail@2x.webp?t=1709315366">        </figure>
<h1 id="productivity">Productivity</h1>
<p>Okay, maybe e-mail is too complicated? How about something even simpler? Like a TODO list?</p>
<p>Well, meet Todoist, 9 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/todoist@2x.webp?t=1709315366">        </figure>
<p>Showing you a list of files in folders requires 10 MB in Dropbox:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/dropbox@2x.webp?t=1709315366">        </figure>
<p>List of passwords? That’ll be 13 MB on 1Password:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/1password@2x.webp?t=1709315366">        </figure>
<p>Cards? Add 0.5 MB more, up to 13.5 MB. Trello:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/trello@2x.webp?t=1709315366">        </figure>
<p>Okay, maybe TODO lists are too complex, too? How about chatting?</p>
<p>Well, Discord needs 21 MB to do that:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/discord@2x.webp?t=1709315366">        </figure>
<h1 id="document-editing">Document editing</h1>
<p>Okay, document editing is hard, right? You have to implement cursor movement, synchronization, etc.</p>
<p>Google Docs, 13.5 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/google_docs@2x.webp?t=1709315366">        </figure>
<p>Something simpler? Notion, 16 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/notion@2x.webp?t=1709315366">        </figure>
<h1 id="social-networks">Social Networks</h1>
<p>The typical size of code that social networks need for like buttons to go brrr is 12 MB.</p>
<p>Twitter, 11 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/twitter@2x.webp?t=1709315366">        </figure>
<p>Facebook, 12 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/facebook@2x.webp?t=1709315366">        </figure>
<p>TikTok, 12.5 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/tiktok@2x.webp?t=1709315366">        </figure>
<p>Instagram is somehow bigger than Facebook, despite having like 10× less functions. 16 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/instagram@2x.webp?t=1709315366">        </figure>
<p>LinkedIn. Is it a blog? A platform? It has search, it has messaging, it has social functions. Anyways, that’ll be 31 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/linkedin@2x.webp?t=1709315366">        </figure>
<p>By the way, I'd like to add you to my professional network on LinkedIn.</p>
<h1 id="elephants--its-own-category">Elephants — its own category</h1>
<p>Sometimes websites are so stupidly, absurdly large that they deserve their own category.</p>
<p>Here, Jira, a task management software. Almost 50 MB!</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/jira@2x.webp?t=1709315366">        </figure>
<p>Do they ship the entire Electron compiled WASM or what?</p>
<p>But that’s not the limit! Slack adds 5 more MB, up to 55 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/slack@2x.webp?t=1709315366">        </figure>
<p>Yes, it’s a chat. You know, list of users, messages, reactions. Stuff we did on raw HTML, even before JS was invented?</p>
<p>That’s 55 MB in today’s world. It’s almost like they are trying to see how much more bullshit can they put in a browser before it breaks.</p>
<p>Finally, this blew my mind. Somehow <a href="https://react.dev/blog/2023/03/16/introducing-react-dev" target="_blank">react.dev</a> starts with a modest 2 MB but as you scroll back and forth, it grows indefinitely. Just for fun, I got it to 100 MB (of JavaScript!), but you can go as far as you like:</p>
<figure>
  <video autoplay="" muted="" loop="" preload="auto" playsinline="" controls="">
    <source src="https://tonsky.me/blog/js-bloat/react@2x.mp4?t=1708621056" type="video/mp4">
  </source></video>
</figure>
<p>What is going on there? Even if it unloads and downloads parts of that blog post, how is it growing so quickly? The text itself is probably only 50 KB (0.05 MB).</p>
<p>UPD: It has been brought to my attention that this behavior is not, in fact, representative of normal user experience. Normally embedded code editors will be cached after first load and subsequent loads will be served from disk cache. So as you scroll, you will see no network traffic, but these 100 MB of JS will still be parsed, evaluated and initialized over and over as you scroll.</p>
<h1 id="how-fast-are-we-degrading">How fast are we degrading?</h1>
<p>Look how cute! In 2015 average web page size was approaching shareware version of Doom 1 (2.5 MB):</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/bloat_2015@2x.webp?t=1709315366"><figcaption><a href="https://twitter.com/xbs/status/626781529054834688" target="_blank">Source</a></figcaption>        </figure>
<p>Well, in 2024, Slack pulls up 55 MB, the size of the original Quake 1 with all the resources. But now it’s just in JavaScript alone.</p>
<p>For a chat app!</p>
<h1 id="how-big-is-10-mb-anyway">How big is 10 MB anyway?</h1>
<p>To be honest, after typing all these numbers, 10 MB doesn’t even feel that big or special. Seems like shipping 10 MB of <em>code</em> is normal now.</p>
<p>If we assume that the average code line is about 65 characters, that would mean we are shipping ~150,000 lines of code. With every website! Sometimes just to show static content!</p>
<p>And that code is minified already. So it’s more like 300K+ LoC just for one website.</p>
<p>But are modern websites really <em>that</em> complex? The poster child of SPAs, Google Maps, is quite modest by modern standards — is <em>still</em> just 4.5 MB:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/google_maps@2x.webp?t=1709315366">        </figure>
<p>Somebody at Google is seriously falling behind. Written with modern front-end technologies, it should be at least 20 MB.</p>
<p>And if you, like me, thought that “Figma is a really complex front-end app, so it must have a huge javascript download size”, well, that’s correct, but then Gmail is about as complex as Figma, LinkedIn is 1.5× more complex and Slack is 2.5× more ¯\_(ツ)_/¯</p>
<h1 id="conclusion">Conclusion</h1>
<p>It’s not just about download sizes. I welcome high-speed internet as much as the next guy. But code — JavaScript — is something that your browser has to parse, keep in memory, execute. It’s not free. And these people talk about performance and battery life...</p>
<p>Call me old-fashioned, but I firmly believe content should outweigh code size. If you are writing a blog post for 10K characters, you don’t need 1000× more JavaScript to render it.</p>
<p>This site is doing it right:</p>
<figure>
<img src="https://tonsky.me/blog/js-bloat/jquery@2x.webp?t=1709315366">        </figure>
<p>That’s 0.1 MB. And that’s enough!</p>
<p>And yet, on the same internet, in the same timeline, Gitlab needs 13 MB of code, 500K+ LoC of JS, just to display a static landing page.</p>
<p>Fuck me.</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>