- 웹페이지가 실제 콘텐츠보다 훨씬 큰 비압축 JavaScript를 내려받는 사례가 흔해지면서, 단순 랜딩 페이지부터 업무용 앱까지 브라우저 부담이 커짐
- 측정은 Firefox on macOS에서 확장 기능과 캐시를 끄고 JavaScript만 집계해, 이미지·동영상·스타일을 제외한 코드 실행 비용에 초점을 맞춤
- Wikipedia는 0.2MB였지만 Linear 3MB, Zoom·Vercel 6MB, GitLab 13MB처럼 단순 페이지도 수 MB에서 두 자릿수 MB까지 올라감
- 앱 영역에서는 Gmail 20MB와 FastMail 2MB가 10배 차이를 보였고, Jira 약 50MB와 Slack 55MB처럼 채팅·업무 도구의 코드량이 특히 큼
- JavaScript는 다운로드 뒤에도 파싱·메모리 유지·실행 비용을 만들기 때문에, 작은 콘텐츠를 렌더링하려고 거대한 코드 번들이 필요한 구조는 성능과 배터리에 직접 부담이 됨
측정 방식과 비교 기준
- 측정 환경은 Firefox on macOS였으며, 브라우저가 달라도 대체로 비슷할 것이라는 전제로 진행됨
- 조건은 다음과 같음
- 시크릿 모드가 아닌 일반 모드
- 모든 확장 기능 비활성화
- JavaScript만 측정
- 비압축 크기 기준
- Service Worker 활성화
- 캐시를 비활성화한 콜드 로드
- 콘텐츠는 사이트마다 편차가 커서 비교 대상에서 제외됨
- YouTube의 동영상과 Slack의 텍스트 메시지는 본질적으로 크기가 다름
- JavaScript는 상호작용 복잡도를 비교하기 위한 공통 지표로 사용됨
- 핵심은 브라우저가 코드를 파싱하고 실행하기 위해 부담해야 하는 작업량임
- 기준점으로 tonsky.me 블로그 자체는 0.004MB로 측정됨
랜딩 페이지와 정적 콘텐츠
- 약간의 상호작용이 있는 일반 페이지 예시에서 Wikipedia는 0.2MB 수준임
- 더 무거운 랜딩 페이지는 다음과 같음
- Linear: 3MB
- Zoom: 6MB
- Vercel: 6MB
- GitLab: 13MB
- 위 수치는 이미지, 동영상, 스타일을 제외한 JavaScript 코드만의 크기임
- 정적 텍스트를 보여주는 웹사이트도 수 MB의 JavaScript를 내려받음
- Medium: 3MB
- Substack: 4MB
- Quora: 4.5MB
- Pinterest: 10MB
- Patreon: 11MB
- 정적 페이지로도 가능해 보이는 콘텐츠 표시 작업에 큰 JavaScript 번들이 쓰이는 사례가 있음
검색과 단순 상호작용 앱
- 검색 중심 앱은 질의 입력과 결과 목록 표시가 중심이지만, JavaScript 크기는 작지 않음
- StackOverflow: 3.5MB
- NPM: 4MB
- Airbnb: 7MB
- Booking.com: 12MB
- Google 검색은 텍스트 필드와 링크 목록 중심의 화면임에도 9MB로 측정됨
- 단순 입력 UI를 가진 서비스도 수 MB의 JavaScript를 사용함
- Google Translate: 2.5MB
- ChatGPT: 7MB
- ChatGPT의 복잡성이 서버 쪽에 있다는 점과 별개로, 브라우저에는 7MB의 JavaScript가 내려옴
미디어 서비스와 이메일
- 동영상 서비스의 JavaScript 크기는 다음과 같음
- Loom: 7MB
- YouTube: 12MB
- Pornhub: 1.4MB
- 오디오 서비스에서는 SoundCloud와 Spotify가 각각 12MB 수준으로 측정됨
- 이메일 서비스에서는 차이가 크게 벌어짐
- Google Mail: 20MB
- FastMail: 2MB
- FastMail은 같은 이메일 서비스 범주에서 Google Mail보다 10배 적은 JavaScript를 사용함
- Google Mail의 20MB는 Figma처럼 커스텀 C++/OpenGL 렌더링을 포함하는 앱과 비교될 만큼 큰 수치임
생산성 도구와 문서 편집
- 생산성 앱도 단순 작업 대비 JavaScript가 큼
- Todoist: 9MB
- Dropbox: 10MB
- 1Password: 13MB
- Trello: 13.5MB
- Discord: 21MB
- Dropbox는 폴더 안 파일 목록, 1Password는 비밀번호 목록, Trello는 카드 표시 같은 작업에 각각 10MB 이상을 사용함
- 문서 편집 서비스는 두 자릿수 MB 수준임
- Google Docs: 13.5MB
- Notion: 16MB
- 문서 편집에는 커서 이동과 동기화 같은 어려운 기능이 있지만, 비교 대상 서비스들의 JavaScript 크기는 여전히 큼
소셜 네트워크와 초대형 사례
- 소셜 네트워크는 좋아요, 피드, 메시징 등을 위해 대체로 12MB 전후의 JavaScript를 사용함
- Twitter: 11MB
- Facebook: 12MB
- TikTok: 12.5MB
- Instagram: 16MB
- LinkedIn: 31MB
- LinkedIn은 블로그, 플랫폼, 검색, 메시징, 소셜 기능을 모두 포함하며 31MB로 측정됨
- 매우 큰 웹앱 사례는 별도 범주에 가까움
- Jira: 거의 50MB
- Slack: 55MB
- Slack은 사용자 목록, 메시지, 반응을 다루는 채팅 앱인데 55MB의 JavaScript를 내려받음
- react.dev는 처음에는 2MB로 시작하지만, 스크롤을 반복하면 JavaScript가 계속 늘어나는 현상이 관찰됨
- 예시로 100MB까지 증가시킬 수 있었음
- 업데이트에 따르면 일반 사용자 경험에서는 임베디드 코드 에디터가 첫 로드 후 캐시에 저장되어 이후 네트워크 트래픽은 보이지 않음
- 다만 스크롤할 때 100MB의 JavaScript가 계속 파싱, 평가, 초기화될 수 있음
10MB 코드가 뜻하는 것
- 2015년 평균 웹페이지 크기는 Doom 1 셰어웨어 버전의 2.5MB에 가까워지고 있었음
- 2024년 Slack은 JavaScript만으로 원본 Quake 1 전체 리소스 크기인 55MB에 도달함
- 10MB의 코드가 일반적인 수준처럼 보이지만, 평균 코드 한 줄을 65자로 가정하면 약 15만 줄에 해당함
- 이 코드는 이미 minify된 상태이므로, 원본 기준으로는 30만 줄 이상일 수 있음
- Google Maps는 SPA의 대표 사례로 꼽히지만 4.5MB로 측정되어, 현대 웹앱 기준에서는 오히려 작은 편으로 비교됨
- Figma는 복잡한 프런트엔드 앱이라 JavaScript 다운로드 크기가 큰 것이 자연스럽지만, Gmail은 Figma와 비슷하고 LinkedIn은 1.5배, Slack은 2.5배 수준임
브라우저가 치르는 비용
- 문제는 다운로드 크기에서 끝나지 않음
- JavaScript는 브라우저가 파싱하고, 메모리에 유지하고, 실행해야 하므로 지속적인 비용을 만듦
- 콘텐츠 크기가 코드 크기보다 커야 한다는 기준에서 보면, 10K 문자짜리 블로그 글을 렌더링하기 위해 1000배 큰 JavaScript가 필요한 구조는 과도함
- 좋은 예시로 언급된 사이트는 0.1MB의 JavaScript만으로 충분히 동작함
- 같은 웹 환경에서 GitLab은 정적 랜딩 페이지 표시를 위해 13MB, 약 50만 줄 이상의 JavaScript를 필요로 하는 사례로 비교됨