오늘은 프론트엔드 면접에서도 단골로 나오고, 실무에서도 시니어와 주니어를 가르는 핵심 역량인 성능 최적화에 대해 이야기해볼게. 많은 신입 개발자들이 포트폴리오에 "Lighthouse 점수 올렸음" 한 줄 적고 끝내는데, 실무에서는 단순히 점수 높은 것보다 실제 사용자 경험을 개선하는 깊이 있는 접근이 필요하거든. 내가 9년 동안 프론트엔드 개발자로 구르며 배운 진짜 실무형 최적화 전략을 세 가지만 콕 집어 알려줄 테니 잘 따라와봐.
1. Lighthouse 점수보다 중요한 'Core Web Vitals'
구글이 제시한 핵심 웹 지표인 LCP(최대 콘텐츠풀 페인트), CLS(누적 레이아웃 이동), INP(다음 페인트에 대한 상호작용)를 제대로 이해하는 게 최적화의 시작이야.
실무에서는 특히 CLS 때문에 골머리를 앓는 경우가 많거든. 이미지가 뒤늦게 로드되면서 화면이 덜컥거리는 현상 말이야. 이걸 막으려면 이미지나 광고 배너 영역에 미리 aspect-ratio나 고정된 높이값을 지정해 둬야 해. 사용자가 버튼을 누르려다 갑자기 레이아웃이 밀려 다른 걸 클릭하는 불상사를 막는 게 진짜 성능 개선이지.
2. 한 번에 다 불러오지 마, 'Lazy Loading'과 코드 분할
사용자가 첫 페이지를 볼 때 굳이 마이페이지나 설정 페이지의 JavaScript 파일까지 다 다운로드받을 필요가 있을까? 전혀 없지.
React를 기준으로 설명하면 React.lazy와 Suspense를 활용해 라우터 단위로 코드를 쪼개는 **코드 분할(Code Splitting)**을 꼭 적용해봐. 초기 번들 크기가 획기적으로 줄어들어서 첫 화면이 뜨는 속도인 LCP가 엄청나게 개선되거든. 이미지도 마찬가지로 화면에 보일 때만 로드되도록 loading="lazy" 속성을 적극적으로 활용하는 습관을 들여야 해.
3. 브라우저의 렌더링 경로(CRP) 최적화하기
브라우저가 HTML, CSS, JS를 받아서 화면에 그리는 과정인 **Critical Rendering Path(CRP)**를 이해하면 성능 최적화의 눈이 완전히 달라져.
렌더링을 방해하는 리소스를 최소화해야 하거든. 무거운 CSS나 JS 파일은 async나 defer 속성을 활용해 비동기로 로드하고, 중요하지 않은 자바스크립체 실행은 requestIdleCallback을 활용해 브라우저가 한가할 때 처리하도록 미루는 것도 실무에서 자주 쓰는 고급 테크닉이야.
💡 핵심 정리
- Core Web Vitals (
LCP,CLS,INP)를 기준으로 사용자 경험을 수치화하고 개선해봐.- 코드 분할과 지연 로딩을 통해 초기 페이로드 크기를 최소한으로 줄여야 해.
- 렌더링 차단 리소스를 제거하고 브라우저의 Critical Rendering Path를 최적화하자. 성능 최적화는 한 번 하고 끝나는 작업이 아니라 서비스 성장과 함께 계속 관리해야 하는 영역이야. 네가 만든 서비스의 로딩 속도를 단 0.1초만 줄여도 이탈률이 줄어들고 매출이 오른다는 걸 꼭 기억했으면 좋겠어. 이 개념들을 네 프로젝트에 직접 적용해보고 면접관에게 수치로 증명해봐, 좋은 결과가 있을 거야!