![\"JavaScript](\"/assets/javascript.png\" "\\"JavaScript")
JavaScript 애플리케이션의 성능은 사용자 경험과 비즈니스 성과에 직접적인 영향을 미친다. 느린 로딩 시간은 이탈률을 높이고, 전환율을 낮춘다. 이 글은 JavaScript 성능을 측정하고 최적화하는 실무 가이드를 제공한다.
\nURL: https://developers.google.com/web/tools/lighthouse
\n주요 기능
\n사용 방법
\n측정 항목
\nURL: https://www.webpagetest.org/
\n주요 기능
\n활용
\n주요 기능
\n사용 방법
\n목표: 2.5초 이하
\n측정 방법
\nnew PerformanceObserver((entryList) => {\n const entries = entryList.getEntries();\n const lastEntry = entries[entries.length - 1];\n console.log('LCP:', lastEntry.renderTime || lastEntry.loadTime);\n}).observe({entryTypes: ['largest-contentful-paint']});최적화 방법
\n목표: 100ms 이하
\n측정 방법
\nnew PerformanceObserver((entryList) => {\n for (const entry of entryList.getEntries()) {\n console.log('FID:', entry.processingStart - entry.startTime);\n }\n}).observe({entryTypes: ['first-input']});최적화 방법
\n목표: 0.1 이하
\n측정 방법
\nlet clsValue = 0;\nnew PerformanceObserver((entryList) => {\n for (const entry of entryList.getEntries()) {\n if (!entry.hadRecentInput) {\n clsValue += entry.value;\n }\n }\n console.log('CLS:', clsValue);\n}).observe({entryTypes: ['layout-shift']});최적화 방법
\n체크리스트
\n번들 분석 도구
\n# webpack-bundle-analyzer\nnpm install --save-dev webpack-bundle-analyzer\n\n# 사용\nnpx webpack-bundle-analyzer dist/stats.json체크리스트
\n예시: 디바운싱
\nfunction debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n}\n\n// 사용\nconst handleSearch = debounce((query) => {\n // 검색 로직\n}, 300);체크리스트
\n리소스 힌트 예시
\n<!-- 중요 리소스 -->\n<link rel=\"preload\" href=\"critical.css\" as=\"style\">\n<link rel=\"preload\" href=\"main.js\" as=\"script\">\n\n<!-- 폰트 최적화 -->\n<link rel=\"preload\" href=\"font.woff2\" as=\"font\" type=\"font/woff2\" crossorigin>1단계: 측정
\n2단계: 우선순위 설정
\n3단계: 최적화 적용
\n4단계: 재측정 및 검증
\n권장 성능 예산
\n| 지표 | \n목표 | \n경고 | \n위험 | \n
|---|---|---|---|
| LCP | \n< 2.5s | \n2.5-4s | \n> 4s | \n
| FID | \n< 100ms | \n100-300ms | \n> 300ms | \n
| CLS | \n< 0.1 | \n0.1-0.25 | \n> 0.25 | \n
| 번들 크기 | \n< 200KB | \n200-500KB | \n> 500KB | \n
성능 예산 적용
\n// package.json\n{\n \"bundlesize\": [\n {\n \"path\": \"./dist/main.js\",\n \"maxSize\": \"200 KB\"\n }\n ]\n}CI/CD 통합
\n# GitHub Actions 예시\n- name: Run Lighthouse CI\n run: |\n npm install -g @lhci/cli\n lhci autorun정기 모니터링
\n메모리 프로파일링
\n네트워크 분석
\n체크리스트
\n예시: React.lazy
\nconst LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction App() {\n return (\n <Suspense fallback={<div>Loading...</div>}>\n <LazyComponent />\n </Suspense>\n );\n}체크리스트
\n체크리스트
\n도구
\n설정
\n// Core Web Vitals 추적\nimport {getCLS, getFID, getLCP} from 'web-vitals';\n\ngetCLS(console.log);\ngetFID(console.log);\ngetLCP(console.log);구성 요소
\nQ: 성능 최적화를 어디서부터 시작해야 하나요?
\nA: Lighthouse로 현재 상태를 측정하고, Core Web Vitals 점수가 낮은 항목부터 개선하는 것을 추천한다.
Q: 번들 크기를 얼마나 줄여야 하나요?
\nA: 초기 로딩 번들은 200KB 이하를 목표로 하되, 프로젝트 특성에 따라 조정한다.
Q: 모든 최적화를 한 번에 적용해야 하나요?
\nA: 단계적으로 적용하고 각 단계마다 측정하여 효과를 확인하는 것이 좋다.
Q: 모바일 성능은 어떻게 측정하나요?
\nA: Chrome DevTools의 Device Toolbar를 사용하거나 WebPageTest에서 모바일 기기를 선택한다.
Q: 성능 최적화 후에도 점수가 낮은 이유는?
\nA: 서버 응답 시간, 네트워크 속도, 서드파티 스크립트 등 다양한 요인이 영향을 준다. 전체적인 분석이 필요하다.
Q: 성능 예산을 어떻게 설정하나요?
\nA: 현재 성능을 기준으로 10-20% 개선을 목표로 설정하고, 점진적으로 목표를 높여간다.
JavaScript 성능 최적화 기술을 습득했다면, 실제 프로젝트에서 이를 적용해볼 수 있다. 블루버튼 같은 플랫폼에서 성능 최적화가 필요한 웹 애플리케이션 프로젝트를 찾아 실전 경험을 쌓을 수 있다. 특히 느린 로딩 속도로 고민하는 프로젝트, Core Web Vitals 개선이 필요한 프로젝트, 대규모 프론트엔드 애플리케이션 최적화 프로젝트에서 이 글에서 배운 지식을 바로 활용할 수 있다.
","tableOfContents":"