콘텐츠 효율성 최적화

일리야 그리고릭
일리야 그리고릭

웹 애플리케이션은 범위, 비전, 기능 면에서 계속해서 성장하고 있으며 이는 좋은 일입니다. 하지만 더욱 풍부한 웹을 향한 끊임없는 행진은 또 다른 트렌드를 주도하고 있습니다. 각 애플리케이션에서 다운로드하는 데이터의 양이 꾸준한 속도로 계속 증가하고 있습니다. 최적의 성능을 제공하려면 모든 바이트 하나하나를 전달하는 과정을 최적화해야 합니다.

최신 웹 애플리케이션은 어떤 모습일까요? HTTP 자료실이 이러한 질문에 답하는 데 도움이 될 수 있습니다. 이 프로젝트는 가장 인기 있는 사이트 (Alexa Top 1M 목록에 등재된 300,000개 이상 사이트)를 주기적으로 크롤링하고 각 개별 대상에 대한 리소스 수, 콘텐츠 유형 및 기타 메타데이터에 대한 분석을 기록하고 취합하여 웹이 어떻게 구축되었는지 추적합니다.

HTTP 아카이브 트렌드

50번째 백분위수 75번째 백분위수 90번째 백분위수
HTML 13 KB 26 KB 54 KB
이미지 528 KB 1213 KB 2,384KB
JavaScript 207 KB 385 KB 587 KB
CSS 24 KB 53 KB 108 KB
기타 282 KB 308 KB 353 KB
합계 1,054KB 1,985KB 3,486KB

위의 데이터는 2013년 1월부터 2014년 1월까지 웹에서 인기 있는 대상의 다운로드 바이트 수 증가 추세를 보여줍니다. 물론, 모든 사이트가 동일한 속도로 증가하거나 동일한 양의 데이터를 요구하는 것은 아니므로 여기서는 50번째 (중앙값), 75번째, 90번째 등 다양한 분위수를 강조표시하고 있습니다.

2014년 초 사이트의 중앙값은 75개의 요청으로 구성되어 있으며 총 전송 바이트는 1,054KB에 달하며, 총 바이트 수 (및 요청)는 전년도에 걸쳐 꾸준히 증가해 왔습니다. 그 자체가 놀라운 것은 아니지만 성능에 중요한 영향을 미칩니다. 인터넷 속도는 점점 빨라지고 있지만 국가마다 다른 속도로 빨라지고 있고, 특히 모바일에서 많은 사용자가 여전히 데이터 한도와 비싼 종량제 요금제에 노출되어 있습니다.

데스크톱 애플리케이션과 달리 웹 애플리케이션은 별도의 설치 프로세스가 필요하지 않습니다. URL을 입력하기만 하면 바로 실행됩니다. 이것이 웹의 핵심 기능입니다. 하지만 이를 실현하기 위해 수십, 수백 개의 다양한 리소스를 가져와야 하는 경우가 많습니다. 이러한 모든 리소스는 메가바이트 규모의 데이터가 합쳐질 수 있으며, 우리가 목표로 하는 즉각적인 웹 환경을 구현하기 위해 수백 밀리초 내에 통합되어야 합니다.

이러한 요구사항을 고려했을 때 즉각적인 웹 환경을 달성하는 것은 간단한 일이 아닙니다. 불필요한 다운로드를 제거하고, 다양한 압축 기술을 통해 각 리소스의 전송 인코딩을 최적화하고, 가능하면 캐싱을 활용하여 중복 다운로드를 제거하는 등 콘텐츠 효율성을 최적화하는 것이 중요합니다.