원문 - 14 web performance tips for 2025
1. 약점을 먼저 파악하라
많은 사람들이 Lighthouse만 보고 잘못된 방향으로 최적화를 시작하는데, 진짜 사용자 데이터(RUM)를 먼저 봐야 함.
🔧 추천 도구:
- TREO: 최근 12개월 데이터
- PageSpeed Insights 상단: 최근 28일 데이터
- CrUX Vis: 상세한 Core Web Vitals 분석 가능
2. 로딩 속도(LCP)를 이해하라
LCP는 뷰포트 내 가장 큰 콘텐츠가 렌더링되는 시점을 측정.
현재 가장 개선하기 어려운 지표 중 하나.
👉 LCP 하위 요소(Subparts) 분석을 통해 원인을 좁혀라.
3. 이미지는 미세 최적화일 뿐이다
많은 개발자들이 이미지 크기 줄이기에 집착하는데, 대부분의 경우 근본 원인이 아님.
1MB 이상의 큰 이미지만 줄이면, 이후에는 렌더링 순서, 크리티컬 렌더링 경로, 블로킹 리소스 등이 더 중요.
📊 "LCP가 나쁜 대부분의 사이트는 LCP 이미지 다운로드에 소요된 시간이 전체의 10% 미만" – Brendan Kenny
4. 레이아웃 이동(CLS)을 이해하라
CLS는 예상치 못한 레이아웃 변화를 측정함. 광고 삽입이나 폰트 교체가 주요 원인.
👉 해결법: 광고 예약 공간 확보, 웹폰트 Swap 설정 등
- 참조: CLS 최적화 가이드
5. 인터랙션(INP)을 이해하라
INP는 사용자 상호작용 후 다음 페인트까지의 시간.
📍 오직 실제 사용자 데이터(RUM)로만 측정 가능
1차적 개선은 JS 정리, 3rd-party 줄이기부터 시작
👉 문제 페이지 탐색 시 RUM 필수
6. 좋은 아키텍처를 선택하라
필요하지 않은 JS 프레임워크 도입은 피하라. 웹 플랫폼 자체를 활용하는 것이 비용·성능 면에서 좋음.
7. 플랫폼을 제대로 이해하라
HTML, CSS로 가능한 것은 JS로 하지 말자.
- 추천 영상:
- Massive JavaScript의 무게
- JS 대신 HTML/CSS 사용하기
Kilian Valkhof, Stop using JS for that:Moving features to CSS and HTML - Youtube 영상 번역 및 정리 okorion's Velog 글
8. 데이터로 아키텍처를 비교하라
CrUX, HTTP Archive로 프레임워크와 테마를 비교해 성능 예측
- 예시: Shopify 테마 비교 도구 Theme Vitals 개발
- 참고글: Liquid vs Headless 분석
9. 전문가에게 배워라
Bluesky에 퍼포먼스 전문가들을 정리한 스타터 팩 있음.
👉 Sia의 퍼포먼스 전문가 목록
10. 퍼포먼스 문화를 만들라
규모가 있다면 내부에 퍼포먼스 담당자를 두는 것이 좋음.
소규모 조직이라면:
- RUM 알림 설정
- CI에서 성능 모니터링
- 외부 컨설턴트 활용도 고려
11. 도움을 요청하라
현대 프론트엔드는 너무 복잡하다. 모든 걸 혼자 하려 하지 말고 전문가의 도움을 받아라.
개발자 시간 100시간 낭비하는 것보다 전문가의 10시간이 효과적일 수 있음.
12. 성능 전문가를 조심하라
스캠 툴, 사기 컨설턴트 조심해야 함.
Lighthouse 점수만 올리는 사기 툴이나 과도한 이미지 최적화로 전환율 떨어뜨리는 사례 존재
- 참고글: Shopify 퍼포먼스 앱 스캠 분석
13. 퍼포먼스의 중요성을 설명하라
속도와 순위 사이의 상관관계는 불분명하지만, 속도가 느리면 이탈률 증가, 전환율 감소는 명확함.
👉 WPO Stats에서 케이스 스터디 참고
14. 자신의 데이터를 활용해 설득하라
실제 사용자 데이터를 바탕으로 성능이 매출에 어떤 영향을 주는지 직접 보여줘라.
- 예시: LCP 증가 → 이탈률 상승, 전환율 감소
👉 비즈니스 KPI와 연결해 설득력 있는 메시지를 만들어라
RUM 이란?
- RUM은 Real User Monitoring의 약자로,
실제 사용자들의 웹사이트 이용 데이터를 수집하고 분석하는 성능 모니터링 방식
📌 핵심 개념 정리
| 구분 | 설명 |
|---|---|
| RUM (Real User Monitoring) | 실제 사용자의 브라우저에서 일어나는 성능 데이터를 수집 |
| 대상 지표 | LCP, CLS, INP 같은 Core Web Vitals 포함 |
| 수집 방식 | 브라우저에서 JavaScript 스니펫이 데이터를 수집해 서버로 전송 |
| 측정 범위 | 실제 사용자 네트워크, 기기, 페이지 별 행동 등 |
🧠 RUM이 중요한 이유
- 실제 상황 반영
- Lab tool(Lighthouse 등)은 좋은 환경에서 측정함
- RUM은 느린 네트워크, 오래된 기기 등 현실에서 일어나는 문제를 포착
- 지속적 모니터링 가능
- 특정 시간, 특정 페이지, 특정 지역에서 발생하는 성능 문제 탐지 가능
- 비즈니스 지표 연계 가능
- 이탈률, 전환율과 같은 KPI와 함께 분석 가능 → 성능 개선이 돈과 직결됨
🧰 대표적인 RUM 도구
| 도구 | 특징 |
|---|---|
| SpeedCurve | UI/UX에 초점, 퍼포먼스 문화 구축에 적합 |
| DebugBear | 디버깅 중심, LCP/INP 등 세부 분석 지원 |
| RUMvision | Shopify와 같은 이커머스용 페이지에 최적화 |
| web-vitals (자체 구축) | Google의 라이브러리로 직접 코드에 삽입 가능 |
| CrUX (Chrome User Experience Report) | Google이 제공하는 공개 RUM 데이터, 도메인 기반 집계 |
📋 요약
RUM은 실제 사용자 기반의 성능 측정 도구로,
랩 환경(Lighthouse 등)이 아닌 현실에서 웹사이트가 어떻게 작동하는지 파악하는 데 필수
