손님은 화면이 뜨는 3초를 못 견디고, 다 뜨기도 전에 뒤로 가기를 누른다 — 작은 회사 웹사이트 로딩 속도 최적화의 5가지 원칙

웹사이트 로딩 속도 최적화

홈페이지를 정성껏 만들어 놓고도 손님을 놓치는 가장 흔한 이유는 디자인도 문구도 아닌 속도다. 화면이 뜨기까지 3초가 넘어가면 손님의 절반 가까이는 내용을 보기도 전에 뒤로 가기를 누른다. 특히 데이터를 아껴 쓰는 모바일 손님에게 느린 홈페이지는 '준비가 덜 된 가게'처럼 느껴진다. 광고비를 들여 어렵게 데려온 손님을 로딩 화면에서 흘려보내지 않으려면, 다음 다섯 가지를 챙겨야 한다.

1. 이미지부터 줄인다

느린 홈페이지의 열에 아홉은 이미지가 원인이다. 스마트폰으로 찍은 사진을 그대로 올리면 한 장이 5MB를 넘기도 하는데, 화면에는 그만한 크기가 필요하지 않다. 실제로 보여지는 폭에 맞춰 크기를 줄이고, JPG·PNG 대신 용량이 훨씬 작은 WebP 포맷으로 바꾸면 화질은 그대로 두고도 용량을 절반 이하로 낮출 수 있다.

2. 지금 필요한 것만 먼저 불러온다

손님이 처음 보는 건 페이지 맨 위 일부다. 그런데 한참 스크롤해야 나오는 사진까지 한꺼번에 불러오면 첫 화면이 늦게 뜬다. 지연 로딩(lazy loading)을 적용해 이미지가 화면에 들어올 때 불러오게 하면, 손님이 처음 마주하는 장면이 눈에 띄게 빨라진다.

3. 안 쓰는 짐을 덜어낸다

빌더로 만든 사이트일수록 화려한 슬라이더, 애니메이션, 여러 벌의 웹폰트, 채팅·통계 같은 외부 스크립트가 겹겹이 얹혀 있다. 하나하나는 작아 보여도 모이면 로딩을 붙잡는다. 손님에게 실제로 쓸모 있는 기능만 남기고 나머지를 과감히 정리하는 것만으로도 체감 속도가 달라진다.

4. 서버와 손님 사이 거리를 좁힌다

같은 홈페이지라도 어디에 올려두느냐에 따라 속도가 갈린다. 값싼 공용 호스팅은 접속이 몰리면 느려진다. 캐싱으로 한 번 불러온 파일을 재사용하게 하고, CDN을 붙여 손님과 가까운 위치에서 파일을 내려주면 지역·시간대와 상관없이 고르게 빨라진다.

5. 느낌이 아니라 숫자로 확인한다

'빠른 것 같다'는 느낌만으로는 고칠 수 없다. 구글이 무료로 제공하는 PageSpeed Insights에 주소만 넣으면 점수와 함께 무엇이 발목을 잡는지 짚어 준다. 첫 화면이 뜨는 시간(LCP)과 화면이 덜컹거리는 정도(CLS) 같은 핵심 지표를 기준으로 삼으면, 어디부터 손볼지 우선순위가 분명해진다.

정리하며

속도 최적화는 한 번 크게 손보고 끝나는 일이 아니라, 이미지 한 장을 올릴 때마다 챙기는 습관에 가깝다. 그래도 무엇부터 손대야 할지 막막하다면, 지금 쓰는 홈페이지의 속도를 한 번 측정해 보는 데서 시작하면 된다. CYAN 에이전시는 홈페이지를 만들 때부터 이미지 최적화와 캐싱을 기본으로 설계해, 손님이 기다리다 떠나는 일이 없도록 속도까지 함께 챙긴다.