홈페이지 속도를 손보자고 하면 대개 이미지부터 줄입니다. 사진을 WebP로 바꾸고, 쓰지 않는 스크립트를 걷어내고, 폰트를 정리합니다. 그런데 그렇게 다 줄여 놓고도 첫 화면이 여전히 한 박자 늦게 뜨는 사이트가 있습니다. 파일이 무거워서가 아니라, 파일을 내려받기 시작하기까지가 오래 걸리기 때문입니다.
문제는 용량이 아니라 '기다리는 구간'입니다
브라우저가 주소를 누른 순간부터 화면에 무언가 그려지기까지, 실제 다운로드 전에 조용히 흘러가는 시간이 있습니다. 도메인 주소를 찾고(DNS), 서버와 연결을 트고(TCP), 보안 악수를 나누고(TLS), 그제서야 HTML을 요청합니다. 서버는 그 HTML을 만드느라 또 잠시 생각합니다. 이 모든 게 끝나야 브라우저는 "아, CSS랑 폰트가 필요하구나"를 처음 알게 됩니다.
즉 서버가 답을 준비하는 동안 브라우저는 아무것도 못 하고 놀고 있습니다. 이미지 몇 백 KB를 줄이는 것보다 이 빈 구간을 없애는 쪽이 체감 속도에 더 크게 작용하는 경우가 많습니다.
HTTP/3 — 악수를 한 번에 끝내는 연결
HTTP/3는 기존의 TCP 대신 QUIC이라는 방식 위에서 돕니다. 실무적으로 달라지는 건 두 가지입니다. 첫째, 연결과 암호화 협상을 묶어서 처리해 왕복 횟수가 줄어듭니다. 서버가 지구 반대편에 있거나 모바일 네트워크처럼 지연이 큰 환경일수록 차이가 벌어집니다. 둘째, 파일 하나가 늦어져도 나머지가 함께 멈추지 않습니다. 지하철에서 신호가 출렁일 때 유독 사이트가 통째로 얼어붙던 현상이 완화됩니다.
여기에 연결 유지라는 특성이 하나 더 붙습니다. 손님이 카페 와이파이에서 나와 LTE로 넘어가도 연결을 처음부터 다시 맺지 않습니다. 모바일 유입이 대부분인 작은 회사 사이트에서는 은근히 체감되는 부분입니다.
좋은 소식은 이게 개발 작업이 아니라 설정이라는 점입니다. 대부분의 CDN과 클라우드 호스팅은 HTTP/3를 스위치 하나로 켤 수 있게 해 뒀습니다. 이미 켜져 있는지는 브라우저 개발자도구 네트워크 탭에서 프로토콜 열을 열어 h3가 찍히는지만 보면 됩니다.
103 Early Hints — "본문은 아직인데, 이것부터 받아 두세요"
더 흥미로운 쪽은 103 Early Hints입니다. 이름 그대로 '이른 힌트'입니다. 서버가 HTML을 다 만들기 전에, 먼저 짧은 쪽지를 하나 보냅니다. "본문은 아직 준비 중이지만, 어차피 이 CSS랑 이 폰트는 필요할 테니 지금부터 받아 두세요."
브라우저는 그 쪽지를 받고 곧바로 스타일시트와 폰트를 내려받기 시작합니다. 서버가 DB를 뒤지고 페이지를 조립하는 그 몇 백 밀리초 동안, 예전 같으면 놀고 있었을 시간에 이미 절반쯤 일을 해 두는 셈입니다. 서버 응답이 느린 사이트일수록 이득이 큽니다. 역설적이지만, 백엔드가 굼뜬 사이트가 가장 크게 덕을 봅니다.
도입도 부담이 적습니다. 아직 모든 브라우저가 103을 해석하는 건 아니지만, 이해하지 못하는 브라우저는 그냥 이 쪽지를 무시하고 지나갑니다. 깨지는 게 아니라 예전처럼 동작할 뿐입니다. 주요 CDN들이 토글 하나로 제공하고 있어, 켜 두고 지켜보는 식으로 접근해도 무리가 없습니다.
오늘 당장 할 수 있는 한 줄
HTTP/3도 Early Hints도 결국 호스팅 환경에 달린 이야기입니다. 그 전에, 코드 한 줄로 비슷한 효과를 보는 방법이 있습니다.
- preconnect — 폰트 서버, 분석 도구, 결제 스크립트처럼 반드시 부를 게 뻔한 외부 도메인에 미리 연결을 터 둡니다. 나중에 실제로 부를 때 악수 과정이 이미 끝나 있습니다.
- dns-prefetch — 주소 조회만이라도 앞당깁니다. 지원 범위가 넓어 보험처럼 함께 넣어 둡니다.
- 남발 금지 — 연결도 자원입니다. 정말 쓰는 곳만 서너 개 이내로 잡는 게 좋습니다. 열 줄씩 붙여 두면 오히려 느려집니다.
어디까지 챙기고, 어디서 멈출까
정리하면 순서는 이렇습니다. ① 쓰지 않는 외부 스크립트를 먼저 걷어내고 ② preconnect로 꼭 필요한 연결만 앞당기고 ③ 호스팅·CDN에서 HTTP/3를 켜고 ④ Early Hints를 켜서 전후를 비교합니다. ①과 ②를 건너뛴 채 ③, ④만 켜는 건 새는 독에 물을 더 빨리 붓는 일에 가깝습니다.
측정은 꼭 같이 하셔야 합니다. 켜기 전후로 서버 첫 응답까지 걸리는 시간과 첫 화면이 그려지는 시점을 재 두면, 효과가 있었는지 기분이 아니라 숫자로 말할 수 있습니다. 여기서 "우리는 사실 이미지가 문제였구나" 하고 방향이 뒤집히는 경우도 꽤 많습니다.
이 영역의 일은 화려하지 않습니다. 잘해 봐야 손님은 "그냥 좀 빠르네" 정도로만 느낍니다. 다만 그 '그냥 좀 빠르네'가 이탈률과 검색 순위에 조용히 반영됩니다. CYAN도 사이트를 새로 만들 때든 이미 있는 사이트를 손볼 때든 이 연결 구간부터 먼저 재 보는 편입니다. 이미지를 줄이기 전에, 애초에 기다리고 있던 시간이 얼마인지부터 확인해 보시길 권합니다.
