나이지리아 핀테크 플랫폼에서 페이지 로드 시간을 30% 단축한 방법
Source: Dev.to
소개
성능은 종종 Lighthouse 점수와 Core Web Vitals로 이야기되지만, 신흥 시장의 많은 사용자에게 성능은 단순한 기술 지표 그 이상입니다.
나이지리아에서는 상당수 사용자가 중급 Android 기기와 불안정한 모바일 네트워크를 통해 금융 애플리케이션에 접근합니다. 대시보드가 로드되는 데 추가로 1초가 더 걸리면 신뢰도, 참여도, 거래 완료에 영향을 미칠 수 있습니다.
핀테크 플랫폼에서 작업하면서 가장 자주 사용되는 고객용 인터페이스 중 하나의 성능을 개선하라는 과제를 받았습니다. 목표는 간단했습니다: 기능을 희생하지 않으면서 로딩 시간을 줄이는 것. 일련의 프론트엔드 최적화를 거친 결과 페이지 로드 시간이 약 30 % 감소했으며, 느린 연결을 사용하는 고객들의 사용자 경험이 크게 향상되었습니다.
문제점
애플리케이션은 시간이 지나면서 여러 성능 병목 현상을 축적했습니다:
- 초기 렌더링 시 로드되는 대용량 JavaScript 번들 – 느린 네트워크를 사용하는 사용자는 인터페이스와 상호작용하기 전에 눈에 띄는 지연을 겪었습니다.
최적화 단계
단계 1: 최적화 전에 측정하기
변경을 가하기 전에 Chrome DevTools Performance Panel을 이용해 기준선을 잡았습니다. 목표는 가정에 의존하지 않고 실제 병목을 파악하는 것이었습니다. 분석 결과, 서버 응답 시간보다 JavaScript 실행과 불필요한 네트워크 요청이 지연에 더 큰 영향을 미치는 것으로 나타났습니다.
단계 2: 라우트 기반 코드 스플리팅 적용
가장 큰 개선 중 하나는 초기 로드 시 다운로드되는 JavaScript 양을 줄인 것이었습니다. 모든 대시보드 컴포넌트를 한 번에 전달하는 대신, 라우트 기반 지연 로딩을 도입했습니다:
import { lazy } from "react";
const Dashboard = lazy(() => import("./Dashboard"));결과: 초기 번들 크기가 작아지고 첫 페인트가 빨라졌습니다.
단계 3: 비핵심 컴포넌트 지연 로드
페이지가 로드될 때 바로 보이지 않는 대시보드 섹션이 여러 개 있었습니다. 사용자가 해당 영역에 가까워질 때(예: 분석 위젯) 두 번째 컴포넌트를 로드하도록 지연시켰습니다. 이는 중요한 렌더링 경로에서 수행되는 작업을 크게 줄였습니다.
단계 4: API 호출 감소
프론트엔드에서 관련 데이터를 위해 여러 번 요청을 보내고 있었습니다(예: 사용자 프로필을 별도로 호출). 백엔드 팀과 협업해 관련 데이터를 하나의 API 응답으로 통합했습니다.
이점: 네트워크 오버헤드 감소와 라운드‑트립 횟수 감소.
단계 5: smarter 캐싱 구현
자주 변하지 않는 데이터가 반복적으로 요청되고 있었습니다. 클라이언트‑사이드 캐싱 전략을 도입해 불필요한 재요청을 없앴고, 중복 네트워크 요청을 방지해 애플리케이션 전반의 탐색 속도를 향상시켰습니다.
단계 6: 이미지 및 자산 최적화
대용량 자산은 숨겨진 성능 비용이 될 수 있습니다. 히어로 이미지를 압축 기법으로 최적화했습니다. 비교적 작은 용량 감소라도 느린 연결에서는 눈에 띄는 개선을 가져왔습니다.
얻은 교훈
- 최적화 전에 측정 – 데이터가 의사결정을 이끌어야 합니다; 감사를 통해 예상치 못한 병목을 발견하게 됩니다.
- 인지된 성능이 중요 – 사용자는 추상적인 지표보다 반응 속도에 더 민감합니다.
- 신흥 시장은 다른 우선순위를 요구 – 저대역폭 최적화가 고성능 디바이스를 대상으로 한 최적화보다 더 큰 영향을 미칩니다.
- 프론트엔드 성능은 비즈니스 문제 – 빠른 경험은 사용자 만족도, 참여도, 유지율을 높입니다.
마무리 생각
신흥 시장을 위한 디지털 제품을 만들 때는 기능성과 효율성 사이의 균형을 맞춰야 합니다. 신중한 프론트엔드 최적화는 느린 연결을 사용하는 사용자들의 경험을 크게 개선시켜, 궁극적으로 비즈니스 목표 달성에 기여합니다.