손님은 3초를 못 넘겨 떠나는데 첫 화면은 아직도 그리는 중이다 — 작은 회사 웹사이트 로딩 속도를 끌어올리는 5가지 원칙

공들여 만든 홈페이지인데 손님은 왜 들어오자마자 떠날까. 디자인이 나빠서가 아니라, 첫 화면이 뜨기까지 걸리는 몇 초를 손님이 기다려 주지 않기 때문인 경우가 의외로 많다. 특히 휴대폰 데이터로 접속한 손님은 로딩이 3초를 넘기면 절반 가까이가 그냥 창을 닫는다. 속도는 눈에 안 보이지만 매출에는 또렷이 새겨진다. 큰돈 들이지 않고 작은 회사가 실천할 수 있는 다섯 가지 원칙을 정리한다.

1. 무거운 이미지부터 다이어트시킨다

느린 사이트의 원인은 열에 아홉이 이미지다. 카메라나 휴대폰으로 찍은 사진은 한 장에 5MB를 훌쩍 넘기기도 하는데, 화면에는 그 절반 해상도면 충분하다. 업로드 전에 실제 표시 크기로 줄이고, JPG·PNG 대신 WebP로 저장하면 화질은 그대로 두고 용량을 60~80%까지 덜어낼 수 있다. 첫 화면에 5MB짜리 배경 사진 한 장을 까는 순간, 다른 최적화는 다 소용이 없어진다.

2. 눈에 보이는 화면을 가장 먼저 그린다

손님이 처음 보는 건 화면 맨 위 한 뼘뿐인데, 브라우저는 페이지 끝자락 이미지까지 붙잡고 있느라 정작 첫 화면을 늦게 띄운다. 화면 밖 이미지에는 지연 로딩(loading="lazy")을 걸어 스크롤이 닿을 때 불러오도록 미루면, 손님은 첫 한 뼘을 훨씬 빨리 만난다. 반대로 첫 화면 대표 이미지는 우선 로딩으로 지정해 가장 먼저 뜨게 해야 한다.

3. 안 쓰는 스크립트와 플러그인을 걷어낸다

슬라이더 하나, 채팅 위젯 하나, 방문자 분석 도구 하나씩 붙이다 보면 어느새 손님 브라우저가 남의 코드 열 뭉치를 내려받고 실행하느라 버벅인다. 지금 실제로 쓰는 기능만 남기고, 한 해 넘게 안 건드린 스크립트와 플러그인은 과감히 제거하자. 특히 외부 광고·추적 스크립트는 내 서버가 아무리 빨라도 그쪽이 느리면 화면 전체를 붙잡는다.

4. 한 번 받은 파일은 다시 받지 않게 한다

로고, 글꼴, 공통 스타일처럼 페이지마다 똑같이 쓰이는 파일을 손님이 페이지를 옮길 때마다 새로 내려받는다면 낭비다. 브라우저 캐싱을 켜서 한 번 받은 파일은 손님 기기에 저장해 두고 재사용하게 하면, 두 번째 페이지부터는 눈에 띄게 빨라진다. 서버 설정 한 줄, 혹은 CDN을 붙이는 것만으로 해결되는 경우가 많다.

5. 느낌이 아니라 숫자로 측정한다

"빨라진 것 같다"는 착각을 걷어내려면 숫자가 필요하다. 구글 PageSpeed Insights나 크롬 개발자도구로 로딩 시간과 점수를 재고, 손볼 곳을 콕 짚어 하나씩 고친 뒤 다시 측정하자. 내 사무실 빠른 와이파이가 아니라, 손님이 실제로 쓰는 느린 휴대폰 환경을 기준으로 봐야 진짜 문제가 보인다.

속도는 한 번의 공사가 아니라 습관이다

이미지를 줄이고, 안 보이는 건 미루고, 군더더기를 걷어내고, 캐싱을 켜고, 숫자로 확인한다 — 이 다섯 가지만 지켜도 대부분의 작은 회사 사이트는 눈에 띄게 가벼워진다. 다만 사진을 새로 올릴 때마다, 기능을 하나 붙일 때마다 속도는 다시 야금야금 무거워지기 마련이다. CYAN 에이전시는 사이트를 만들 때부터 이미지 자동 최적화와 캐싱을 기본값으로 심어 두고, 만든 뒤에도 속도가 처지지 않도록 정기 점검으로 관리한다. 손님이 떠나기 전에, 화면이 먼저 도착하게 하는 일이 우리가 가장 먼저 챙기는 일이다.