홈페이지 속도를 점검하고 접속 경로를 바꾼 이유
코드를 개선한 뒤에도 FINCTA 홈페이지 접속이 느린 이유를 살폈습니다. 같은 환경에서 Cloudflare 경유와 Vercel 직접 연결의 응답 시간을 비교하고, 측정 결과를 바탕으로 접속 경로를 바꾼 과정을 기록합니다.
이 글의 목차
지난해 12월, FINCTA 홈페이지의 FCP(First Contentful Paint)가 4.5초까지 늘어나는 문제를 발견하고 성능 개선 작업을 진행했습니다.
당시에는 초기 JavaScript 번들, 인증 처리, 페이지 렌더링 구조를 개선했습니다. 그 결과 FCP를 2~3초대로 줄일 수 있었습니다.
그런데 최근 홈페이지를 이용하면서 다시 이상한 점을 발견했습니다.
서버는 서울에 있고, 페이지 구성도 이전보다 가벼워졌는데 간혹 접속이 지나치게 느렸습니다.
이번에는 홈페이지 코드가 아니라 네트워크 연결 경로부터 확인했습니다.
서울 서버에 접속하는데 왜 미국을 거칠까?
FINCTA 홈페이지는 Vercel을 이용하고 있으며, 서버는 서울 리전(icn1)에서 운영하고 있습니다.
그런데 실제 네트워크 경로를 분석하니 Cloudflare를 거치는 과정에서 미국 로스앤젤레스와 샌프란시스코를 경유하는 현상이 확인되었습니다.
기존 경로
한국 사용자
↓
Cloudflare 미국 경유
↓
Vercel 및 서울 서버
↓
응답 반환
직접 연결
한국 사용자
↓
Vercel 서울 서버
↓
응답 반환
국내 사용자에게 국내 서버에서 제공하는 홈페이지인데, 요청이 해외를 경유하면서 불필요한 지연이 발생하고 있었습니다.
처음에는 코드나 서버가 문제라고 생각했습니다
이전에도 홈페이지 코드의 문제로 성능이 저하된 경험이 있었기 때문에 이번에도 서버 응답이나 JavaScript 번들을 먼저 의심했습니다.
하지만 측정 결과는 달랐습니다.
비로그인 상태에서 서버에 직접 접속하면 대부분의 페이지가 약 0.07~0.25초 안에 응답했습니다.
홈페이지 JavaScript 파일 크기도 압축 기준 약 235KB로, 이번 지연을 설명할 정도로 크지는 않았습니다.
서버 자체의 응답은 충분히 빨랐습니다.
Cloudflare를 거치느냐에 따라 속도가 달랐습니다
동일한 PC와 인터넷 환경에서 Cloudflare를 경유하는 경우와 Vercel에 직접 연결하는 경우를 비교했습니다.
각각 8회 측정한 중앙값은 다음과 같았습니다.
| 항목 | Cloudflare 경유 | Vercel 직접 | | --- | --- | --- | | 홈페이지 첫 응답 | 1.215초 | 0.133초 | | 서비스 페이지 첫 응답 | 1.227초 | 0.075초 |
홈페이지의 첫 응답은 약 9배, 서비스 페이지는 약 16배 차이가 났습니다.
JavaScript 파일을 내려받는 과정에서도 차이가 확인되었습니다.
특히 Cloudflare 경유 요청 45회 중 5회는 15초 이상 소요됐고, 1회는 접속에 실패했습니다.
물론 특정 PC와 인터넷 회선에서 진행한 측정이므로 모든 방문자에게 같은 지연이 발생한다고 볼 수는 없습니다.
다만 적어도 이번 측정 환경에서는 Cloudflare를 경유하는 네트워크 경로가 성능 저하의 주요 원인으로 나타났습니다.
그래서 접속 경로를 변경했습니다
기존에는 Cloudflare의 프록시를 통해 홈페이지 요청을 전달했습니다.
이번에는 해당 경유 구간을 제외하고 Vercel에 직접 연결하도록 DNS 설정을 변경했습니다.
변경 전
방문자 → Cloudflare 프록시 → Vercel
변경 후
방문자 → Vercel
단순히 중간 서버를 하나 줄이는 작업처럼 보일 수 있지만, 실제로는 캐시와 보안 기능에도 영향을 줄 수 있는 변경입니다.
따라서 Vercel의 도메인 설정과 기존 DNS 레코드, Cloudflare에서 사용하던 기능을 함께 확인해야 했습니다.
이번 작업은 홈페이지 화면이나 콘텐츠를 변경하지 않고 접속 경로 자체를 개선하는 데 목적을 뒀습니다.
지난해에는 코드, 이번에는 네트워크였습니다
지난해 12월에는 처음 화면에 필요하지 않은 JavaScript와 컴포넌트를 줄였습니다.
이번에는 서버에 도착하기 전 발생하는 지연을 확인했습니다.
같은 홈페이지 속도 문제라도 원인은 전혀 달랐습니다.
사용자 요청
↓
네트워크 경로 ← 이번 개선
↓
서버 응답
↓
JavaScript 다운로드
↓
브라우저 렌더링 ← 지난해 개선
↓
화면 표시
성능을 개선하려면 느린 부분을 추측해서 수정하기보다, 어느 구간에서 시간이 소요되는지 측정하는 과정이 먼저라는 점을 다시 확인했습니다.
고객분들에게 생기는 차이
FINCTA 홈페이지에는 세무정보와 업종별 회계 및 세무, 실무해설 등 다양한 자료가 축적되고 있습니다.
방문자가 여러 자료를 검색하고 비교하는 과정에서 페이지마다 응답이 지연된다면 필요한 정보를 확인하는 데 불편이 생깁니다.
이번 개선은 이러한 불필요한 네트워크 지연을 줄여 보다 원활한 접속 환경을 제공하기 위한 작업입니다.
지금의 생각
홈페이지를 직접 개발하고 운영하다 보면 새로운 기능이나 콘텐츠를 추가하는 일에 집중하기 쉽습니다.
하지만 이미 만들어 둔 기능이 안정적이고 빠르게 작동하는지도 그만큼 중요합니다.
특히 이번에는 홈페이지 내부의 코드가 아닌 외부 네트워크 연결에서 문제가 발생했습니다.
아직 긴 글의 MDX 컴파일, 일부 이미지 용량, 로그인 사용자에 대한 데이터 조회 등 추가로 점검해야 할 부분도 남아 있습니다.
앞으로도 실제 측정 결과를 바탕으로 개선이 필요한 부분을 하나씩 정리할 계획입니다.
이재황
대표 세무사