네이버 통합검색 FE 성능 관리 시스템 핵심 요약

✅ 네이버 통합검색 FE 성능 관리 시스템 핵심 요약

📌 1. 핵심 성능 지표: LCP 중심 체계

• LCP (Largest Contentful Paint): 가장 큰 콘텐츠(이미지, 텍스트 등)가 화면에 완전히 나타나는 데 걸리는 시간.

• 네이버는 글로벌 기준보다 더 보수적인 p95 ≤ 2.5초 기준으로 관리.

• 2024년 기준 성능:
• LCP p95 = 2.31초
• LCP Good Score = 96.59%

📌 2. 기존 Web Vitals로 측정되지 않는 영역 확장

🔹 FUPP (Feed User Perceived Performance)

• 무한 스크롤형 서치피드에서 콘텐츠 인지 타이밍을 측정.

• API 요청 시점 ~ 주요 이미지가 화면에 뜨는 시간.

🔹 FILT (Feed Image Load Timing)

• 피드 이미지 로딩 시점 구분:

📌 3. 실시간 성능 모니터링 & 리포트 자동화

• 성능 리포트: 매주/매월 생성, 배포 전후 비교.

• 성능 알람: 실시간 데이터 기반.
• 과거: 1분 단위 비교 → 오탐 많음
• 현재: 과거 5분 평균 vs 최근 3분 평균 → 노이즈 최소화

📌 4. 성능 개선 사례 요약

• JS 로딩 시점 변경
• 기존: onLoad 이후
• 개선: DOMContentLoaded + 30ms
• 결과: LCP 150ms 개선, 오류 10~15% 감소

• 이미지 로딩 방식 변경
• background-image → <img> 태그로
• LCP 30% 개선

• egjs/Flicking 성능 개선
• margin-left → transform: translateX()로 변경 → GPU 가속
• 이미지도 background → img로 변경

🧩 개발자로서의 시사점

• 단순 렌더링 개선이 아닌, 사용자 체감 기반 지표(LCP, INP, FUPP 등) 중심의 개선 경험 필요

• 실험 → 측정 → 분석 → 개선 사이클 경험 강조

• egjs처럼 직접적인 사용자 인터랙션 처리 성능에 대한 이해도 중요

📘 Web Vitals & 성능 최적화 개념 질문 정리

❓ 0. LCP란?

• Largest Contentful Paint

• 사용자가 페이지에 들어왔을 때, **가장 큰 콘텐츠(이미지, 텍스트 등)**가 화면에 완전히 보일 때까지 걸리는 시간

• 즉, 사용자가 “아, 페이지 떴다”라고 인지할 수 있는 시점을 수치화한 것

❓ 1. 상위 5%가 뭘 대상으로 하는 거야? 속도?

• 맞아. LCP, INP 등 속도 지표를 대상으로 해

• 예: LCP p95 = 2.3초 → 상위 5%를 제외한 대부분 사용자는 2.3초 안에 콘텐츠를 봤다는 뜻

❓ 2. p75 기준 시계열 추적이 뭐야?

• 시계열 추적 = 시간 흐름에 따라 성능 지표가 어떻게 변했는지를 그래프로 관찰

• 예: 하루 동안의 LCP p75를 시계열로 확인 → 성능 저하 시점이나 개선 시점 파악 가능

❓ 3. 이미지 로딩 시점 4단계 (FILT 지표)

❓ 4. 피드 호출 위치에 따른 ABT 실험이 뭐야?

• *A/B Test (ABT)**를 통해, 사용자가 화면 하단에 도달하기 몇 px 전에 피드를 불러오는 게 최적인지 실험

• 너무 빨리 호출 → 서버 낭비

• 너무 늦게 호출 → UX 저하

• 결과: 600~1,000px 전이 최적

❓ 5. “5분 vs 3분 구간 비교로 오탐률 줄임” 뜻?

• 이전: 1분 전 vs 현재 → 민감해서 오탐이 많음

• 개선: 과거 5분 평균 vs 최근 3분 평균을 비교
→ 일시적 스파이크 무시, 지속적 변화만 감지

❓ 6. onLoad vs DCL, 그리고 “DCL 이후 30ms” 뜻?

• DCL 이후 30ms는 성능과 안정성 사이의 균형 지점
→ JS 로드를 너무 일찍 하면 오류, 너무 늦으면 느림

❓ 7. background-image보다 img 태그가 빠른 이유?

❓ 8. margin-left vs transform 차이와 GPU 가속 이유?

❓ 9. 렌더링 개선 vs 수치 기반 성능 개선 차이

❓ 10. egjs란?

• NAVER에서 만든 JavaScript UI 유틸리티 오픈소스

• Flicking, View360, Axes 등 다양한 상호작용 및 제스처 처리용 툴킷

• 디자인 시스템은 아님 (예: Polaris, Arco처럼 스타일/규칙 관리하는 건 아님)

⚡ 하드웨어 가속(Hardware Acceleration)이란?

💡 정의

원래 CPU가 처리하던 그래픽/시각 연산을 GPU에게 넘겨 더 빠르게 처리하는 방식

🧠 왜 쓰는가?

🎯 웹에서 GPU가 쓰이는 예시

• transform: translateX(...)

• opacity

• will-change: transform

• canvas, WebGL

🎬 transform이 빠른 이유

• margin-left: 레이아웃 변경 발생 → reflow

• transform: 레이아웃 계산 없이 GPU에서 layer만 이동 → 부드러운 애니메이션

🔁 비유로 설명

CPU = 일반 사무직 / GPU = 디자이너

• CPU만 쓸 경우 → 모든 작업을 혼자 → 느림

• GPU에게 그래픽 전담시키면 → 효율적, 빨라짐