2025년을 위한 프런트엔드 성능 최적화 핵심 노하우
이미지를 압축하고 최적화하기
웹페이지가 느린 가장 큰 이유는 크기가 큰 이미지입니다. 웹P, AVIF와 같은 최신 포맷을 활용하고, 업로드 전에 TinyPNG나 Squoosh로 이미지 압축하세요. 아래처럼 이미지를 lazy load하면 더욱 효율적입니다.
<img src=hero.webp loading=lazy width=800 height=600 alt=Hero Image />불필요한 CSS 없애기
CSS 프레임워크 사용 시 안 쓰는 코드가 쌓이면 렌더링이 느려져요. PurgeCSS나 Tailwind의 purge 기능, CSS 트리 셰이킹을 활용해 사용하지 않는 스타일을 지워줍니다. 페이지별로 CSS 분리하면 더 효과적입니다.
// tailwind.config.js
purge: [./src//*.html, ./src//*.js],코드 분할과 지연 로딩 적용하기
모든 자바스크립트 파일을 한 번에 로딩하면 비효율적입니다. 페이지나 컴포넌트 단위로 코드를 분할해 필요할 때만 불러오세요. React에서는 아래와 같이 동적으로 컴포넌트를 불러올 수 있습니다.
const Chart = React.lazy(() => import(./ChartComponent));CSS/JS/HTML 소스 최소화하기
코드에 있는 공백이나 주석은 실제 배포 시 아무 효과가 없습니다. Terser, cssnano, HTMLMinifier 등으로 코드 크기를 줄이면 로딩 속도가 빨라집니다.
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
}정적 자산 CDN으로 제공하기
자산을 서버에서 직접 제공하는 대신 Cloudflare, AWS CloudFront 같은 CDN을 이용하면 훨씬 빠르게 전달됩니다. 추가로 보안과 캐싱 기능도 챙길 수 있죠.
<script src=https://cdn.example.com/app.min.js></script>외부 스크립트 슬림하게 관리하기
분석, 채팅, SNS 등 외부 서비스 스크립트가 늘어나면 사이트가 느려집니다. 정말 필요한 것만, 그리고 async로 불러오세요. 무거운 서비스는 가볍게 대체할 방법이 있는지 점검해보세요.
<script async src=https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX>;</script>레이아웃 변경에 의한 성능 저하 줄이기
DOM을 자주 바꾸거나, 반복문·스크롤 등에서 스타일을 계속 변경하면 퍼포먼스가 떨어집니다. 타이머나 requestAnimationFrame 같은 최적화 기법을 활용해 효율적으로 처리하세요.
let timeout;
window.addEventListener(resize, () => {
clearTimeout(timeout);
timeout = setTimeout(() => {
element.style.width = window.innerWidth + px;
}, 200);
});캐시 헤더 활용하기
매번 새로 받아오는 것보다, 브라우저가 자원을 캐시해서 재활용하면 훨씬 빠르고 효율적입니다. JS, CSS, 이미지의 캐시 기간을 길게 설정하세요. HTML만 짧게, 버전별 자산에는 오래 저장되게 하세요.
<filesMatch .(js|css|png|jpg|jpeg|gif|webp)$>
Header set Cache-Control max-age=31536000, public
</filesMatch>아이콘과 로고는 SVG로!
간단한 UI 요소를 PNG나 JPEG로 처리하면 용량 낭비예요. SVG는 가벼우면서도 자유롭게 크기를 조절할 수 있습니다. 인라인 SVG로 바로 사용하면 더욱 빠릅니다.
모든 자원에 지연 로딩(Lazy Loading) 적용하기
페이지가 열릴 때 꼭 필요한 것부터 먼저 보여주고, 아래쪽 콘텐츠나 이미지, 컴포넌트는 스크롤이 닿을 때 불러오면 대기 시간을 줄일 수 있습니다.
<img src=feature.webp loading=lazy />제대로 된 반응형 디자인 구현하기
데스크톱 이미지를 모바일에서 쓰면 데이터만 낭비됩니다. srcset, media query, container query로 디바이스에 맞는 자원을 전달하세요.
<img
src=small.jpg
srcset=medium.jpg 768w, large.jpg 1200w
sizes=(max-width: 768px) 100vw, 50vw
/>실사용자 성능 지표로 실제 측정하기
성능 개선은 측정에서 시작됩니다. Lighthouse, Web Vitals, SpeedCurve 같은 툴로 실제 사용자 데이터를 확인하세요. 주요 지표(FCP, LCP, CLS, TTI)를 꾸준히 체크하면 문제를 놓치지 않습니다.
import {getCLS, getFID, getLCP} from web-vitals;
getCLS(console.log);
getFID(console.log);
getLCP(console.log);화면 렌더링을 막는 리소스 최소화하기
CSS, JS가 로딩을 막으면 사용자가 콘텐츠를 늦게 보게 됩니다. 중요한 CSS는 인라인, JS는 defer 또는 async 속성으로 비동기 처리하세요.
<link rel=preload href=main.css as=style onload=this.onload=null;this.rel=stylesheet>
<noscript><link rel=stylesheet href=main.css></noscript>성능 개선, 한 번만 하는 일이 아니다
웹 성능은 계속 관리해야 하는 영역입니다. 여기 소개된 전략 중 절반만 적용해도 사이트가 훨씬 빨라지고 사용자 만족도와 검색엔진 순위까지 크게 올라갑니다. 꾸준히 최적화에 신경 써주세요.