2024'te JavaScript Şişkinliği

JavaScript'in boyut sorunu

• Modern frontend geliştirmeye çok hakim değildim ve web sayfası boyutlarının birkaç megabayta ulaştığını anlatan yazıları hatırlıyordum.
• Ortalama bir web sayfası 3MB ise JavaScript bundle'ının da kabaca 1MB civarında olacağı izlenimine sahiptim.
• Gerçekte ne kadar olduğunu görmek için bir deney yaptım.

Yöntem

• macOS üzerinde Firefox kullanıldı (muhtemelen diğer tarayıcılarda da aynıdır)
• Gizli mod değil, normal mod (uygulama içindeki sayıları görmek istedim ve bunun gerçek deneyime daha yakın olacağını düşündüm)
• Tüm eklentiler devre dışı
• Yalnızca JavaScript ölçüldü
• Sıkıştırılmamış durumda
• Service Worker açık (daha gerçekçi bir durum için)
• Tüm önbellekleme kapalı (baştan yükleme)

Açılış sayfaları

• Hafif etkileşim içeren tipik bir sayfa örneği: Wikipedia, 0.2MB
• Biraz şişmiş sayfa örneği: Linear, 3MB
• Kötü açılış sayfası örneği: Zoom, 6MB; Vercel, 6MB; Gitlab, 13MB

Çoğunlukla statik web siteleri

• Statik bir metin duvarı göstermekten daha basit olması zor.
• Medium bunun için bile 3MB gerektiriyor.
• Substack 4MB, Quora 4.5MB, Pinterest 10MB, Patreon ise 11MB gerektiriyor.

Arama

• Uygulamanın etkileşimi çoğunlukla aramayla sınırlı.
• StackOverflow 3.5MB, NPM 4MB, Airbnb 7MB, Booking.com 12MB gerektiriyor.
• Google, yalnızca basit bir metin kutusu ve bağlantı listesini göstermek için 9MB gerektiriyor.

Tek etkileşimli uygulamalar

• Google Translate, iki metin kutusu için 2.5MB gerektiriyor.
• ChatGPT, tek bir metin kutusu için 7MB gerektiriyor.

Video

• Loom 7MB, YouTube 12MB gerektiriyor.
• Performansa önem veren bir site olarak Pornhub yalnızca 1.4MB gerektiriyor.

Ses

• SoundCloud ve Spotify'nin ikisi de 12MB gerektiriyor.

E-posta

• Google Mail 20MB gerektiriyor.
• FastMail ise aynı işlevi sunarken yalnızca 2MB gerektiriyor.

Üretkenlik

• Todoist 9MB, Dropbox 10MB, 1Password 13MB, Trello 13.5MB gerektiriyor.
• Discord, sohbet için 21MB gerektiriyor.

Belge düzenleme

• Google Docs 13.5MB, Notion 16MB gerektiriyor.

Sosyal ağlar

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

Devasa kategori

• Jira neredeyse 50MB, Slack ise 55MB gerektiriyor.
• react.dev ilk başta 2MB ile başlıyor ama kaydırdıkça sınırsız şekilde büyüyebiliyor.

Giderek daha hızlı mı kötüleşiyor?

• 2015'te ortalama web sayfası boyutu Doom 1'in shareware sürümüne (2.5MB) yakındı.
• 2024'te Slack 55MB'a ulaşıyor; bu da yalnızca JavaScript olarak orijinal Quake 1 ile aynı boyut demek.

10MB ne kadar büyük?

• 10MB artık o kadar büyük ya da özel gelmiyor.
• Ortalama satır başına 65 karakter varsayılırsa, her web sitesi için yaklaşık 150.000 satır kod gönderiyoruz.
• Google Maps, modern standartlara göre nispeten mütevazı bir 4.5MB.

Sonuç

• Sorun yalnızca indirme boyutu değil.
• JavaScript, tarayıcının ayrıştırması, bellekte tutması ve çalıştırması gereken bir şey.
• İçeriğin, kod boyutunu aşması gerektiğine inanıyorum.
• Gitlab, statik bir açılış sayfası göstermek için 13MB kod ve 500K+'dan fazla satır JS gerektiriyor.

GN⁺ görüşü:

1. Bu, web geliştirmenin mevcut durumuna dair gerçekçi bir teşhis sunuyor ve web sitelerinin JavaScript boyutunun kullanıcı deneyimi ile performansa etkisini anlamaya yardımcı oluyor.
2. Frontend geliştiricilerine optimizasyonun önemini hatırlatıyor ve gerekenden fazla kaynak kullanılmaması için dikkat çekiyor.
3. Web sitesi performansı konusunda geliştirici topluluğu içinde tartışma başlatabilecek ilgi çekici veriler sunuyor.

[GN⁺]

Hacker News görüşleri

• Yetişkin siteleri aslında performansı gerçekten önemseyen örnekler; Pornhub yalnızca 1.4MB veri yüklüyor. Bu, bazı büyük teknoloji şirketlerinin sunduğu performanstan çok daha iyi. Pornhub temel UI/UX veya içerik sunumu konusunda neredeyse hiç hata yapmıyor.
• Yeni Zelanda'nın kırsal bölgelerinde roaming hizmeti kullanırken web deneyimi çok kötüydü. Spotify'ın çevrimdışı kullanıcı deneyiminin (UX) de iyileştirilmesi gerekiyor.
• Neden sıkıştırılmamış veriye baktığımız sorgulanıyor. Spotify ve Gmail gibi dinamik uygulamalar, sayfa yüklendikten sonra hızlı gezinme sağlıyorsa mazur görülebilir. Bazı siteler ilk yüklemeye fazla odaklanarak kullanıcı deneyimini kötüleştiriyor.
• Yazılım, onu yapan organizasyonu yansıtır. Veri aktarımının çoğu, sayfanın gerçekten çalışması için gereken JavaScript değil; analitik ve üçüncü taraf script'leri. Pazarlama ekipleri bunların farkında değil ya da umursamıyor.
• Web uygulamalarındaki JavaScript dosya boyutlarına dair analiz eksik kalmış. Örneğin Google Translate yalnızca basit bir etkileşim uygulaması değil, birçok özellik içeriyor; buna rağmen 2.5MB hâlâ aşırı.
• Wordsandbuttons.online sitesindeki tüm sayfalar, animasyon ve etkileşim içermesine rağmen 64KB'nin altında. Bu, üçüncü taraf bağımlılıklarını kullanmama politikası sayesinde mümkün.
• Sadece JavaScript'in aşırı kullanımını değil, izleme script'lerinin miktarını da konuşmak gerekiyor.
• Popüler sitelerin yüklediği JavaScript miktarı karşılaştırılıyor. Örneğin Pornhub, YouTube'dan yaklaşık 10 kat daha az JavaScript yüklüyor.
• Web'in bugünkü hâli çok üzücü. Hızlı internet bağlantısı kullananlar, web'in ne kadar yavaşladığını fark etmiyor. Reklam/izleyici engelleyici kullanmamayı düşünmek bile mümkün değil.
• Bakımı kolaylaştırmak için karmaşık framework'ler ve soyutlamalar oluşturuluyor, ama birçok geliştirici JavaScript'in temellerini bile bilmiyor. Web uygulamaları gereğinden fazla mühendislik ürünü hâline getiriliyor ve gerçek dili gizleyen çok fazla katman oluşturuluyor. JavaScript'in kendisini öğrenip framework yerine vanilla JavaScript kullanmak, JavaScript kod tabanını büyük ölçüde azaltabilir.