맛집은 기다릴 수 있지만 웹사이트는 기다릴 수 없어요 - 웹 성능지표

배고픈 12시 점심시간이 다가옵니다. 오늘은 어딜가서 무엇을 먹어야할지 고민합니다. 메뉴를 고르고 맛있다고해서 찾아간 식당이었는데, 바로 자리가 생겨서 가게에 들어갔고, 주문한 음식도 굉장히 빨리 나오고, 맛도 좋았습니다. 게다가 바쁜와중에도 가게 직원분들은 생긋생긋 웃는 얼굴에 친절이 가득합니다. 보통 이런상황을 겪으면 이 가게는 좋은 곳이야. 다음에 또 와야지 라는 생각을 하죠.

 

식당에서의 이런 경험은 웹사이트를 방문하는 사용자의 경험과 비슷합니다.

 

사용자가 웹사이트를 방문하는 순간을 생각해보세요. 마치 배고픈 점심시간에 식당을 찾아가는 것처럼, 사용자는 특정한 목적과 기대를 가지고 웹사이트를 방문합니다. 웹사이트가 빠르게 로드되고, 원하는 정보를 쉽게 찾을 수 있다면? 주문한 음식이 신속하게 나오는 것과 같은 좋은 기분을 줍니다. 게다가 웹사이트의 모든 기능이 부드럽게 작동하고 사용하기 편하다면, 마치 친절하게 응대하는 직원처럼 사용자에게 긍정적인 경험을 선사합니다.

맛집같은 웹사이트가 되기 위한 방법이 있어요.

FCP (First Contentful Paint) - 메뉴판의 첫인상

메뉴판이 눈에 들어오는 순간을 떠올려보세요. 정확한 메뉴를 읽지 않아도 "아, 여기 메뉴판이 있구나"하고 알 수 있는 그 순간처럼, FCP는 웹사이트에서 사용자가 첫 콘텐츠를 마주하는 시점을 측정합니다. 메뉴판을 찾느라 시간을 허비하면 답답하듯이, FCP가 늦어질수록 사용자는 불편함을 느끼게 됩니다.

Google/SOASTA의 연구에 따르면,웹사이트 로딩 시간의 중요성을 잘 보여줍니다:

• 로딩 시간 3초: 이탈률 32% 증가
• 로딩 시간 5초: 이탈률 90% 증가
• 로딩 시간 6초: 이탈률 106% 증가
• 로딩 시간 10초: 이탈률 123% 증가

LCP (Large Contentful Paint) - 메인 메뉴가 눈에 들어오는 순간

메뉴판을 받고 제일 먼저 보이는 건 대표메뉴 입니다. 맛있어보이는 음식 사진과 메뉴이름을 보고 다른 메뉴들을 더 보거나, 주문하고싶은 마음이 생기곤 하죠. LCP는 웹사이트에서 가장 큰 콘텐츠가 표시되는 시점을 측정합니다. 사용자가 웹사이트의 핵심 내용을 빠르게 파악할 수 있도록 하는 중요한 순간 입니다.

TTI (Time to Interactive) - 주문할 준비가 된 순간

메뉴를 보고 무엇을 주문할지 준비가 되었습니다. TTI는 웹 사이트에서 실제로 무언가를 할 수 있는 시점을 측정합니다. 띵동을 누르거나 주문서를 쓰거나 직원을 부르는것처럼, 버튼을 클릭하거나 폼을 작성할 수 있는 상태가 되었다는 뜻 입니다. 아무리 멋진 메뉴판도 주문할 수 없다면 의미가 없듯이, 웹사이트도 사용자와 상호작용할 수 있어야 진정한 가치가 있습니다.

TBT(Total Blocking Time) - 주문 후 기다리는 시간

주문은 완료했지만 음식이 나오기까지 기다리는 시간은 짧을수록 좋습니다. TBT는 웹페이지가 보이기는 하지만 실제로 반응하지 않는 시간을 측정합니다. 마치 주문은 했지만 아직 음식이 나오질않아 배를 채울수가 없는 상황처럼, 사용자는 페이지가 완전히 준비될 때까지 답답함을 느낄 수 있습니다.

CLS(Cumulative Layout Shift) - 흔들리지않는 편안함

기다리던 메뉴가 나왔습니다. 같이 놓여진 반찬들도 테이블에 올려져있네요. 젓가락을 들고 한술 뜨려는데 테이블의 받침대가 불안정해서 덜컹거리거나, 추가로 주문한 메뉴가 접시 가득한 테이블에 갑자기 끼어들면 어떨까요? 웹사이트도 마찬가지로,클릭하려던 버튼 위로 광고 배너가 렌더되면서 버튼의 위치가 갑자기 밀려서 원하지않는 배너를 클릭할 수도 있습니다. CLS는 웹페이지의 콘텐츠가 얼마나 안정적으로 유지되는지 보여주는 지표입니다. 레이아웃이 흔들리지 않아야 사용자는 안정적으로 이용할 수 있습니다.

좋은 웹사이트는 맛집처럼 또 오고 싶어져요

맛집에서 경험이 좋으면 다음에 또 가고싶어지는 것 처럼, 웹사이트도 사용자 경험이 좋으면 다시 찾게 됩니다. FCP부터 CLS까지 살펴본 성능 지표들은 웹사이트를 이영하면서 느끼는 경험의 품질을 보여주는 지표들입니다.

크롬 개발자 도구에는 이런 지표들을 확인할 수 있는 light house가 있어서 각각의 페이지마다 지표를 확인할 수 있고, 어떤 부분을 개선해야 하는지도 잘 알려줍니다. 빠르고, 맛있고, 안정적인 맛집처럼 좋은 웹사이트를 만들기 위해서는 이런 성능 지표들에 관심을 기울여야 합니다.