프론트엔드 성능 최적화는 단순히 “사이트가 빨리 뜨면 좋다” 정도의 문제가 아니다. 이는 비즈니스, SEO, 그리고 궁극적으로 사용자가 느끼는 만족도에까지 깊숙이 연관되어 있다. 사이트가 느리면 이탈률이 높아지고, 이는 매출 감소나 브랜드 이미지 훼손으로 이어질 수 있다. 반면, 페이지가 빠르고 안정적이면 검색 순위에서 우위를 점할 수 있고, 사용자 경험(UX) 또한 크게 향상된다.
이번 글에서는 프론트엔드 성능 최적화의 중요성과 함께, 그 핵심 지표인 Core Web Vitals(LCP, CLS, FID)와 새롭게 주목받는 INP(Interaction to Next Paint)에 대해 정리한다. 또한, 이 지표들을 어떻게 측정하고 개선할 수 있는지 구체적인 방법을 공유하며, Next.js나 React 같은 프레임워크 환경에서 적용할 수 있는 방법도 살펴본다.
왜 프론트엔드 성능 최적화를 해야 할까?
비즈니스 관점에서 페이지가 한참 걸려 로딩된다면, 사용자는 금방 지쳐서 사이트를 이탈하게 된다. 이탈률이 높아지면 전환율(가입, 구매 등)이 떨어지고, 결국 매출에도 악영향을 미치게 된다. 반면 로딩이 빠르면 “이 사이트, 뭔가 잘 만들어졌구나”라는 신뢰감이 생기고 전환율이 올라가는 긍정적인 효과가 나타난다.
SEO 관점에서도 동일하다. Google은 페이지의 로딩 속도, 안정성, 상호작용성을 평가하여 검색 순위에 반영한다. 성능을 잘 최적화하면 검색 결과 상위에 노출될 가능성이 커지고, 더 많은 방문자를 유입할 수 있다.
마지막으로 사용자 경험(UX) 관점에서, 느리고 답답한 페이지보다 빠르고 부드러운 페이지가 선호된다. 페이지가 순식간에 뜨고, 클릭이나 스크롤 시 즉각 반응한다면 사용자는 편안하고 즐겁게 사이트를 이용할 수 있다.
핵심 지표: Core Web Vitals와 INP
LCP (Largest Contentful Paint)
LCP는 사용자가 “아, 이 페이지가 제대로 로드되기 시작했구나”라고 인식하는 결정적인 순간을 보여준다. 보통 히어로 이미지나 큰 타이틀 등이 화면에 나타나는 시간을 측정한다. 이 시간이 너무 길면 “언제 뜨지?”라는 답답함을 느끼게 된다.
CLS (Cumulative Layout Shift)
CLS는 콘텐츠가 갑자기 ‘툭툭’ 튀면서 이동하는 현상을 수치화한 지표이다. 예를 들어, 이미지 로딩 시 레이아웃이 밀리거나 광고가 갑자기 삽입되어 버튼이 움직이는 경험을 하게 된다. 레이아웃 이동이 클수록 사용자에게 불쾌한 인상을 주게 된다.
FID (First Input Delay)
FID는 사용자가 페이지에서 첫 번째로 상호작용(클릭, 탭 등)을 시도할 때 브라우저가 반응하기까지 걸리는 시간을 측정한다. 아무리 페이지가 빨리 뜬다고 해도, 클릭 후 반응이 늦다면 사용자는 여전히 페이지가 느리다고 인식하게 된다.
INP (Interaction to Next Paint)
INP는 최근 Google이 FID의 대안으로 제시한 지표이다. 페이지 전체 수명 동안 발생하는 모든 상호작용을 평가하며, 스크롤이나 버튼 클릭 등 여러 번의 상호작용 중 가장 느린 반응 시간을 기준으로 한다. 페이지가 초기 로딩 후에도 계속 빠르고 부드럽게 반응하는지를 측정하기 때문에 앞으로 더욱 중요한 지표로 자리 잡을 것이다.
어떻게 측정할까? – WebPageTest, PageSpeed Insights, web-vitals JS
성능 지표를 정확히 파악하기 위해 여러 가지 툴을 활용한다.
-
WebPageTest
사이트 URL만 입력하면 서버 응답부터 리소스 로딩 과정까지 상세히 분석해준다. 네트워크 상태나 브라우저 종류를 세밀하게 설정할 수 있어 실제 사용자 환경에 가까운 테스트를 진행할 수 있다. -
PageSpeed Insights
Google에서 제공하는 무료 툴이다. 모바일과 데스크톱 각각에 대해 성능 점수를 산출하고, Core Web Vitals를 비롯한 세부 지표와 개선 가이드를 제시한다. 실제 사용자 데이터(Field Data)와 실험실 데이터(Lab Data)를 모두 제공하므로 참고하기 좋다. -
web-vitals JS
Google이 공개한 자바스크립트 라이브러리이다. LCP, CLS, FID, INP 같은 핵심 지표를 실제 사용자 환경에서 수집할 수 있도록 해준다. 사이트에 스크립트를 삽입하면 방문자의 브라우저에서 자동으로 데이터를 수집하여 Google Analytics나 다른 분석 서버로 전송해 실사용자 경험을 모니터링할 수 있다.
웹 바이탈을 개선하는 방법
LCP 최적화
- 가장 큰 요소(히어로 이미지 등)가 빠르게 로드되도록 해야 한다. 예를 들어, 메인 배너 이미지를
<img>태그로 직접 삽입하고<link rel="preload" as="image">를 사용하여 우선 로드한다. - 서버 사이드 렌더링(SSR) 또는 정적 페이지 생성(SSG)을 통해 초기 로딩 시간을 줄인다.
- 이미지는 필요한 크기만큼 불러오고, WebP나 AVIF 같은 최신 포맷을 사용해 용량을 줄인다.
- CDN을 사용해 지리적으로 가까운 서버에서 리소스를 서빙하면 TTFB(Time To First Byte)가 단축된다.
CLS 최적화
- 예기치 않은 화면 이동을 최소화하기 위해 로딩 전에도 레이아웃이 잡혀 있어야 한다. 이를 위해
<img>태그에width,height또는aspect-ratio를 지정해 미리 공간을 확보한다. - 광고나 동적 콘텐츠 삽입 시, 갑자기 화면 한가운데 들어오지 않도록 컨테이너 높이를 미리 설정한다.
- 웹 폰트 로딩 시, 폰트가 늦게 나타나거나 크기가 바뀌어 텍스트가 튀는 현상을 막기 위해
font-display: swap속성을 사용한다.
FID 및 INP 최적화
- FID는 첫 클릭 반응 속도를, INP는 전체 상호작용 반응 속도를 평가한다. 결국 메인 스레드를 오래 점유하는 자바스크립트 실행을 줄이는 것이 핵심이다.
- 코드 스플리팅을 통해 페이지별, 기능별로 JS 번들을 나누면 불필요한 코드가 초기 로딩 시 불러와지지 않아 첫 클릭 반응 속도가 개선된다.
- 롱 태스크(50ms 이상 걸리는 태스크)가 있다면
requestIdleCallback이나requestAnimationFrame등을 사용하여 잘게 분할하고, 무거운 계산 로직은 Web Workers로 옮겨 메인 스레드 부담을 줄인다. - React에서는
useCallback,useMemo와 같은 훅을 사용해 불필요한 재연산이나 재렌더링을 방지한다.
Next.js, React에서 성능을 높이는 방법
React나 Next.js와 같은 프레임워크를 사용할 때는 다음과 같은 도구들을 활용할 수 있다.
-
SSR & SSG
Next.js에서 제공하는getServerSideProps(SSR)나getStaticProps(SSG)를 사용하면 초기 HTML을 미리 렌더링할 수 있어 첫 화면 표시가 빨라진다. 특히 정적 페이지는 CDN에 캐싱되므로 TTFB가 크게 개선된다. -
코드 스플리팅 & Dynamic Import
Next.js의next/dynamic이나 React의React.lazy를 사용하면 필요한 시점에만 해당 컴포넌트를 로드할 수 있다. 예를 들어, 잘 사용하지 않는 대시보드나 모달을 초기 로딩 시 모두 불러올 필요가 없다. -
Next.js의
<Image>컴포넌트
이 컴포넌트는 자동으로 적절한 사이즈의 이미지를 생성하고, WebP 변환 및 lazy loading을 지원한다. LCP나 CLS 개선에도 효과적이며, 특히 히어로 이미지에priority속성을 지정하여 우선 로드할 수 있다. -
메모화와 최적화 훅
React에서React.memo,useMemo,useCallback을 사용하면 불필요한 렌더링을 줄여 CPU 자원을 아낄 수 있다. 복잡한 리스트 렌더링이나 무거운 계산이 포함된 컴포넌트는 메모화를 통해 성능을 최적화할 수 있다. -
번들 압축과 캐싱
번들을 GZIP 혹은 Brotli로 압축하여 전송하면 네트워크 전송량이 크게 줄어든다. 또한 Cache-Control 헤더나 ETag 설정을 통해 재방문 시 브라우저가 캐싱된 파일을 사용하게 하면 체감 속도가 크게 개선된다.
결국 프론트엔드 성능 최적화는 한 번에 끝나는 작업이 아니라 측정 → 개선 → 재측정의 반복적 프로세스이다. 처음에는 WebPageTest나 PageSpeed Insights로 지표를 확인한 후, 수정 작업을 진행하고 다시 테스트해 어떤 부분이 개선되었는지 점검해야 한다. 실제 사용자 환경 데이터를 보려면 web-vitals JS와 같은 라이브러리를 활용해 RUM(Real User Monitoring)을 진행할 수 있다.
앞으로 INP가 Core Web Vitals의 주요 지표로 자리 잡게 되면 초기 로딩뿐 아니라 “페이지 전체 수명 동안의 상호작용” 품질까지 꼼꼼히 신경 써야 한다. 이런 변화는 부담으로 다가올 수도 있으나, 결과적으로 사용자가 사이트를 이용하는 모든 순간이 쾌적해진다는 점에서 큰 의미가 있다. 사이트가 빠르고 안정적이라는 것은 그 자체로 경쟁력이며, 매출, SEO, 그리고 사용자 만족도 모든 면에서 긍정적인 영향을 미친다. 다음 웹 프로젝트를 진행할 때는 꼭 Core Web Vitals와 INP 지표를 점검하고, 위에서 소개한 다양한 최적화 방법을 하나씩 적용해 보기를 권장한다.
참고문헌
- Google Web.dev – Core Web Vitals
https://web.dev/vitals/
Core Web Vitals(LCP, CLS, FID) 및 INP에 대한 공식 문서이다.
- MDN Web Docs – Performance
https://developer.mozilla.org/en-US/docs/Web/Performance
웹 성능 최적화의 기본 개념과 브라우저 렌더링 프로세스를 설명한다.
-
Google Chrome Developers – Optimize LCP
https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/
LCP 최적화 방법에 대한 공식 가이드이다. -
Google Chrome Developers – Optimize CLS
https://developer.chrome.com/docs/lighthouse/performance/cumulative-layout-shift/
CLS 방지 및 개선 방법을 설명한다. -
Google Chrome Developers – Optimize INP
https://developer.chrome.com/docs/lighthouse/performance/interaction-to-next-paint/
INP 성능 측정 및 최적화 방법을 안내한다. -
Next.js 공식 문서 – Image Optimization
https://nextjs.org/docs/api-reference/next/image
Next.js의<Image>컴포넌트를 통한 이미지 최적화 방법을 소개한다. -
Next.js 공식 문서 – Performance Optimization
https://nextjs.org/docs/advanced-features/measuring-performance
Next.js에서 성능을 측정하고 최적화하는 다양한 방법을 설명한다. -
React 공식 문서 – Optimizing Performance
https://react.dev/learn/optimizing-performance
React에서 불필요한 렌더링을 줄이는 최적화 기법을 다룬다. -
React 공식 문서 – Code Splitting
https://react.dev/learn/code-splitting
React에서 코드 스플리팅을 통한 초기 로딩 속도 개선 방법을 설명한다. -
Lighthouse – Google 개발자 도구
https://developer.chrome.com/docs/lighthouse/overview/
웹사이트의 성능을 측정하고 최적화 기회를 파악할 수 있는 도구이다. -
CDN 사용 및 성능 최적화 가이드 (Cloudflare)
https://www.cloudflare.com/learning/cdn/what-is-a-cdn/
CDN을 활용한 TTFB 단축 및 전반적인 성능 최적화 방법을 제공한다. -
Google Chrome Dev Summit – 웹 성능 최적화 전략
https://www.youtube.com/watch?v=Mv-l3-tJgGk
Google 개발자가 직접 설명하는 최신 웹 성능 최적화 기법이다.
