Pembengkakan ukuran JavaScript pada 2024

Masalah ukuran JavaScript

• Saya agak kurang mengikuti perkembangan frontend modern, dan ingat pernah membaca artikel tentang ukuran web yang membengkak hingga beberapa megabita per halaman.
• Saya mendapat kesan bahwa jika ukuran rata-rata halaman web adalah 3MB, maka bundle JavaScript kira-kira sekitar 1MB.
• Untuk memeriksa seberapa besar sebenarnya, saya melakukan eksperimen.

Metode

• Menggunakan Firefox di macOS (kemungkinan akan sama di browser lain)
• Mode biasa, bukan mode penyamaran (karena saya ingin melihat angka di dalam aplikasi, dan merasa ini lebih mendekati pengalaman nyata)
• Semua ekstensi dinonaktifkan
• Hanya mengukur JavaScript
• Dalam keadaan tidak dikompresi
• Service worker diaktifkan (agar situasinya lebih realistis)
• Semua cache dinonaktifkan (memuat dari awal)

Halaman landing

• Contoh halaman umum dengan sedikit interaksi: Wikipedia, 0.2MB
• Contoh halaman yang agak membengkak: Linear, 3MB
• Contoh halaman landing yang buruk: Zoom, 6MB; Vercel, 6MB; Gitlab, 13MB

Situs web yang sebagian besar statis

• Sulit dibuat lebih sederhana daripada sekadar menampilkan dinding teks statis.
• Medium tetap membutuhkan 3MB hanya untuk itu.
• Substack membutuhkan 4MB, Quora 4.5MB, Pinterest 10MB, dan Patreon 11MB.

Pencarian

• Interaksi utama aplikasi terbatas pada pencarian.
• StackOverflow membutuhkan 3.5MB, NPM 4MB, Airbnb 7MB, dan Booking.com 12MB.
• Google membutuhkan 9MB hanya untuk menampilkan satu kolom teks sederhana dan daftar tautan.

Aplikasi dengan satu interaksi utama

• Google Translate membutuhkan 2.5MB untuk dua kotak teks.
• ChatGPT membutuhkan 7MB untuk satu kotak teks.

Video

• Loom membutuhkan 7MB, YouTube 12MB.
• Pornhub, sebagai situs yang peduli pada performa, hanya membutuhkan 1.4MB.

Audio

• SoundCloud dan Spotify sama-sama membutuhkan 12MB.

Email

• Google Mail membutuhkan 20MB.
• FastMail menawarkan fungsi yang sama, tetapi hanya membutuhkan 2MB.

Produktivitas

• Todoist membutuhkan 9MB, Dropbox 10MB, 1Password 13MB, dan Trello 13.5MB.
• Discord membutuhkan 21MB hanya untuk chat.

Pengeditan dokumen

• Google Docs membutuhkan 13.5MB, Notion 16MB.

Jejaring sosial

• Twitter membutuhkan 11MB, Facebook 12MB, TikTok 12.5MB, Instagram 16MB, dan LinkedIn 31MB.

Kategori raksasa

• Jira membutuhkan hampir 50MB, Slack 55MB.
• react.dev mulai dari 2MB pada awalnya, tetapi bisa terus membesar tanpa batas saat digulir.

Apakah makin memburuk dengan cepat?

• Pada 2015, ukuran rata-rata halaman web sudah mendekati versi shareware Doom 1 (2.5MB).
• Pada 2024, Slack mencapai 55MB, yang untuk JavaScript saja setara dengan ukuran Quake 1 asli.

Seberapa besar 10MB itu?

• Sekarang 10MB tidak lagi terasa terlalu besar atau istimewa.
• Dengan asumsi rata-rata 65 karakter per baris, kita mengirimkan sekitar 150.000 baris kode untuk setiap situs web.
• Google Maps adalah 4.5MB, yang relatif sederhana menurut standar modern.

Kesimpulan

• Bukan hanya ukuran unduhan yang menjadi masalah.
• JavaScript harus diparse oleh browser, disimpan di memori, dan dijalankan.
• Saya percaya konten seharusnya lebih besar daripada ukuran kodenya.
• Gitlab membutuhkan 13MB kode, lebih dari 500 ribu LoC JavaScript, hanya untuk menampilkan halaman landing statis.

Pendapat GN⁺:

1. Ini adalah diagnosis yang realistis tentang keadaan pengembangan web saat ini, dan membantu memahami dampak ukuran JavaScript situs web terhadap pengalaman pengguna dan performa.
2. Ini mengingatkan developer frontend akan pentingnya optimasi, serta menekankan agar tidak menggunakan sumber daya melebihi yang diperlukan.
3. Ini menyajikan data menarik yang dapat mendorong diskusi di komunitas developer terkait performa situs web.

[GN⁺]

Opini Hacker News

• Situs web dewasa adalah contoh yang benar-benar memperhatikan performa; Pornhub hanya memuat 1,4MB data. Ini jauh lebih baik dibanding performa yang ditunjukkan beberapa raksasa teknologi. Pornhub hampir tidak pernah melakukan kesalahan pada UI/UX dasar maupun penyampaian konten.
• Saat menggunakan layanan roaming di daerah pedesaan Selandia Baru, pengalaman memakai web terasa sangat buruk. UX offline Spotify juga perlu ditingkatkan.
• Muncul pertanyaan mengapa kita melihat data yang tidak dikompresi. Aplikasi dinamis seperti Spotify dan Gmail masih bisa dimaklumi jika setelah halaman dimuat navigasinya cepat. Beberapa situs terlalu berfokus pada pemuatan awal hingga justru menurunkan pengalaman pengguna.
• Perangkat lunak mencerminkan organisasi yang membuatnya. Sebagian besar transfer data bukanlah JavaScript yang diperlukan agar halaman benar-benar berfungsi, melainkan skrip analitik dan pihak ketiga. Tim pemasaran tidak paham atau tidak peduli soal hal-hal ini.
• Analisis tentang ukuran file JavaScript pada aplikasi web belum ada. Misalnya, Google Translate bukan sekadar aplikasi interaktif sederhana dan memang memiliki banyak fitur, tetapi 2,5MB tetap berlebihan.
• Semua halaman di situs web Wordsandbuttons.online berukuran kurang dari 64KB meskipun memiliki animasi dan interaktivitas. Ini berkat kebijakan tanpa dependensi pihak ketiga.
• Perlu membahas bukan hanya penggunaan JavaScript yang berlebihan, tetapi juga jumlah skrip pelacakan.
• Ada perbandingan jumlah JavaScript yang dimuat oleh situs-situs populer. Misalnya, Pornhub memuat sekitar 10 kali lebih sedikit JavaScript daripada YouTube.
• Kondisi web saat ini sangat menyedihkan. Orang yang memakai koneksi internet cepat tidak menyadari betapa lambatnya web sekarang. Rasanya mustahil untuk tidak menggunakan pemblokir iklan/pelacak.
• Framework dan abstraksi yang rumit dibuat untuk mempermudah pemeliharaan, tetapi banyak pengembang bahkan tidak memahami dasar-dasar JavaScript. Mereka merekayasa aplikasi web secara berlebihan dan membuat terlalu banyak lapisan yang menyembunyikan bahasa aslinya. Dengan mempelajari JavaScript itu sendiri dan memakai JavaScript murni alih-alih framework, ukuran codebase JavaScript bisa dikurangi secara signifikan.