이커머스를 하시는 분들의 가장 큰 고민은 무엇일까요? 솔직히 말해볼까요? 아마 매출에 대한 고민이 90% 이상일겁니다. 더 많은 매출을 내야 회사를 운영할 수 있고 브랜드가 지속될 수 있도록 투자도 할 수 있기 때문이죠. 그래서 오늘도 많은 분들이 어떻게 하면 방문자를 구매 고객으로 만들 수 있을까 고민합니다. 더 많은 고객을 만들기 위해서 멋진 쇼핑몰과 설득력있는 상세페이지, 다양한 효과 등을 도입하죠. 근데 이렇게 더 잘 팔기위한 노력이 오히려 전환율을 낮추는 족쇄가 될 수 있다는 점, 알고 계신가요? 바로 웹사이트 속도를 간과했기 때문입니다.
지금 웹사이트 로딩 속도 측정을 시작하세요
잠시 우리의 일상에 빗대어 상상해볼게요. 연인과의 근사한 식사를 위해 레스토랑에 입장을 했다고 상상해봅시다. 문을 열고 들어섰는데 아무도 눈길을 주지 않는다면 어떨까요? 반갑게 맞이하고 자리로 안내해주기를 기다렸는데 아무도 반응하지 않는다면 어떤 느낌이 들까요? 아마 썩 유쾌한 기분은 아닐거에요. 기대한 바와 달랐던 반응에 그대로 발걸음을 돌릴 가능성이 높을겁니다.
온라인 쇼핑몰도 사실 이와 크게 다르지는 않아요. 광고나 검색을 통해 우리 웹사이트에 들어온 방문자는 빠르게 사이트 콘텐츠가 뜨고 원하는 정보를 얻기를 기대합니다. 근데 사이트 로딩이 오래 걸려 빈 화면만 보고 있어야 한다면 어떨까요? 어렵게 방문한 식당을 나서는 손님처럼 이탈할 가능성이 높겠죠.
이처럼 아무리 좋은 제품과 브랜드를 보여주더라도 웹사이트가 느리게 열린다면 전환율에는 치명적으로 작용할 수 있습니다. 이번 글에서는 웹사이트 로딩 속도가 전환에 얼마나 중요한지, 그리고 어떻게 개선할 수 있는 지에 대해 알아볼게요.
구매 전환율 높이는 방법에 대한 다양한 연구
전 세계의 온라인 트래픽 데이터를 가장 많이 가지고 있는 회사 중 하나인 구글의 연구에 따르면, 웹페이지 로딩 속도가 1초에서 3초로 증가할 경우 이탈률이 32%나 증가한다고 합니다. 게다가 로딩 속도가 3초를 초과할 경우 53%의 사용자가 기다리지 못하고 이탈한다고 밝혔죠. 이는 다시 말하면 3초 이상 걸리는 웹사이트를 방문하고 싶어하는 사람의 수는 굉장히 적다는 뜻과 같습니다. 실제로 빠르게 열리는 웹사이트는 좋은 사용자 경험을 제공하고 자연스레 높은 전환율로 이어질 가능성이 큽니다.
웹사이트 로딩 속도와 전환율의 상관관계는 이커머스 영역에서도 동일하게 나타납니다. 아마존은 연구를 통해 로딩 속도가 100ms 느려질 경우 매출이 1% 감소한다고 보고했어요. 이는 로딩 속도가 비즈니스 성과에 얼마나 큰 영향을 미치는지를 잘 보여주는 사례입니다. 또한, Walmart의 경우 페이지 로딩 시간이 1초 줄어들면 매출이 2% 증가한다고 밝혔습니다. 이런 결과를 보았을 때 로딩 속도는 단순히 웹사이트가 빨리 열리는 것 뿐만이 아니라 비즈니스의 성장을 좌우할 수 있는 중요한 요소라고 볼 수 있습니다.
실제로 웹사이트 방문자가 사이트를 이탈하는 가장 큰 이유가 바로 느린 로딩 속도라고 해요. 당장 저를 돌아봐도 웹페이지가 빠르게 로딩되지 않으면 뭔가가 잘못 되었다고 생각하고 뒤로 가기 버튼을 눌러버리죠. 이 기대에 부응하지 못하면 더 이상 기다리지 않고 사이트를 떠나버리기 일쑤예요. 이는 곧, 잠재 고객이 실제 구매로 이어지지 않고 경쟁사 웹사이트로 이동할 가능성이 높아진다는 의미입니다.
느린 웹사이트 속도의 주범은 상세페이지?
특히 이커머스를 하는 비즈니스의 경우 제품의 매력을 잘 보여주고 방문자를 설득하기 위해 웹페이지에서 비교적 많은 숫자의 이미지 파일을 사용하는 경향이 있습니다. 텍스트 위주로 구성된 다른 웹사이트와 달리 큰 사이즈의 이미지나 GIF가 많은 이커머스 웹사이트는 상대적으로 로딩 속도가 느릴 가능성이 높죠. 해상도가 높은 선명한 이미지나 움직이는 GIF는 눈길을 사로잡을 수는 있지만, 웹페이지 로딩이 길어져 부정적인 사용자 경험을 줄 수 있어요. 사용자는 느려진 로딩 속도로 인해 웹사이트를 이탈할 수 있으며, 이는 곧 비즈니스에 안좋은 영향을 주게 됩니다. 아이러니하지 않나요? 분명히 사용자를 설득하기 위해 추가한 이미지와 GIF가 채 로딩 되기도 전에 사용자가 이탈을 한다는 사실이 말이죠.
실제로, 이베이에서는 무분별하게 사용되었던 대형 이미지 파일을 최적화해서 페이지 로딩 속도를 개선했고 그 결과, 페이지 로딩 시간이 1초 단축되고 전환율은 7% 증가한 사례가 있습니다. 이 사례를 통해 이미지 최적화 작업이 전환율에 얼마나 효과적인지 알 수 있죠.
이베이의 사례에서 알 수 있듯 쇼핑몰의 로딩 속도는 사용자 경험과 매출에 즉각적으로 영향을 주는 아주 중요한 요소입니다. 그렇기에 쇼핑몰을 운영하는 사업자 분들과 마케터는 웹사이트의 로딩 속도를 최적화하기 위해 다양한 방법을 강구할 필요가 있어요. 지금부터는 쇼핑몰의 로딩 속도를 개선할 수 있는 방법과 그 효과에 대해 설명해볼게요.
6가지 웹사이트 로딩 속도 개선 방법
1. 이미지 해상도 최적화
이미지를 많이 사용하는 쇼핑몰 특성 상 이미지 최적화는 로딩 속도를 빠르게 하기 위한 가장 필수적이면서도 효과적인 방법입니다. 특히 불필요하게 큰 해상도의 이미지 파일을 사용하는 경우도 종종 찾아볼 수 있는데요, 웹 브라우저에서 표현할 수 있는 해상도 이상의 이미지는 로딩 속도만 증가시킬 뿐 큰 효용이 없습니다. 일반적으로 많이 사용하는 가로 1920픽셀 정도의 이미지를 사용하거나 상세페이지로 구분된 영역의 가로 사이즈에 맞춘 해상도를 사용해주세요.
또한 모바일에서는 PC보다 가로 해상도가 더 적기 때문에 모바일 화면에서 사용되는 이미지의 해상도는 별도로 설정해주시는 게 좋습니다. 참고로 최근에는 쇼핑몰 방문자의 90%는 모바일을 통해 방문한다는 점을 알아두세요.
효과: 이미지 해상도 최적화만으로도 웹사이트 로딩 시간을 상당히 단축할 수 있으며, 특히 모바일 환경에서 사용자 경험을 크게 개선할 수 있음
2. 가벼운 이미지 확장자 사용
해상도가 너무 낮은 파일이 아닌 이상, JPEG 확장자는 PNG에 비해 용량이 많이 나가는 편입니다. 당연히 로딩 속도에도 안좋은 영향을 미치겠죠. 그렇기에 이미지 파일은 가급적 PNG 확장자를 사용하는 것이 좋습니다. 최근에는 WebP 같은 보다 가벼우면서도 화질이 좋은 파일 형식이 출현했기 때문에 WebP가 지원되는 브라우저나 쇼핑몰 솔루션에서는 이 형식을 사용해보는 것도 좋은 선택이 될 수 있습니다.
3. 움직이는 이미지 적용 방법
일반적으로 움직이는 영상을 삽입하기 위해서 GIF 확장자를 사용하는 경우가 많습니다. GIF는 가장 많이 사용되는 애니메이션 확장자이지만 프레임을 하나하나 그리는 특성 상 파일의 크기가 커서 로딩 속도에 안좋은 영향을 줄 수 있습니다. 가급적 GIF 대신 스트리밍 되는 동영상을 임베드하세요. 만약 꼭 GIF를 사용해야 한다면 ezgif와 같은 사이트에서 프레임을 줄이거나 해상도를 줄여서 최적화하는 작업이 필요합니다.
효과: GIF 사용을 줄이거나 최적화하면 불필요한 데이터 전송이 줄어들어, 특히 저속 인터넷 환경에서도 웹사이트가 빠르게 로딩됨
4. 긴 이미지는 분할해서 업로드
긴 이미지를 한번에 로딩하려 하면 시간이 오래 걸려 사용자가 제대로 로딩이 되고 있는지 인지하지 못할 수 있습니다. 그렇기에 위아래로 긴 상세페이지 이미지는 통으로 업로드하는 대신 일정 픽셀마다 나눠 여러 개의 작은 파일로 만들어서 올려보세요. 사용자가 먼저 로딩된 이미지를 읽는 동안 나머지 이미지를 로딩할 시간을 벌 수 있습니다.
효과: 브라우저가 이미지를 병렬적으로 불러올 수 있어 전체 로딩 시간이 단축됨
5. 텍스트 위주로 상세페이지 작성하기
가능하다면 상세 페이지의 내용 중 텍스트로 작성할 수 있는 부분은 텍스트로 작성해주세요. 텍스트는 이미지보다 훨씬 가벼우며 로딩 속도에 거의 영향을 주지 않습니다. 또한 텍스트로 작성된 웹페이지는 SEO(검색 엔진 최적화)에도 도움이 되어, 검색 결과에서 더 높은 순위를 차지할 가능성을 높여줍니다. SEO에 도움을 주고 그렇게 유입된 방문자에게 빠르게 콘텐츠를 띄워 체류시간을 높이는 선순환이 발생할 수 있는 것이죠.
효과: 통 이미지 사용을 줄이고 텍스트와 작은 이미지를 활용하면, 상세페이지의 로딩 속도가 빠르게 개선되며, 사용자에게 더 나은 경험을 제공할 수 있음
6. 불필요한 플러그인 및 스크립트 제거
플러그인과 스크립트는 웹사이트에 다양한 기능을 추가할 수 있기 때문에 많이 사용하는 방식 중 하나입니다. 하지만 때때로 오래전에 사용했지만 지금은 사용하지 않는 스크립트가 남아있거나 같은 기능을 하는 플러그인을 여러 개 사용하는 경우를 볼 수 있습니다. 가급적이면 스크립트를 주기적으로 확인하고 필요없거나 사용하지 않는 스크립트를 지워주세요. 실제로 Shopify는 불필요한 스크립트를 제거함으로서 로딩 속도를 20% 단축시킨 사례가 있다고 해요.
효과: 불필요한 플러그인과 스크립트를 제거하면 웹사이트가 가벼워져 로딩이 빨라지고, 보다 안정적인 사용자 경험을 제공할 수 있음
비즈니스가 더 성장하려면 웹사이트 로딩 속도 측정부터 해보세요
고객의 입장에 빙의해서 우리의 웹사이트를 한 번 열어 봅시다. 우리 웹사이트는 얼마나 빠르게 열리나요? 우리 브랜드를 처음 마주하는 고객들에게 좋은 첫 인상을 남기고 있나요?
이제 웹사이트 로딩 속도가 얼마나 중요한지 알게 되었으니, 지금이야말로 우리 웹사이트를 점검하고 개선할 때입니다. 불필요한 요소들이 느리게 만들고 있지는 않은지, 이미지는 최적화되어 있는지, 추가로 개선할 수 있는 부분이 더 있지는 않은지 다시 한번 살펴보세요. 이런 작은 노력이 모여 보다 큰 성장을 이루는 초석이 되어줄 겁니다.
📈 하이퍼컨버전은 전환율 최적화(Conversion Rate Optimization)를 연구하는 뉴스레터입니다
전환율 최적화에 대한 뉴스레터를 받아보시려면 아래 구독 버튼을 눌러 구독해주세요! 👇