모바일 페이지에서 단 하나 중요한 것 ‘스피드’

0

기업이 디자인을 외부에 위탁하여 고품질 디자인의 웹 사이트를 만들었다고 해도 어째서인지 유저가 페이지를 곧바로 이탈하는 확률이 높아질 때가 있다. 한편 디자인은 그저 그렇더라도 유저가 기분 좋게 사용할 수 있도록 설계되어 있다면 유저의 페이지 이탈률(Bounce Rate)은 낮아질 수 있다. 많은 웹 디자이너나 웹 디렉터는 온보딩이나 페이지 이동 등 유저체험(UX) 디자인에 신경을 쓰지만 최근에는 그 이상으로 중요시되는 요소가 있다. 바로 ‘스피드’다.

 ‘유저체험’이 악화되는 원인 

아무리 훌륭한 서비스를 제공해도 앱이나 웹 사이트의 사용감이 나쁘면 유저는 서비스를 떠나게 된다. 지금에야 ‘유저체험(UX)’이라는 용어가 완전히 정착되어 있지만 그럼에도 불구하고 UX가 무시된 서비스도 많다.

유저가 서비스에 정착하는 것을 리텐션(정착률)이라고 한다. 유저 리텐션이 낮은 원인으로는 다음과 같은 것을 생각할 수 있다. 첫째 온보딩에 실패한다, 둘째 로그인하기 어렵다, 셋째 페이지 레이아웃이 사용하기 어렵다, 넷째 페이지를 읽어들이는 속도가 느리다.

그 외에도 셀 수 없을 정도로 많은 요소가 리텐션에 관련되어 있지만, 특히 치명적인 것은 네 번째로 언급한 ‘페이지를 읽어들이는 속도가 느리다’이다.

2017년 구글이 발표한 조사에 따르면 페이지 표시 속도가 1초에서 3초가 되는 것만으로도 페이지 이탈이 32%까지 상승한다는 걸 알 수 있다.

그럼에도 불구하고 대부분의 경우 페이지 스피드는 다른 UX의 개선 항목에 비해 미뤄지는 경향이 있다. 그러나 페이지 읽어 들이기 속도가 몇 초 짧아지는 것만으로도 이탈률이 감소한다면 우선적으로 개선할 가치가 있지 않겠는가!

 표시 속도에 좌우되는 3가지 

– 페이지 이탈률
우리나라는 5G가 대세가 되어가고 있지만 전 세계적으로 보면 아직도 3G나 2G를 채용하고 있는 나라가 많다. 3G 통신에서는 1.5MB 데이터를 다운로드하는 데 7초 걸린다고 하는데 앞서 언급한 구글의 조사에 따르면 적어도 페이지 전체의 용량이 1MB를 넘는 경우에는 이탈률이 커진다고 할 수 있다.

WebPageTest라는 페이지 속도 측정 서비스에서는 ‘Advanced Settings’에서 Connection을 3G로 설정하여 3G일 때 페이지 읽어들이기 시간을 측정할 수 있다. 페이지 속도가 신경쓰인다면 테스트를 해보기 바란다.

– 검색순위
구글이 2018년 3월 말에 내놓은 리포트에서는 구글의 검색지표로서 모바일 퍼스트 인덱스(MFI) 사용을 시작했다고 보고되었다. 앞으로는 순차검색에 MFI가 채용되는 웹 사이트가 증가하고 모바일용 콘텐츠가 인덱스의 대상이 된다.

검색순위는 다양한 요소가 복잡하게 얽혀 평가되지만 그 중에서도 페이지의 ‘표시 스피드’는 무시할 수 없는 요소다. 구글의 다른 발표에서는 2018년 7월부터 페이지 읽어들이기에 개선이 보이지 않는 사이트는 모바일 검색의 랭킹 요소에 적지 않은 악영향을 받게 될 것이라고 예고했다. 구글에서는 이 개선을 ‘Speed Update’라고 부르고 웹 사이트 운영자에게 주의환기를 하고 있다.
– 리퍼럴
페이지의 UX를 개선하기 위한 항목에는 다양한 것이 있지만, 페이지 스피드가 느려지면 나쁜 입소문에 영향이 생긴다. 신기하게도 사용하기 나쁘고 디자인이 세련되지 않았다는 이유라면 유저는 그대로 브라우저를 닫기만 한다. 그러나 페이지 읽어들이기 속도가 느리면 트위터 등의 SNS에다가 불평을 남긴다.

 표시 스피드, 유저를 만족시키기 위해 가능한 5가지 

