속도는 빠른데도 손님이 떠나는 사이트가 있다. 첫 화면은 1초 만에 떴는데, 정작 메뉴를 누르고 다음 페이지가 열리기까지 다시 한 박자를 기다려야 하는 경우다. 그 짧은 공백이 쌓이면 고객은 "느린 사이트"로 기억한다. 최근 브라우저에 들어온 Speculation Rules API는 이 문제를 자바스크립트 한 줄 짜지 않고 푸는 새로운 방식이다.
로딩은 기다림이 아니라 신뢰의 문제다
사람은 0.1초 안에 반응하면 '즉각적'이라고 느끼고, 1초가 넘어가면 흐름이 끊겼다고 느낀다. 페이지를 누른 뒤 흰 화면을 보는 시간이 길어질수록 이탈률은 가파르게 오른다. 작은 회사일수록 이 한 번의 답답함이 곧 이탈로, 이탈이 곧 매출 손실로 이어진다.
Speculation Rules가 일하는 방식
예전에는 다음 페이지를 미리 불러오려면 자바스크립트 라이브러리를 깔고 마우스 움직임을 추적하는 코드를 붙여야 했다. Speculation Rules는 이 모든 과정을 선언적인 규칙 하나로 대체한다. 페이지에 어떤 링크를 미리 준비할지 적어두기만 하면, 브라우저가 알아서 사용자가 누르기 전에 다음 화면을 준비해 둔다.
prefetch와 prerender의 차이
- prefetch: 다음 페이지의 데이터를 미리 내려받아 둔다. 누르는 순간 네트워크 대기 시간이 사라진다.
- prerender: 다음 페이지를 보이지 않는 곳에서 통째로 미리 그려둔다. 누르면 이미 완성된 화면이 즉시 나타난다.
가벼운 사이트라면 자주 눌리는 핵심 링크 몇 개만 prerender로 지정해도 체감 속도가 확 달라진다.
작은 회사 사이트에 적용하는 법
- 전환과 직결된 경로부터: 메인에서 '서비스 소개', '문의하기'처럼 고객이 반드시 거치는 페이지를 우선 지정한다.
- 욕심내지 않기: 모든 링크를 미리 그리면 서버와 데이터가 낭비된다. 방문 흐름이 뚜렷한 링크만 고른다.
- 분석 왜곡 점검: 미리 불러온 페이지가 방문수로 잘못 잡힐 수 있으니, 통계 도구가 실제 조회와 구분하는지 확인한다.
아직은 '있으면 좋은' 기능이다
Speculation Rules는 지원하지 않는 브라우저에서는 그냥 무시될 뿐, 사이트가 깨지지는 않는다. 즉 적용해서 손해 볼 일이 거의 없는 안전한 속도 개선책이다. 다만 모든 환경에서 똑같이 빨라지는 건 아니므로, 기본적인 이미지 최적화나 서버 응답 속도 같은 토대를 먼저 다진 뒤 얹는 것이 순서다.
이런 최신 웹 기술은 화려한 기능보다 '고객이 느끼는 1초'를 줄이는 데 진짜 가치가 있다. CYAN은 작은 회사의 사이트를 만들 때도 이렇게 눈에 띄지 않지만 체감을 바꾸는 디테일을 함께 챙긴다. 우리 사이트의 다음 페이지가 손님을 기다리게 하고 있진 않은지, 한 번 점검해 볼 시점이다.