사진 용량을 줄였는데도 첫 화면이 한 박자 늦게 뜬다면, 문제는 이미지 하나가 아니다. 손님은 화면이 그려지는 그 1~2초를 기다리지 않고 뒤로가기를 누른다. 속도는 손님이 가장 먼저, 그러나 말없이 평가하는 항목이다. 작은 회사 웹사이트가 체감 속도를 끌어올리는 다섯 가지 원칙을 정리했다.
1. 속도는 '느낌'이 아니라 숫자로 본다
내 컴퓨터, 내 인터넷에서 빠르다고 손님에게도 빠른 것이 아니다. 먼저 객관적인 숫자부터 확인해야 한다. 구글 PageSpeed Insights에 주소만 넣으면 모바일·데스크톱 점수와 함께 핵심 지표를 무료로 보여준다.
- LCP(가장 큰 콘텐츠가 뜨는 시간): 2.5초 이내가 목표
- INP(클릭·입력에 반응하는 속도): 끊김 없이 즉각 반응하는지
- CLS(화면이 갑자기 밀리는 정도): 누르려던 버튼이 도망가지 않는지
고칠 곳을 짐작으로 찾지 말고, 이 숫자가 나쁜 항목부터 손대는 것이 가장 빠른 길이다.
2. 첫 박자는 서버와 호스팅이 정한다
아무리 가벼운 페이지도 서버가 굼뜨면 손님은 빈 화면부터 마주한다. 주소를 누른 뒤 서버가 첫 응답을 보내기까지의 시간(TTFB)이 길다면 호스팅 환경을 의심해야 한다. 저가 공용 호스팅에 트래픽이 몰리면 응답이 느려지고, 손님과 서버의 물리적 거리가 멀어도 마찬가지다. 방문자가 늘었다면 더 나은 사양으로 옮기거나, 전 세계에 사본을 두는 CDN을 붙여 손님과 가장 가까운 곳에서 페이지를 내보내는 편이 효과가 크다.
3. 한 번 받은 것은 다시 받지 않게 한다
같은 손님이 다음 페이지로 넘어갈 때마다 로고와 글꼴, 스타일 파일을 처음부터 다시 내려받는다면 매번 같은 짐을 새로 지는 셈이다. 브라우저 캐시를 켜 두면 한 번 받은 파일을 손님 기기에 저장해 두었다가 재사용한다. 여기에 서버에서 파일을 압축해 보내는 gzip·brotli 설정까지 더하면, 같은 내용을 훨씬 가벼운 용량으로 전달할 수 있다. 둘 다 코드를 새로 짜는 일이 아니라 서버 설정 한 번으로 끝난다.
4. 무거운 스크립트와 위젯을 덜어낸다
속도를 갉아먹는 진짜 범인은 사진이 아니라, 욕심껏 붙인 외부 기능인 경우가 많다. 채팅 상담창, 팝업, 통계 추적 코드, 슬라이드·애니메이션 라이브러리가 쌓일수록 페이지는 무거워진다.
- 지금 안 쓰는 플러그인·위젯은 과감히 뺀다.
- 당장 화면에 안 보이는 아래쪽 이미지는 지연 로딩으로 손님이 내려올 때 불러온다.
- 외부 스크립트는 페이지가 다 그려진 뒤 실행되도록 미뤄 첫 화면을 막지 않게 한다.
5. 글꼴과 화면 흔들림을 잡는다
마지막은 손님 눈에 거슬리는 '체감 속도'다. 한글 웹폰트가 늦게 떠 제목이 깜빡 바뀌거나, 사진이 뒤늦게 자리를 차지하며 본문을 아래로 밀어내면(CLS) 빠른 사이트도 어수선해 보인다. 글꼴은 핵심 굵기만 골라 가볍게 싣고, 글꼴이 늦어도 글자가 먼저 보이도록 설정한다. 이미지와 광고 영역에는 미리 자리(가로·세로 크기)를 잡아 두어 콘텐츠가 갑자기 튀지 않게 한다.
속도는 한 번 손보면 끝나는 일이 아니다
로딩 속도는 이미지, 서버, 캐시, 스크립트, 글꼴이 함께 만드는 결과다. 한 군데만 손봐서는 체감이 잘 바뀌지 않고, 새 기능을 더할 때마다 조금씩 다시 느려진다. CYAN은 사이트를 만들 때부터 이 다섯 가지를 기본값으로 잡고, 운영 중에도 핵심 지표를 주기적으로 점검해 손님이 기다리지 않는 페이지를 유지한다. 우리 사이트가 손님 휴대폰에서 정말 빠른지 한 번도 재본 적이 없다면, 점수 측정부터 시작해 보길 권한다.