1장 성능이 곧 사용자 경험이다.

보통의 사용자는 2초 이내에 페이지가 보이길 기대하고, 3초가 지나면 최대 40%의 사용자가 그 사이트를 떠난다. 모바일 사용자의 85%는 모바일 페이지 로딩 속도가 데스크톱에서 페이지를 로딩하는 속도와 같거나 그보다 더 빠르길 기대한다. 무엇보다 페이지 로딩 시간과 사이트 체감 속도는 사용자 경험의 가장 큰 부분을 차지하므로 성능은 여러분의 사이트가 보기 좋은 것만큼 중요하다.

사용자 경험이 사이트의 인상에 미치는 영향

사용자 경험은 사람들이 해당 사이트에서 받는 전반적인 인상에 영향을 미친다. 아카마이 사는 쇼핑몰에서 사이트 멈춤이나 에러, 페이지 로딩 시간 지연, 복잡한 결제 과정을 겪은 사용자의 75%가 해당 사이트에서 상품을 구매하지 않는다는 연구 결과를 밝힌 바 있다. 또한 고메즈 사는 온라인 구매자 행동 연구를 통해 온라인 소비자의 88%는 불쾌한 경험을 한 사이트를 재방문할 가능성이 낮다는 것을 발견했다. 같은 연구에서 온라인 구매자 행동 연구를 통해 온라인 소비자의 88$는 불쾌한 경험을 한 사이트를 재방문할 가능성이 낮다는 것을 발견했다. 같은 연구에서 온라인 소비자의 75%는 접속량이 최고조에 달하는 시간에 해당 사이트의 로딩 속도가 지연된다면 이를 인내하기보다는 경쟁 사이트로 이동한다고 밝혔다.

재방문하는 사용자

사용자가 로딩시간이 오래 걸리는 사이트를 점점 덜 방문한다는 구글의 연구에서도 알 수 있듯이 사용자는 더 빠른 사이트를 다시 방문하는 경향이 있다. 실험 결과를 보면 로딩 과정에서 400밀리초의 지연이 발생하면 사이트의 검색률이 첫 3주 동안 0.44% 감소했고, 그다음 3주 동안 0.76%가 추가로 하락했다.

또한, 실험에서 사용자가 속도 지연을 경험한 사이트는 다시 빨라진후에도 검색률이 이전 수준으로 회복되기까지는 상당한 시간이 필요했다. 사용자는 해당 사이트가 어떤 느낌이었는지 본능적으로 기억하고 그 경험을 바탕으로 얼마나 자주 재방문할지, 앞으로 계속 사용할지 여부를 결정한다.

검색엔진 순위

페이지 로딩 시간은 검색엔진의 검색 결과에도 영향을 미치는데, 보통 속도가 빠른 사이트가 느린 사이트보다 검색 결과 목록의 상위에 표시된다. 구글은 검색 결과 순위 알고리즘에 사이트 속도를 반영하고 있다.

모바일 사용자에게 미치는 영향

모바일을 통한 인터넷 접속 트래픽의 총 비율이 꾸준히 증가하고 있다. 전세계 인터넷 사용자들이 인터넷에 접속할 때 가장 애용하는 기기가 모바일이라는 연구 발표도 있다. 발표에 따르면 아프리카와 아시아 인터넷 사용자의 약 50%는 모바일 기기만으로 인터넷을 사용하고 있으며, 미국은 25% 정도가 모바일을 통해 인터넷을 사용한다. 많은 사람이 모바일 기기를 통해 주로 인터넷에 접속하고 있으므로 앞으로는 모바일 환경 개선에 더욱 도전해야 할 것이다.

모바일 네트워크

모바일 기기에서 웹 페이지를 로딩하는 데 시간이 더 오래 걸래는 첫 번째 이유는 모바일 기기의 데이터 전송 방식에서 찾을 수 있다. 모바일 기기가 데이터를 송수신하려면 네트워크와 무선 채널을 연결해야 한다. 3G망을 기준으로 이 과정에서 몇 초가 걸릴 수 있다. 게다가 무선 채널을 통해 송수신하는 데이터가 없어 타임아웃이 발생하면 체널이 유휴 상태에 빠질 수도 있다. 그 후 데이터를 다시 송수신하면 새로운 채널이 만들어지고 앞의 모든 과정을 처음부터 다시 시작하므로 잠재적으로 웹 페이지를 로딩하는 시간에 큰 악영향을 미치게 된다.

일리아 그리고릭은 기고를 통해 현재 사용자에게 웹 브라우징 경험을 제공할 때의 제약 요인은 대역폭이 아닌 대기 시간이라고 말했다. 사용자가 대기하는 시간이 늘어날수록 사용자에게 필요한 데이터를 한 번 가져오는 시간이 더 길어지고, 이는 페이지가 완전히 로딩되는 시간을 더 늘어나게 하기 떄문이다.

