Foresite 추적 스크립트는 약 1.1KB다

Foresite는 자사 추적 스크립트가 gzip 압축 후 약 1.1KB라고 소개한다. 파비콘보다 작다는 설명이다.

이 스크립트는 사이트 방문 데이터를 기록하는 도구다. 기존 분석 도구가 페이지를 느리게 만드는지 확인하고 더 가벼운 대안을 찾는 사이트 운영자라면 비교해 볼 수 있다.

이 스크립트는 무엇이 다른가?

웹 분석 스크립트는 페이지에 붙이는 추가 짐에 빗대면 이해하기 쉽다. 방문자가 내려받는 파일 크기뿐 아니라 화면 표시를 늦추거나 브라우저가 탭과 스크롤에 반응하는 시간을 차지할 수 있다. Foresite는 이런 부담을 줄이기 위해 스크립트를 작게 만들고, 페이지 표시를 막지 않도록 설정했다고 설명한다.

스크립트가 페이지를 늦추는 경로는 네 가지다. 첫째, 파일을 방문자마다 내려받아야 한다. 사무실의 빠른 유선망에서는 부담이 작아 보여도 신호가 약한 모바일 환경에서는 다운로드 시간이 길어질 수 있다. 둘째, HTML의 <head>에 일반 <script src> 태그를 넣으면 파일을 내려받고 실행할 때까지 브라우저가 화면을 그리는 작업을 멈출 수 있다.

셋째, 브라우저는 스크립트를 메인 스레드(페이지 동작과 사용자 입력을 처리하는 실행 흐름)에서 실행한다. 스크립트가 실행되는 동안 페이지는 탭에 응답하지 못할 수 있다. 태그 관리자, 동의 팝업, 클릭과 스크롤을 기록하는 세션 녹화 도구가 함께 있으면 중간급 휴대전화에서도 수백 밀리초 동안 바쁠 수 있다.

넷째, 서버와 주고받는 추가 요청이 생긴다. 휴대전화에서는 왕복 한 번에 0.1초가 걸릴 수 있다. 새 도메인에 접속하려면 주소 조회(DNS), 연결(TCP), 암호화 설정(TLS)을 거쳐야 한다. 다른 사이트로 데이터를 보내는 브라우저 규칙인 교차 출처 리소스 공유(CORS)도 관련된다. 사용자 지정 헤더가 붙은 요청은 먼저 허가를 묻는 OPTIONS 요청을 보낸다. 이를 사전 요청(preflight)이라 하며, 기록하는 이벤트마다 왕복 횟수를 두 배로 늘릴 수 있다.

내 사이트의 분석 스크립트는 얼마나 무거운가?

크롬에서 사이트를 열고 페이지를 오른쪽 클릭해 ‘검사’를 선택한다. 개발자 도구의 네트워크 탭으로 이동한 뒤 페이지를 새로고침한다. 네트워크 탭은 페이지가 내려받는 파일과 요청을 보여준다.

1. 분석 도메인으로 필터링하고 전송됨(Transferred) 열의 크기를 합산한다. 스크립트가 추가로 불러온 파일도 포함한다.
2. 스크립트 태그에 defer 또는 async가 있는지 확인한다. 둘 다 파일을 내려받는 동안 브라우저가 페이지를 계속 만들게 한다. 둘 다 없으면 페이지 표시를 막을 수 있다.
3. OPTIONS 요청을 찾는다. 각각 사전 요청이며, 추가 왕복을 만든다.
4. 개발자 도구 탭에서 크롬의 페이지 속도 점검 도구인 Lighthouse를 실행한다. “타사 코드의 영향 줄이기” 항목에서 외부 서버에서 불러온 스크립트의 크기와 메인 스레드 사용 시간을 확인할 수 있다.

그다음 네트워크 탭의 속도 제한을 Slow 4G로 설정하고 다시 확인한다. 이 설정은 크롬이 연결 상태가 약한 모바일 환경인 것처럼 동작하게 한다. 책상에서 공유기 가까이 접속할 때보다 방문자의 환경을 가늠하는 데 도움이 된다.

Foresite가 밝힌 크기와 조건은?

Foresite는 고객이 Webflow, Squarespace, WordPress 사이트를 운영하며 Lighthouse를 자주 확인한다고 설명한다. 회사는 페이지 용량을 줄이는 것을 추적 스크립트의 핵심 기준으로 삼았다고 밝혔다. 공개된 스크립트는 약 1.1KB이며, 이는 서버에서 전송할 때 적용되는 gzip 압축 기준이다. 의존성은 없고 TypeScript 약 140줄로 구성된다.

스크립트는 defer로 불러와 페이지 렌더링을 막지 않는다. 페이지 조회마다 요청을 하나만 보내며 사전 요청도 발생하지 않도록 구성했다. 데이터 전송에는 fetch를 사용하고 사용자 지정 헤더 없이 일반 텍스트를 보내 CORS의 단순 요청으로 처리한다. keepalive: true 설정은 페이지가 닫힌 뒤에도 브라우저가 전송을 마치도록 한다. 태그 관리자와 쿠키는 사용하지 않는다.

스크립트는 오픈소스 저장소에서 공개됐다. 테스트는 읽기 좋게 정리한 원본이 아니라 공백을 없애고 이름을 줄인 실제 서버 전송용 코드로 실행된다고 Foresite는 설명한다.

현재 쓰는 분석 도구를 유지한다면 제작자는 태그에 defer를 추가하는 것을 가장 간단한 속도 개선 방법으로 제안한다. async도 다운로드 중 페이지가 계속 만들어지게 하지만, 파일이 도착하는 즉시 실행되어 화면을 그리는 도중 작업을 끊을 수 있다. defer는 페이지가 만들어진 뒤 실행된다. Lighthouse에서 분석 스크립트가 무거운 외부 코드로 표시되면, 페이지 조회 수와 방문 유입 경로, 전환율을 넘어 실제로 쓰는 기능이 무엇인지 살펴볼 만하다.

Foresite는 독립적인 비교 측정 결과나 다른 분석 도구와 같은 조건에서 비교한 수치는 밝히지 않는다. 사용 전에는 자신의 사이트에서 네트워크 탭과 Lighthouse로 전송량과 메인 스레드 사용 시간을 확인하는 편이 좋다.