구글 베테랑, “웹 성능의 병목은 자바스크립트”

요즘은 일반 웹 서핑 이용자라도 웹 사이트의 성능을 위해서는 설계 시 무엇을 조심해야 하는지 알고 있다. 웹 서버에 대한 요청 수를 줄여라. JPEG 이미지의 크기를 줄여라. 아카마이나 라임라이트같은 CDN 업체를 이용하라 등등.

하지만 스티브 샤우더스에 따르면, 이런 웹 서버 최적화 과정이 미치는 영향이 실제로 매우 미미하다는 것이 문제다.

야후에서 오랫동안 최고 성능 관리 엔지니어를 맡았었고, 현재는 구글에서 같은 일을 하고 있는 샤우더스는 “우리는 야후가 무엇을 하고 있는지 파악하기 위해 아파치 웹 서버의 코드를 조각조각 분해하기도 했다”고 말한다.

하지만 자세한 분석을 수행한 후에 샤우더스는 놀라운 사실을 발견한다. 웹 사이트를 로딩하는 데 걸리는 시간의 10~20% 만이 웹 서버에서 소요된다는 것이다. 샤우더스는 대부분의 시간은 웹 브라우저 내에서 코드를 실행하는 데 걸린다고 밝혔다.

AJAX로 무장한 최신 웹 사이트에서 문제가되는 코드는 역시 자바스크립트. 이는 웹 페이지 상의 자바스크립트 파일이 크기 때문이 아니라 웹 브라우저가 자바스크립트를 처리하는 방법 때문이라는 것이 샤우더스의 설명이다.

샤우더스는 “1세대 웹 브라우저는 순서대로 모든 자바스크립트 파일을 실행해야 했기 때문에 다른 코드가 실행되는 것을 막는 것은 물론, 다른 모든 다운로드를 중지하고 실행하는 경우도 있었다”고 설명했다.

이런 방식은 10년 전에는 말이 되는 이야기였지만, PC가 듀얼코어와 쿼드코어 PC로 무장한 현재는 합리적이지 못한 방식이다. 또한 지연으로 인해 생기는 손실 또한 클 수 있다.

구글은 500ms의 지연이 웹 트래픽 20% 감소로 이어졌고, 아마존의 경우, 100ms의 지연은 전체 매출의 1% 감소를 가져왔다.

브라우저가 좋으면 성능도 향상된다

최신, 그리고 차세대 웹 브라우저는 자바스크립트 파일을 다운로드하면서 실행할 수 있게 될 것이다. 지난 달 발표된 IE8도 이 기능을 제공하며, 모질라의 파이어폭스 3.5, 구글의 크롬 2.0도 이 기능을 제공할 예정이다.

샤우더스는 “자바스크립트에 대한 철저한 분석 없이는 극적인 성능 향상을 기대하기는 어렵다”고 강조했다.

이런 문제를 해결하기 위해 샤우더스는 자신이 직접 개발한 무료 툴인 와이슬로우(Yslow)를 추천했다. 이 툴은 웹 페이지가 얼마나 최고 속도를 낼 수 있도록 디자인됐는지 분석하고 등급을 매겨준다.

와이슬로우를 이용하면, 사용자는 처음에 얼마나 많은 자바스크립트가 로드되고 병목이 되는지 파악할 수 있다. 또한 이렇게 파악된 자바스크립트 파일을 나눠서 처음에 필요한 파일만을 로드하고, 나머지는 이미지와 텍스트가 로드된 다음에 실행되도록 할 수 있다.

샤우더스는 이런 과정을 통해 구글의 한 사이트는 초기 페이지 렌더링 속도를 60% 가까이 향상시켰다고 밝혔다.

자바스크립트 파일 외에도 CSS(Cascading Style Sheets) 역시 사이트 성능에 많은 영향을 미친다. 웹 페이지의 룩앤필을 결정하는 CSS 파일은 최근 들어 매우 정교해지고 있다.

또한 사용자들은 웹 메일 페이지와 같은 특정 사이트에서 계속 머무르는 경우가 있다. 이들 사이트는 하루 종일 계속 페이지를 다시 로드하는데, 이때 과도하게 만들어진 CSS 파일이 매번 지연을 유발하게 된다.

자바스크립트와 CSS 외에도 와이슬로우는 모든 문제를 22개 기준으로 분석한다. 평가는 냉정한데,, 인기있는 사이트들 중에서는 애플과 ESPN, 위키피디아가 C 등급을 받았고, 뉴욕타임즈, NBA, 컴퓨터월드는 E 등급을 받았다. 콘텐츠가 별로 없는 Google.com이나 마이크로소프트의 Live.com 같은 검색엔진이 드물게 A를 받았다.  eric_lai@computerworld.com