사이트가 이전보다 "더 무거워졌거나", 페이지 로딩 시간이 더 길어졌다는 것을 느끼셨나요? 10년 전만 해도 평균 페이지 크기가 800~900KB 정도였지만, 지금은 많은 경우 2MB 이상을 초과합니다.
그 이유는 단순히 "파일 축적"이 아니라 웹 구조의 완전한 변화 때문입니다. 고해상도 이미지, 실시간 비디오, 무거운 JavaScript 다운로드, 더 큰 프레임워크 등이 그 예입니다. 이 모든 것이 느린 로딩 시간과 사용자 경험 및 검색 결과에 미치는 영향으로 나타납니다.
이 글에서는 웹 페이지가 매년 커지는 이유를 밝히고, 플랫폼에 관계없이 크기를 줄이고 사이트 성능을 개선하는 명확한 단계를 제시합니다.
수십 년 전의 전화 연결 속도보다 인터넷 연결이 수천 배는 빠르지만, 웹사이트 로딩 시간은 여전히 비슷하다고 느낄 때가 많습니다.
그 이유는 분명합니다. 기존 인터넷이 성장하면서 일반적인 웹사이트를 구성하는 데이터 양도 늘어났기 때문입니다. 위키피디아처럼 간단한 브라우저 기반 웹사이트조차도 별다른 이유 없이 상당한 양의 메모리를 소모합니다. 그렇다면 무슨 일이 벌어지고 있는 걸까요?
미묘한 것에서 증폭된 것까지
(이상적인 세상에서) 초당 56킬로비트의 대역폭만 제공하던 시절, 웹사이트는 간단하고 효율적이어야 했습니다. 예전 웹사이트는 크기가 킬로바이트였고 대부분 텍스트였습니다. 이미지가 있을 때는 압축률이 높은 저해상도 JPEG 파일이었습니다. 한번은 64메가바이트짜리 뮤직비디오를 휴대폰 모뎀에 다운로드했는데, 완성하는 데 주말 내내 걸렸습니다. 그렇다면 웹사이트에 비디오를 삽입하는 건 어떨까요? 걱정하지 마세요.
이는 현실 세계의 고속도로에도 적용되는 오래된 역설입니다. 아무리 많은 도로, 고가도로, 육교를 건설하고 차선을 추가하더라도 항상 교통 체증에 시달리게 됩니다. 아마도 에너지 효율적인 조명이라는 현상도 동일한 심리적, 경제적 요인에 의해 발생하는 것일지도 모릅니다. 전기 요금을 줄이는 대신, 같은 에너지 비용으로 더 많은 조명을 설치하고 있는 것입니다!
더욱 풍부한 미디어가 모든 곳에 있습니다
첫 번째 이유는 바로 리치 미디어 때문입니다. 모든 기기는 고해상도 화면을 가지고 있기 때문에 웹사이트를 보기 좋게 만들려면 고해상도 이미지가 필요합니다. WEBP와 같은 최신 이미지 포맷은 고품질을 유지하면서 파일 크기를 크게 줄였지만, 픽셀 수가 더 큰 이미지의 수가 늘어나는 추세로, 이는 웹사이트에 부담을 줍니다.
이미지가 정적이라면 이는 정상적인 일이겠지만, 기존 웹사이트에는 자동으로 재생되는 비디오, 오디오 클립, 애니메이션 GIF가 포함되어 있으며, HTML5와 같이 사이트 자체 기술을 기반으로 구축된 다른 많은 풍부한 애니메이션 미디어도 있습니다.
프레임워크, 라이브러리 및 코드 오버로드
현대 웹사이트는 더 이상 과거처럼 원시 HTML 코드를 작성하는 단순한 작업이 아닙니다. 애플리케이션 프로그래밍과 마찬가지로 웹 개발자는 방대한 라이브러리와 정교한 도구를 활용하여 사이트를 빠르고 효율적으로 구축합니다. 하지만 라이브러리와 프레임워크에 대한 이러한 의존성은 개발자가 가장 간단한 작업에도 이를 사용함에 따라 웹사이트에 코드가 누적되는 결과를 초래합니다.
시간이 지남에 따라 웹사이트는 변경 및 업데이트되면서 코드가 누적됩니다. 이로 인해 오래된 코드, 사용되지 않는 CSS, 오래된 플러그인, 디버깅 스크립트 등이 남게 됩니다. 이는 웹사이트 기능에는 영향을 미치지 않지만, 저장 공간을 차지합니다.
광고, 추적 및 분석
웹사이트에서 사용자 경험을 풍부하게 하는 데에는 이러한 축적의 정당성이 있지만, 만약 그 목적이 누군가를 풍요롭게 하는 것이라면 어떨까요? 웹사이트는 제작과 운영에 비용이 많이 들고, 수익을 창출해야 합니다. 사용자가 이러한 서비스에 직접 비용을 지불하지 않는 한, 웹사이트를 유지하는 주된 방법은 광고입니다.
인터넷 초창기에는 웹사이트 상단에 배너 광고가 하나, 하단에 또 하나 표시되었습니다. 무한 스크롤 기능은 아직 존재하지 않았는데, 이것이 블로트 현상의 또 다른 원인입니다!
이제 웹사이트에 광고 시스템이 통합된 것은 부분적으로는 사용자들이 콘텐츠가 가치 있다고 생각하더라도 비용을 지불하고 싶어 하지 않기 때문입니다. 하지만 광고, 추적 도구, 분석 도구가 웹사이트에 부담을 주는 것은 분명합니다. 이것이 필요악인지 아닌지는 불분명합니다.
기능 크롤링 문제
이 모든 과대포장의 마지막 주요 원인은, 적어도 제 생각에는, 웹사이트를 장악하게 된 기능들의 엄청난 증가입니다. 과거에는 웹사이트가 단순히 정적인 정보 페이지에 불과했지만, 이제는 모든 사용자에게 적합한 다재다능한 웹 애플리케이션이 되기 위해 노력하고 있습니다.
채팅 도구는 원치 않을 때 나타나고, 백그라운드 프로그램은 알림과 함께 사용자의 모든 움직임을 감시합니다. 웹사이트에서 TikTok이나 YouTube와 유사한 요소를 추가하려고 할 때마다 제대로 작동하지 않고, 나중에 제대로 정리되지 않아 결국 실패한 "최적화"의 무덤으로 남게 됩니다.
이 문제의 중요성
우리는 소프트웨어가 최적화되지 않았다고 불평하는 경향이 있습니다. 더 빠른 프로세서와 더 많은 메모리에 돈을 쏟아부어도 성능이 그대로 유지된다는 뜻이니까요. 그렇다면 이제 사실상 인터넷을 통해 직접 제공되는 소프트웨어 애플리케이션인 웹사이트에도 같은 불평을 하는 건 어떨까요? 단순히 웹사이트가 복잡하거나 디자인이 형편없거나 로딩 속도가 느리다는 것만이 문제가 아닙니다.
혼잡한 웹사이트는 제한된 연결로 데이터를 소모합니다. 이로 인해 모든 사람이 인터넷에 접속하기 어려워집니다. 전력 소모가 늘어나고 하드웨어 비용도 증가합니다. 인터넷은 끊임없이 규모가 커지고 있는데, 이는 의무가 아니라 성장할 수 있기 때문입니다. 더 빠른 파이프는 개발자들을 안주하게 만들었고, 이로 인해 복잡성이 통제 불능으로 확산되었습니다. 성능을 핵심 설계 가치로 재설정해야 개선이 가능하겠지만, 더 단순한 네트워크에 만족하시겠습니까?
웹 페이지 팽창은 일시적인 현상이 아니라 인터넷이 인터랙티브하고 풍부한 미디어 콘텐츠로 전환됨에 따른 자연스러운 결과입니다. 하지만 크기와 리소스를 제어하는 것은 불가능한 일이 아닙니다. 이미지 및 비디오 구현을 위한 균형 잡힌 전략을 수립하고, JavaScript를 최적화하고, 더 가벼운 프레임워크를 선택하거나, 더 정밀한 로딩 기술을 사용하면 크기를 크게 줄일 수 있습니다. 웹사이트가 가벼워지면 로딩 시간이 단축되고, 사용자 경험이 향상되며, 검색 엔진 순위도 높아집니다. 오늘 작은 시작부터 내일 큰 변화를 만들어낼 수 있습니다.
