-cropped.png&w=256&q=75)
프론트엔드 성능 최적화에서 가장 먼저 점검할 핵심 요소
프론트엔드 성능 최적화를 시작할 때 가장 먼저 확인할 지표와 병목을 정리합니다. LCP, INP, CLS, 번들 크기, 이미지 최적화 우선순위를 설명합니다.
-cropped.png&w=3840&q=75)
알레오 개발자 이야기팀
Jul 16, 2026 · 11분 읽기
프론트엔드 성능 최적화에서 가장 먼저 점검할 핵심 요소
요약: 프론트엔드 성능 최적화는 복잡한 기법보다 우선순위 설정이 중요합니다. 먼저 LCP, INP, CLS 같은 핵심 웹 지표를 확인하고, 실제 병목으로 자주 이어지는 이미지 용량, 초기 번들 크기, 첫 화면 렌더링 지연을 점검해야 합니다. 이후 React 렌더링 구조, 모바일 체감 속도, 배포 전 체크리스트까지 연결하면 성능을 일회성이 아니라 지속적으로 관리할 수 있습니다.
프론트엔드 성능 최적화를 시작할 때 먼저 볼 기준
핵심은 사용자 체감 구간을 먼저 찾는 일입니다
프론트엔드 성능 최적화는 모든 지표를 동시에 건드리는 작업이 아닙니다. 먼저 사용자가 어디에서 느리다고 느끼는지 확인해야 합니다. 실무에서는 다음 세 가지가 가장 먼저 문제로 드러나는 경우가 많습니다.
- 첫 화면이 늦게 보이는 경우
- 버튼을 눌렀는데 반응이 늦는 경우
- 화면이 그려진 뒤 레이아웃이 흔들리는 경우
이 세 구간을 가장 잘 보여주는 기준이 핵심 웹 지표입니다.
가장 먼저 확인할 지표: LCP, INP, CLS
LCP
LCP는 사용자가 첫 화면의 주요 콘텐츠를 언제 볼 수 있는지 보여주는 지표입니다. 첫 인상이 느린지 판단할 때 가장 먼저 확인할 만한 기준입니다.
인터뷰 답변 기준으로, 실제 한 프로젝트에서는 LCP가 4초를 넘으면서 첫 화면 체감 속도가 느리게 나타났습니다. 이 구간을 우선 개선한 뒤 이탈률도 함께 낮아졌습니다.
INP
INP는 클릭, 탭, 입력 같은 상호작용에 화면이 얼마나 빠르게 반응하는지 보는 지표입니다. 사용자는 버튼을 눌렀는데 바로 반응이 없을 때 성능 저하를 크게 느낍니다. 특히 모바일에서는 같은 지연도 더 크게 체감될 수 있습니다.
CLS
CLS는 화면이 로딩되는 과정에서 요소가 얼마나 흔들리는지 측정합니다. 첫 화면이 늦지 않아도 배너, 이미지, 폰트 때문에 레이아웃이 밀리면 사용성은 떨어질 수 있습니다.
Lighthouse 점수보다 먼저 봐야 할 것
성능 점수는 참고 자료로 유용합니다. 다만 점수가 높다고 사용자가 반드시 빠르게 느끼는 것은 아닙니다. 특정 기기, 모바일 네트워크, 실제 사용 흐름에서는 다른 결과가 나올 수 있습니다.
따라서 우선순위는 다음 순서가 적절합니다.
- 사용자가 실제로 기다리는 구간 파악
- LCP, INP, CLS 확인
- 해당 지표를 악화시키는 원인 추적
- 같은 조건에서 개선 전후 비교
실무에서 가장 먼저 발견되는 병목 2가지
1. 이미지 용량 문제
실무에서는 첫 화면에 큰 이미지를 여러 장 배치하는 경우가 자주 있습니다. 이 경우 네트워크 전송 시간과 렌더링 지연이 함께 발생해 LCP가 나빠지기 쉽습니다.
우선 점검할 항목은 다음과 같습니다.
- 첫 화면 이미지 개수
- 원본 이미지 용량
- 적절한 포맷 사용 여부
- 실제 표시 크기보다 과도하게 큰 파일 사용 여부
