프런트엔드 성능을 최적화하는 주요 방법은 무엇인가요?

Question

IT Interview Practice · Accepted Answer

**사용자 여정에서 실제로 느린 부분을 개선하고 효과를 측정합니다.** 작은 번들은 경험이나 관련 비용을 개선할 때 의미가 있습니다.

평범한 휴대폰에서 상품 페이지를 열면 주 이미지가 늦게 보이고 옵션 선택도 지연된다고 합시다. 로딩과 상호작용은 다른 문제라 한 가지 최적화로 둘 다 해결되지 않을 수 있습니다.

## 1. 대표 측정으로 증상을 확인합니다

제품에 중요한 여정, 기기, 네트워크를 고릅니다. 실제 사용자 측정으로 영향받는 집단을 찾고 통제된 브라우저 시험으로 재현합니다. 강력한 개발 노트북은 고객의 지연을 숨길 수 있습니다.

- LCP는 가장 큰 가시 콘텐츠가 렌더링되는 시점을 측정해 로딩 경험 평가를 돕습니다.
- INP는 방문 중 사용자 상호작용의 응답성을 나타냅니다.
- CLS는 이미지가 나타나며 내용이 밀리는 등 예상치 못한 레이아웃 이동을 측정합니다.

이 [Core Web Vitals](https://web.dev/articles/vitals)는 경험의 서로 다른 면을 설명합니다. 옵션 선택과 장바구니 추가 같은 실제 과제와 함께 봐야 숫자 개선이 고장 난 동작을 가리지 않습니다.

## 2. 중요한 콘텐츠를 늦추는 원인을 찾습니다

자원이 발견되고 다운로드되고 완료되는 시간표인 요청 워터폴을 확인합니다. 상품 주 이미지는 JavaScript와 API 요청이 끝나야 로딩을 시작할 수도 있습니다.

```text
HTML -> JavaScript -> Product API -> Main image
```

이미지 압축은 다운로드를 돕지만 일찍 발견하게 하면 앞선 대기를 줄일 수 있습니다. 적절하면 서버 렌더링이나 정적 생성으로 초기 HTML에 유용한 상품 내용을 넣습니다. 최신성, 서버 비용, 상호작용에 여전히 필요한 JavaScript도 확인합니다.

## 3. 불필요한 전송과 실행을 줄입니다

핵심 경로를 이해한 뒤 현재 화면에 도움 되지 않는 작업을 제거합니다. 모든 기법을 무차별 적용하기보다 측정한 지연과 연결된 변경을 우선합니다.

- 알맞은 크기와 형식의 이미지를 제공합니다. 화면 밖 이미지는 지연 로딩하되 사용자가 기다리는 주 이미지는 늦추지 않습니다.
- 경로나 기능별로 코드를 나눠 상품 화면이 쓰지 않는 관리 화면까지 로딩하지 않게 합니다.
- 불필요한 의존성을 제거하고 네트워크와 메인 스레드를 모두 쓰는 외부 스크립트를 검토합니다.
- 적절한 텍스트 응답을 압축하고 버전 있는 정적 자산을 캐시합니다. 개인 데이터에는 별도 안전 정책을 둡니다.

작은 파일도 브라우저에서 파싱하고 실행해야 합니다. 성공이라고 판단하기 전에 네트워크와 CPU 영향을 함께 확인합니다.

## 4. 상호작용 지연의 원인을 고칩니다

옵션 선택이 늦다면 스크립트와 렌더링을 주로 담당하는 메인 스레드를 프로파일링합니다. 긴 계산은 파일을 모두 받은 뒤에도 응답을 막습니다.

긴 작업을 나누거나 적절한 계산을 워커로 옮깁니다. 자주 바뀌는 입력은 불필요한 요청을 줄이고 오래된 응답이 새 선택을 덮지 않게 합니다. 메모이제이션은 장식처럼 넣지 말고 반복 계산이 비싸다고 측정됐을 때 사용합니다.

긴 목록은 보이는 부분만 렌더링하면 작업을 줄일 수 있지만 키보드 탐색과 접근성을 유지합니다. 이미지와 늦게 오는 콘텐츠의 공간을 확보해 화면 점프를 막습니다. 각 변경이 다른 증상을 해결하므로 원래 문제에 맞춰 검증합니다.

## 5. 변경 뒤 전체 여정을 확인합니다

같은 통제 시험을 반복한 뒤 출시 후 실제 사용자 결과를 봅니다. 성능뿐 아니라 상품 기능 정확성, 키보드 접근, 장바구니 완료, 늘어난 백엔드 부하도 확인합니다.

중요 자원에 현실적인 예산을 두고 회귀를 감시합니다. 실제 고객이 기다리거나 과제를 못 끝내면 좋은 실험실 점수만으로는 부족합니다. **최종 결과는 전후 측정으로 뒷받침되는 빠르고 안정적이며 사용할 수 있는 여정이어야 합니다.**

1. 대표 측정으로 증상을 확인합니다

2. 중요한 콘텐츠를 늦추는 원인을 찾습니다

3. 불필요한 전송과 실행을 줄입니다

4. 상호작용 지연의 원인을 고칩니다

5. 변경 뒤 전체 여정을 확인합니다

관련 질문