한빛출판네트워크

제공 : 한빛 네트워크
저자 : Lara Swanson
역자 : 이아름
원문 : Web Performance Is User Experience

당신의 사이트를 최적화하려는 노력이 사용자를 위한 총체적 경험에 가져올 영향

웹에서 어떻게 검색하는지 생각해봅시다. 사이트의 로딩이 오래 걸린다면 얼마나 빨리 탭을 닫고 다른 검색 엔진의 결과로 이동합니까? 커피를 주문하기 위해 기다리는 짧은 시간동안 휴대폰에서 한다고 고려해보면, 사이트를 빨리 로드할 것이란 기대는 매우 커집니다.

웹 성능은 사용자 경험입니다. 빠른 페이지 로딩 시간은 사이트 내에 신뢰를 만듭니다. 그것은 더 많은 재 방문자를 만들어주며, 좀 더 많은 유저들이 경쟁자의 사이트 보다 당신의 사이트를 선택하게끔 만들어 주기도 하며, 더 많은 사람들이 당신의 브랜드를 신뢰할 수 있게 해줍니다. 사용자들은 페이지가 2초 이내로 로드되기를 기대하고, 3초가 넘어가면 40%의 정도의 사용자가 당신의 사이트를 방문하지 않을 것 입니다. 유명한 사이트인 Amazon에서도 100ms(1/10초)의 페이지 로드 시간 증가로 1%의 매출 하락이 관측되었으며, Google에서도 1/2초의 페이지 로드 시간 증가 때문에 방문객과 트래픽이 20%가량 하락하는 일이 관측되었습니다. 또한 Akamai는 프리징, 크래싱, 너무 오랜 시간의 로드 혹은 복잡한 체크아웃 과정을 겪은 온라인 쇼핑객들의 75%가 해당 사이트에서 물건을 구매하지 않았다고 발표했습니다.

웹 성능은 전자상거래 사이트 뿐 아니라 어떤 종류의 사이트에도 페이지 속도의 최적화는 영향을 끼칩니다. Google Maps 홈페이지의 용량을 100KB에서 80KB로 줄였더니 재방문 트래픽이 증가했다는 연구결과가 증명하듯, 사용자들은 빠른 사이트에 다시 돌아올 것입니다. 게다가 페이지 로드 시간은 검색엔진 결과의 요소에 포함되는 것을 감안하면, 빠른 사이트는 느린 사이트보다 더 나은 결과를 가져올 것입니다.

페이지 로드 시간은 또한 모바일 유저의 경험에도 중요한 영향을 줍니다. 한 페이지에 160KB의 이미지들을 추가했을 때, 12% 가량의 모바일 기기 반송률이 증가하는 것을 발견했습니다. 더블클릭은 모바일 장치에서 하나의 클라이언트 측 재접속을 없애고 클릭률을 12% 가량 늘려주었음을 확인했습니다. 다른 연구에 따르면, 만약 Amazon이 압축된 JPEG 파일로 그들의 모든 이미지를 바꾸었더라면, 폰에서 페이지를 로드하는데 필요한 에너지의 20%을 절약할 수 있고 그리고 Facebook은 30%를 절약할 수 있다고 합니다.

결론은 사이트를 최적화하려는 노력은 배터리 수명을 포함하여 사용자의 모든 경험에 영향을 미친다는 것입니다.

이런 상당수의 문제는 복합적으로 우리가 사이트를 디자인 할 때 점점 많은 역동적인 요소들, 용량이 큰 자바스크립트 파일, 멋진 애니메이션, 복합적인 그래픽 등을 첨가했기 때문입니다. 당신은 아마 디자인과 레이아웃을 최적화 하는데 집중했겠지만, 그것들이 페이지의 속도와 맞바꾸는 결과를 가져오게 될 수 있습니다. 몇몇 디자인이 된 사이트들은 그들이 사용하는 작은 사이즈를 위해 사이트를 재구성할 때 사용하는 이미지와 JavaScript의 양이 얼마나 되는지에 대해서 잘 모릅니다.

당신이 최근에 디자인한 것에 대해 생각해보세요. 얼마나 많은 폰트 속성이 사용되었나요? 얼마나 많은 이미지를 사용하였나요? 얼마나 큰 이미지를 사용하고 어떤 파일 포맷을 사용했나요? 당신의 디자인이 마크업과 CSS 구조를 위한 계획에 얼마나 영향을 끼쳤습니까?

이번 연재 글에서 당신의 사이트를 신속하게 로드하는데 걸리는 수많은 요청의 사이즈와 크기를 최적화하기 위한 기본 사항에 주력했습니다. 다음 글에서는 이미지 포맷과 최적화를 통해 페이지 로드 시간에 대한 가장 크고 빠른 성과에 대해 초점을 맞출 것입니다. 사이트를 제작할 때, 때때로 당신은 미적인 것과 페이지 로드 시간 중에서 선택해야 합니다. 비결은 언제나 사용자 경험은 성능을 포함한다는 관점과 무엇이 당신의 사이트에 가장 큰 효과가 있을지 생각하는 것입니다.