상세페이지 로딩이 3초 넘게 걸리면 손님 절반이 그냥 나갑니다. 뭐부터 고쳐야 할지 몰라 그동안 방치하고 계셨다면, 오늘은 효과가 큰 순서대로 이미지, 폰트, 스크립트를 하나씩 짚어드릴게요.
사장님, 손님 입장에서 우리 쇼핑몰을 한 번이라도 처음 방문하는 것처럼 열어본 적 있으신가요. 저도 처음엔 제 상세페이지가 예쁘게만 보여서 속도는 신경도 안 썼는데, 어느 날 지방 출장 가서 4G로 접속해봤더니 상품 사진 로딩에만 5초 넘게 걸리는 걸 보고 충격을 받았습니다. 요즘은 페이지가 3초 안에 안 뜨면 절반 가까운 방문자가 그냥 이탈한다는 게 정설이고, 특히 모바일에서는 그 기준이 더 엄격해요. 문제는 사장님들이 속도가 느리다는 건 알아도 뭐부터 손대야 할지 몰라서 방치하는 경우가 대부분이라는 거예요. 상세페이지에 붙인 위젯도 많고, 이미지도 많고, 폰트도 바꿨고, 뭘 건드려야 할지 감이 안 잡히거든요. 오늘은 효과가 큰 순서대로 이미지, 폰트, 스크립트를 손보는 실전 순서를 정리해드리겠습니다.
쇼핑몰 페이지 용량의 대부분은 사실 이미지가 차지합니다. 상품 상세페이지 하나에 고화질 사진을 스무 장 넘게 넣는 경우가 흔한데, 각 사진이 2~3MB짜리 원본 그대로 올라가 있으면 그것만으로 페이지 용량이 수십 MB를 넘기기도 해요. 화면에 400px로 보여줄 이미지를 4000px 원본 그대로 올리는 건 트럭에 짐 하나 싣자고 대형 화물차를 부르는 것과 비슷합니다. 실제로 표시될 크기에 맞춰 리사이즈하고, 웹에 최적화된 포맷(웹피 등)으로 저장하는 것만으로도 용량을 절반 이상 줄일 수 있는 경우가 많아요.
또 하나 중요한 게 지연 로딩(레이지 로딩)이에요. 화면에 바로 보이지 않는 아래쪽 이미지는 스크롤해서 도달할 때 불러오도록 설정하면 초기 로딩 속도가 눈에 띄게 빨라집니다. 다만 첫 화면에 바로 보이는 대표 이미지, 즉 랜딩 시 가장 먼저 눈에 들어오는 히어로 이미지는 지연 로딩을 걸면 오히려 역효과가 나니 이건 예외로 두셔야 해요. 아임웹이나 카페24는 업로드 시 자동으로 어느 정도 압축과 웹피 변환을 해주는 경우가 많은데, 그래도 원본 자체가 너무 큰 파일이면 자동 최적화에도 한계가 있으니 업로드 전에 한 번 리사이즈하는 습관을 들이시는 걸 추천드려요.
한글 폰트는 생각보다 용량이 큽니다. 영문 폰트는 알파벳 26자와 기호 몇 개만 담으면 되지만, 한글은 완성형 글자만 11,172자에 달해서 폰트 파일 하나가 수백 KB에서 수 MB까지 쉽게 커져요. 브랜드 감성을 위해 커스텀 폰트를 여러 개 적용하는 경우가 많은데, 굵기별로 Regular, Medium, Bold, ExtraBold 이렇게 네 가지를 다 불러오면 그것만으로도 로딩 부담이 상당히 커집니다.
실전에서는 실제로 쓰는 굵기만 남기고 나머지는 과감히 빼는 게 좋아요. 대부분의 쇼핑몰은 두세 가지 굵기면 충분합니다. 그리고 폰트가 로딩되는 동안 텍스트가 안 보였다가 갑자기 나타나는 현상(먹통 화면)을 막으려면 font-display: swap 속성을 적용해서 기본 폰트로 먼저 보여주고 커스텀 폰트가 로드되면 자연스럽게 바뀌도록 설정하는 게 사용자 경험에 훨씬 좋습니다. 폰트를 CDN에서 불러오는 경우 preload 태그로 우선순위를 높여주는 것도 도움이 되고요.
상세페이지에 리뷰 위젯, 채팅 상담창, 광고 픽셀, 방문자 트래킹 스크립트까지 하나씩 붙이다 보면 어느새 외부 스크립트가 열 개 넘게 걸려있는 경우가 흔해요. 이 스크립트들은 각각 별도의 서버에 요청을 보내고 응답을 기다리기 때문에, 하나하나는 가벼워 보여도 다 더하면 페이지 로딩을 눈에 띄게 늦춥니다. 특히 스크립트가 화면 렌더링을 막는 방식(동기 로딩)으로 걸려 있으면 그 스크립트가 다 끝날 때까지 화면이 멈춰 보이는 경우도 있어요.
해결책은 정말 필요한 위젯만 남기고 정리하는 거예요. 예전에 붙였다가 지금은 안 쓰는 마케팅 도구, 테스트용으로 걸어두고 잊어버린 스크립트가 없는지 한 번 점검해보시길 권합니다. 남겨야 할 스크립트는 defer나 async 속성을 붙여서 화면 렌더링을 막지 않고 백그라운드에서 불러오도록 설정하는 게 좋고요. 채팅 상담 위젯처럼 화면 하단에 떠 있는 것들은 사용자가 스크롤하거나 일정 시간이 지난 뒤에 불러오는 지연 로딩 방식도 고려해볼 만합니다.
| 손볼 요소 | 흔한 문제 | 조치 | 체감 효과 |
|---|---|---|---|
| 상품 이미지 | 원본 그대로 업로드 | 리사이즈 + 웹피 변환 | 매우 큼 |
| 상세페이지 이미지 다수 | 지연 로딩 미적용 | 첫 화면 밖은 레이지 로딩 | 큼 |
| 커스텀 폰트 | 굵기 4종 이상 로딩 | 2~3종으로 축소 | 중간 |
| 폰트 깜빡임 | 텍스트 안 보였다 나타남 | font-display: swap | 중간 |
| 리뷰·채팅 위젯 | 동기 로딩으로 렌더링 지연 | defer/async 적용 | 중간 |
| 안 쓰는 트래킹 스크립트 | 남아있는 테스트 코드 | 제거 | 작음~중간 |
많은 사장님이 스크립트부터 손대려고 하는데, 실제로는 이미지가 페이지 용량의 절반 이상을 차지하는 경우가 대부분이라 이미지부터 정리하는 게 투자 대비 효과가 가장 큽니다. 폰트는 그다음으로 효과가 크고, 스크립트 정리는 세 번째로 봐도 충분해요. 물론 상황에 따라 다를 수 있지만, 순서를 모른 채 이것저것 건드리다 오히려 시간만 쓰고 체감 효과는 못 느끼는 경우를 많이 봤습니다. 제가 상담했던 한 원피스 전문몰은 상세페이지 하나에 사진이 평균 28장씩 들어있었는데, 이미지만 리사이즈하고 웹피로 바꿨을 뿐인데 로딩 시간이 6.4초에서 2.9초로 줄었어요. 그 뒤로 폰트와 스크립트를 손봤을 때는 추가로 0.4초 정도 더 줄어드는 수준이었습니다. 즉 같은 시간을 투자한다면 이미지 쪽에서 훨씬 큰 효과를 볼 수 있다는 뜻이에요.
속도 개선을 시작하기 전에는 반드시 개선 전 상태를 기록해두세요. 구글의 PageSpeed Insights 같은 무료 도구로 현재 점수와 로딩 시간을 캡처해두면, 하나씩 손볼 때마다 어떤 조치가 실제로 효과가 있었는지 비교할 수 있어요. 감으로 "빨라진 것 같다"가 아니라 숫자로 확인하는 습관이 중요해요. 모바일과 PC 점수가 따로 나오니 두 가지 다 캡처해두시고, 특히 방문자 대부분이 모바일이라면 모바일 점수를 기준으로 우선순위를 정하시길 권합니다.
이미지, 폰트, 스크립트를 다 손봤는데도 여전히 느리다면 서버나 호스팅 자체의 문제일 수도 있습니다. 아임웹이나 카페24 같은 플랫폼을 쓰고 있다면 서버 자체는 플랫폼이 관리하니 크게 걱정할 부분은 아니지만, 방문자가 몰리는 세일 기간에 유독 느려진다면 플랫폼 고객센터에 문의해서 트래픽 대응 관련 안내를 받아보시는 것도 방법입니다. 자체 서버를 쓰는 경우라면 CDN 적용 여부를 함께 점검해보세요.
속도 개선은 한 번 하고 끝나는 작업이 아니에요. 새 이미지를 계속 올리고, 새 위젯을 계속 붙이다 보면 어느새 다시 느려지기 마련입니다. 한 달에 한 번 정도는 PageSpeed Insights나 라이트하우스로 점검하는 루틴을 만들어두시는 걸 추천드려요. 특히 신상품 대량 등록 직후나 새 마케팅 위젯을 추가한 직후에는 꼭 한 번 체크해보시길 권합니다. 저는 매달 첫째 주 월요일에 주요 상품 페이지 다섯 개를 골라서 점수를 캡처해두는데, 이렇게 해두면 어느 시점부터 느려졌는지 나중에 원인을 추적하기가 훨씬 쉬워요.
속도가 매출에 미치는 영향을 체감하고 싶다면, 개선 작업 전후로 이탈률이나 전환율 변화를 함께 살펴보세요. 페이지 속도만 따로 떼어놓고 보면 그냥 기술적인 숫자로 느껴지지만, 이탈률이 줄고 전환율이 오르는 걸 확인하면 속도 개선이 왜 중요한지 훨씬 와닿을 거예요. 특히 광고를 태워서 유입을 늘리고 있는 몰이라면 속도 개선의 효과가 더 크게 나타납니다. 어렵게 클릭 한 번 받아온 방문자가 로딩 3초를 못 참고 나가버리면 광고비만 날리는 셈이니, 광고 효율을 올리고 싶다면 속도부터 점검하는 게 순서예요.
속도를 개선했다면 다음은 코어 웹 바이탈 관련 글에서 다루는 LCP, CLS 같은 구체적인 지표로 넘어가서 확인해보시길 권합니다. 속도 개선과 코어 웹 바이탈은 사실상 같은 작업의 다른 측정 방식이에요. 이미지, 폰트, 스크립트를 손보고 나면 자연스럽게 코어 웹 바이탈 점수도 함께 좋아지는 걸 확인하실 수 있을 거예요.