– 이미지 압축
웹 사이트 이미지의 해상도가 불필요하게 큰 경우에는 이미지를 압축하자. PNG 보다 JPG이 일반적으로 파일 사이즈가 적으므로 JPG 파일을 사용하도록 한다. 아이콘은 이미지를 사용하기보다 SVG를 사용하는 편이 이미지 열화도 방지하므로 일석이조다. 이미지를 압축할 때는 포토샵 등의 이미지 편집 소프트웨어를 이용하는 것이 가장 확실하지만 Optimizilla(http://optimizilla.com/ko/) 등 웹 브라우저에서 이미지를 변환해주는 서비스를 이용해도 된다.

– CSS & JavaScript 압축
CSS나 JavaScript는 텍스트 파일이지만 쓸데없는 코드가 들어 있는 경우에는 불필요한 코드를 삭제하여 파일 자체를 가볍게 하는 것이 가능하다. Creativyst의 툴을 사용해 CSS나 JavaScript 등의 텍스트 스크립트를 압축할 수 있다.

– 사용하지 않는 외부 파일 삭제
CSS나 JavaScript 이외에도 외부 파일을 고쳐서 페이지 읽어들이기 속도를 고도화할 수 있다. 예를 들어 지나친 애니메이션, 커스텀 폰트, 동영상이나 오디오, 배경 이미지, jQuery 등의 플러그인이 여기에 속한다. 리치한 표현은 사이트 표시를 풍부하게 해주지만 페이지를 읽어들이기도 전에 유저가 페이지로부터 이탈해버리면 아무 소용이 없다.

– 서버 환경을 재고한다
페이지 읽어들이기 속도가 느린 원인을 크게 3가지로 구분하면 ‘통신 인프라’, ‘클라이언트 사이드’, ‘서버 사이드’가 된다. 클라이언트 사이드는 단말측 처리 속도 등의 문제가 있지만 페이지를 경량화함으로써 해결할 수 있다. 통신 인프라는 유저가 이용하는 이통서비스나 네트워크 설정에 의존하므로 생각대로 바꿀 수 없다. 연구가 가능한 것은 서버 사이드일 것이다. 웹 사이트를 구축하는 서버의 성능이 나쁘면 아무리 페이지를 경량화하거나 유저가 통신 속도가 빠른 이통사로 바꿔도 페이지를 읽어들이는 속도가 느려진다. 만약 자신이 운영하는 웹 서버가 느리다면 교체를 검토해보는 것도 좋을 것이다.

– 스케일톤 스크린을 준비한다
페이지 표시 속도를 1초 이하로 하는 것은 ‘어려운 기술’이라고 생각하는 사람이 많을 것이다. 그래서 UX상의 테크닉으로 채용되고 있는 것이 ‘스케일톤 스크린’이라고 불리는 표시 스타일이다. 스케일톤 스크린이란 콘텐츠가 표시되기 전 플레이스 홀더를 페이지가 완전히 읽어들여지기 전에 보여주는 방법이다. 페이지 읽어들이기를 할 때 스트레스를 주지 않도록 ‘스피너(읽어들이기할 때 빙글빙글 외전하는 애니메이션)’를 표시하는 것이 당연해졌지만 스피너보다 플레이스 홀더가 유저의 이탈률을 낮춰준다는 사실이 밝혀졌다.

 

 

페이스북으로 댓글을 달아주세요!

About Author

국내 모바일 산업과 창업 생태계를 응원합니다. 모바일 트렌드에 대한 전문 컬럼을 기고하거나 유망한 스타트업을 소개하고 싶으시면 연락바랍니다. 적극 수용하겠습니다~♥

댓글 남기기