공들여 만든 홈페이지인데, 정작 손님이 주소를 누른 뒤 화면이 하얗게 멈춰 있는 몇 초 동안 무슨 일이 벌어지는지는 아무도 보지 못한다. 그 몇 초 사이에 손님은 이미 뒤로가기를 누르고 옆 가게로 넘어간다. 아무리 예쁜 첫 화면도 떠야 보이는 법이다. 속도는 디자인보다 먼저 손님을 만난다.
왜 '느림'이 매출을 갉아먹는가
사람이 웹페이지를 기다려 주는 시간은 생각보다 짧다. 첫 화면이 뜨는 데 3초를 넘기면 상당수의 손님이 내용을 보기도 전에 이탈한다는 것은 오래된 업계 상식이다. 특히 지하철·엘리베이터·매장 앞처럼 통신이 불안정한 곳에서 휴대폰으로 접속하는 손님일수록 인내심은 더 짧다. 문제는 사장님 본인은 늘 빠른 회사 와이파이로, 이미 저장된 화면을 열기 때문에 이 느림을 영영 체감하지 못한다는 데 있다. 손님만 아는 불편이라 방치되기 쉽다.
원칙 1. 사진 용량부터 줄인다
작은 회사 웹사이트가 느린 이유의 열에 아홉은 사진이다. 카메라나 휴대폰으로 찍은 원본은 한 장에 5MB를 훌쩍 넘기는데, 화면에는 그 절반 크기로도 충분히 선명하게 보인다. 업로드 전에 실제 표시될 크기(예: 가로 1600px)로 줄이고, 화질 손실이 거의 없는 WebP 같은 최신 형식으로 바꾸면 용량이 흔히 5분의 1로 떨어진다. 사진 스무 장짜리 페이지라면 이 작업 하나로 로딩이 눈에 띄게 가벼워진다.
원칙 2. 지금 안 보이는 것은 나중에 부른다
손님이 처음 보는 것은 첫 화면 한 장뿐인데, 브라우저는 페이지 맨 아래 사진까지 한꺼번에 내려받느라 시간을 쓴다. 화면에 들어올 때가 되어서야 이미지를 불러오는 지연 로딩(lazy loading)을 켜 두면, 첫 화면은 먼저 뜨고 아래 콘텐츠는 손님이 스크롤하는 만큼만 따라온다. 요즘 브라우저는 이미지 태그에 속성 한 줄만 더해도 이 기능이 동작한다. 긴 페이지일수록 효과가 크다.
원칙 3. 첫 화면은 가볍게, 무거운 건 뒤로
화려한 자동 슬라이드, 여러 벌의 웹폰트, 지도·채팅·SNS 같은 외부 위젯은 저마다 남의 서버에 접속해 파일을 받아 온다. 이 짐이 첫 화면을 붙잡으면 손님은 흰 화면을 더 오래 본다. 정말 첫눈에 필요한 요소만 위에 두고, 나머지는 페이지가 뜬 뒤에 조용히 붙게 미루는 것이 좋다. 특히 글꼴은 한두 종으로 줄이고 굵기도 꼭 쓰는 것만 남기면 체감 속도가 달라진다.
원칙 4. 속도를 '느낌'이 아니라 '숫자'로 본다
빠르다·느리다는 감이 아니라 측정할 수 있다. 구글이 무료로 제공하는 PageSpeed Insights에 주소를 넣으면 휴대폰·PC별 점수와 함께 '무엇이 느린지'를 콕 짚어 준다. 그중 첫 화면의 가장 큰 요소가 뜨는 시간을 뜻하는 LCP 값을 2.5초 아래로 두는 것이 하나의 기준이다. 손보기 전과 후의 점수를 비교하면, 어떤 작업이 실제로 효과가 있었는지 확인하며 개선할 수 있다.
원칙 5. 서버와 호스팅도 속도의 일부다
페이지를 아무리 다듬어도 그 파일을 건네주는 서버가 굼뜨면 소용이 없다. 방문자에게 가까운 곳에서 사본을 대신 내려 주는 CDN과, 한 번 만든 화면을 재활용하는 캐시는 요즘 호스팅에서 어렵지 않게 켤 수 있다. 지나치게 저렴한 공용 호스팅에 사이트가 몰려 있으면 남의 트래픽에 내 속도가 끌려가기도 하니, 방문이 늘었는데 자꾸 느려진다면 호스팅 등급부터 점검할 일이다.
속도는 한 번이 아니라 습관이다
홈페이지 속도는 개통할 때 한 번 맞춰 두면 끝나는 것이 아니라, 사진이 쌓이고 위젯이 붙으면서 조금씩 다시 느려진다. 그래서 몇 달에 한 번은 측정해 보는 습관이 필요하다. CYAN 에이전시는 사이트를 만들 때부터 이미지 최적화와 지연 로딩, 캐시 설정을 기본으로 잡고, 넘겨드린 뒤에도 속도 점수를 함께 살펴본다. 예쁜 첫 화면이 손님에게 제때 도착하는 것까지가 웹사이트의 완성이라고 보기 때문이다.