대역폭과 대기 시간은 무엇인가?

대기 시간은 한 지점에서 다른 지점까지 데이터를 담은 패킷이 이동하는 데 걸리는 시간이다. 대기 시간은 기본적인 물리적 특성에 영향을 받으며 보통 밀리초 단위로 측정한다.

대역폭은 광섬유 케이블 또는 이동 통신사를 통해 한 번에 전송할 수 있는 데이터의 양처럼 통신 경로에서 한 번에 처리할 수 있는 최대량을 말한다.

페이지 로딩 시간은 모바일 사용자 경험에 매우 큰 영향을 미치는 동시에 사이트를 고르는 기준이 되므로, 사이트 최적화시에 사용자의 모바일 기기 성능을 우선시해야 한다. 이 부분은 여러 회사의 연구로 입증되었는데, 필자가 엣시에서 이끄는 페이지에서는 보이지 않는 160KB의 이미지를 추가하고 나서 모바일 사용자중 12%가 접속 중 이탈하는 것을 발견했다. 또한 구글의 자회사인 온라인 광고 업체 더블클릭은 클라이언트 측 재전송을 한 단계 줄이고 나서 사용자의 모바일 광고 진입률이 12% 증가했다.

모바일 사용 패턴

구글이 진행한 연구에 따르면 사람들은 다음과 같은 상황에 스마트폰을 쓴다고 한다.

• 집으로 가는 길, 혹은 집에서
• 다른 사람의 근황이 궁금할 때
• 잠깐 짬이 날 때
• 지금 즉시 무엇을 찾아야 할 때

테블릿은 주로 엔터테인먼트와 검색에, 데스크톱은 집중적인 조사가 많이 필요하거나 꽤 진지한 작업에 사용된다. 이와 달리 스마트폰은 다음과 같은 온라인 활동 시에 가장 많이 이용한다.

• 특정 정보 검색
• 브라우징
• 쇼핑
• 소셜 네트워킹

모바일 기기만을 사용하는 사용자는 싫든 좋은 모든 종류의 일을 핸드폰으로만 해야 한다는 것과, 모든 사용자는 기기의 종류와 관계없이 시간 낭비를 싫어한다는 사실도 기억해야 한다.

모바일 하드웨어

추가로 사용자가 모바일 기기를 와이파이에 연결한 후 사이트에 접속하더라도 내장된 안테나의 길이와 출력 전력으로 인해 속도가 느려지는 경험을 할 수 있다. 와이파이 기술 자체는 무선 전송 및 신호 수신을 위해 한 번에 하나 이상의 안테나를 사용할 수 있지만, 대부분의 스마트폰에서는 이 기술을 활용할 수 없다. 또한 노트북과 데스크톱에 내장된 와이파이 안테나는 휴대폰보다 훨씬 길다.

또 모바일 기기는 배터리를 효율적으로 관리하려고 하는데, 대표적인 방법 중 하나가 무선의 출력을 제한하는 것이다.

와이파이의 신호 강도, 자바스크립트 렌더링, 이미지 렌더링 같은 모든 것이 모바일 기기의 배터리 소모에 영향을 미친다. 한 연구에서는 아마존 사이트가 사이트 내의 모든 이미지 파일을 92% 퀄리티의 JPEG 파일로 압축한다면 안드로이드 폰에서 페이지를 로딩하는 데 드는 에너지가 20% 줄어들고, 마찬가지로 페이스북에 같은 방식을 적용한다면 소비 에너지가 30% 줄어든다고 한다. 이런 개선은 사용자가 눈치챌 만큼의 이미지 손실 없이도 에너지 소비를 줄여 사용자 경험에 긍정적인 영향을 미칠 수 있다. 모바일 기기의 중요 경로에서 페이지 로딩 시간의 최대 35%가 HTML 구문 분석 및 자바스트립트 실행 등의 계산에 쓰인다고 한다.

정리하면, 사이트를 최적화하는 노력이 배터리 수명을 포함한 사용자의 전체 경험에 영향을 미친다는 것이다.

디자이너가 성능에 미치는 여향

디자인 초기에는 보통 다음과 같은 것들을 결정할 것이다.

• 색상과 그레이디언트: 어떤 이미지 종류를 쓸지, 투명도를 적용할 것인지, 얼마나 많은 스프라이트를 만들지, CSS3를 얼마나 사용할지에 영향을 준다.
• 레이아웃: HTML 계층구조, class와 ID 이름, 디자인 패턴의 재구성 및 CSS 구성에 영향을 준다.
• 타이포그래피: 파일 크기와 포함할 글꼴 파일의 수에 영향을 준다.
• 디자인 패턴: 사이트 전반에 걸쳐 무엇을 어떻게 재사용하고 캐싱할지, 언제 어떻게 자원을 로딩할지, 나중에 작업할 디나이너나 개발자들이 얼마나 쉽게 수정할 수 있는지에 영향을 준다.