![\"웹](\"/assets/javascript.png\" "\\"웹")
웹 성능은 사용자 경험과 비즈니스 성과에 직접적인 영향을 미친다. 페이지 로딩 시간이 1초 늦어지면 전환율이 7% 감소한다는 연구 결과도 있다. 이 글은 Core Web Vitals부터 번들 최적화까지 웹 성능 최적화의 모든 것을 실전 예제와 함께 정리한다.
\n사용자 경험:
\n비즈니스 영향:
\n핵심 메트릭:
\nChrome DevTools:
\n온라인 도구:
\n실시간 모니터링:
\nLCP는 페이지의 주요 콘텐츠가 로딩되는 시간을 측정한다.
\n목표 값:
\n최적화 방법:
\n1. 이미지 최적화
\n<!-- 나쁜 예: 큰 이미지 -->\n<img src=\"hero.jpg\" alt=\"Hero\" />\n\n<!-- 좋은 예: 최적화된 이미지 -->\n<img \n src=\"hero.webp\" \n srcset=\"hero-400.webp 400w, hero-800.webp 800w\"\n sizes=\"(max-width: 600px) 400px, 800px\"\n alt=\"Hero\"\n loading=\"lazy\"\n/>2. 리소스 우선순위
\n<!-- 중요한 리소스는 preload -->\n<link rel=\"preload\" href=\"critical.css\" as=\"style\" />\n<link rel=\"preload\" href=\"hero-image.jpg\" as=\"image\" />\n\n<!-- 폰트 preload -->\n<link rel=\"preload\" href=\"font.woff2\" as=\"font\" type=\"font/woff2\" crossorigin />3. 서버 응답 시간 최적화
\nFID는 사용자가 페이지와 처음 상호작용할 때의 지연 시간을 측정한다.
\n목표 값:
\n최적화 방법:
\n1. JavaScript 실행 시간 최소화
\n// 나쁜 예: 동기적 무거운 작업\nfunction processData() {\n const data = heavyComputation(); // 블로킹\n return data;\n}\n\n// 좋은 예: 비동기 처리\nasync function processData() {\n // 메인 스레드 블로킹 방지\n const data = await heavyComputationAsync();\n return data;\n}2. 이벤트 핸들러 최적화
\n// 나쁜 예: 즉시 실행\nbutton.addEventListener('click', () => {\n heavyOperation(); // 블로킹\n});\n\n// 좋은 예: requestIdleCallback 사용\nbutton.addEventListener('click', () => {\n requestIdleCallback(() => {\n heavyOperation(); // 유휴 시간에 실행\n });\n});3. 웹 워커 활용
\n// 메인 스레드에서 무거운 작업 제거\nconst worker = new Worker('worker.js');\n\nworker.postMessage({ data: largeData });\nworker.onmessage = (e) => {\n console.log('Result:', e.data);\n};CLS는 페이지 로딩 중 레이아웃이 얼마나 이동하는지 측정한다.
\n목표 값:
\n최적화 방법:
\n1. 이미지 크기 지정
\n<!-- 나쁜 예: 크기 미지정 -->\n<img src=\"image.jpg\" alt=\"Image\" />\n\n<!-- 좋은 예: 크기 지정 -->\n<img \n src=\"image.jpg\" \n alt=\"Image\"\n width=\"800\"\n height=\"600\"\n style=\"aspect-ratio: 800/600\"\n/>2. 동적 콘텐츠 공간 예약
\n/* 나쁜 예: 높이 미지정 */\n.ad-container {\n /* 높이 없음 */\n}\n\n/* 좋은 예: 최소 높이 지정 */\n.ad-container {\n min-height: 250px;\n}3. 폰트 로딩 최적화
\n/* FOIT (Flash of Invisible Text) 방지 */\n@font-face {\n font-family: 'MyFont';\n src: url('font.woff2') format('woff2');\n font-display: swap; /* 즉시 fallback 폰트 표시 */\n}webpack-bundle-analyzer:
\n// webpack.config.js\nconst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;\n\nmodule.exports = {\n plugins: [\n new BundleAnalyzerPlugin({\n analyzerMode: 'static',\n openAnalyzer: false,\n }),\n ],\n};Vite 번들 분석:
\nnpm install --save-dev rollup-plugin-visualizer\n\n# vite.config.js\nimport { visualizer } from 'rollup-plugin-visualizer';\n\nexport default {\n plugins: [\n visualizer({\n open: true,\n gzipSize: true,\n brotliSize: true,\n }),\n ],\n};Tree Shaking은 사용하지 않는 코드를 제거한다.
\nES Modules 사용:
\n// 나쁜 예: CommonJS\nconst _ = require('lodash');\nconst result = _.map([1, 2, 3], x => x * 2);\n\n// 좋은 예: ES Modules\nimport { map } from 'lodash-es';\nconst result = map([1, 2, 3], x => x * 2);package.json 설정:
\n{\n \"sideEffects\": false,\n \"module\": \"esm/index.js\",\n \"main\": \"cjs/index.js\"\n}동적 임포트:
\n// 나쁜 예: 모든 코드를 한 번에 로드\nimport HeavyComponent from './HeavyComponent';\n\nfunction App() {\n return <HeavyComponent />;\n}\n\n// 좋은 예: 필요할 때만 로드\nimport { lazy, Suspense } from 'react';\n\nconst HeavyComponent = lazy(() => import('./HeavyComponent'));\n\nfunction App() {\n return (\n <Suspense fallback={<div>Loading...</div>}>\n <HeavyComponent />\n </Suspense>\n );\n}라우트 기반 스플리팅:
\n// React Router\nimport { lazy } from 'react';\nimport { Routes, Route } from 'react-router-dom';\n\nconst Home = lazy(() => import('./pages/Home'));\nconst About = lazy(() => import('./pages/About'));\nconst Contact = lazy(() => import('./pages/Contact'));\n\nfunction App() {\n return (\n <Routes>\n <Route path=\"/\" element={<Home />} />\n <Route path=\"/about\" element={<About />} />\n <Route path=\"/contact\" element={<Contact />} />\n </Routes>\n );\n}Next.js 자동 스플리팅:
\n// pages/index.js - 자동으로 코드 스플리팅됨\nimport dynamic from 'next/dynamic';\n\nconst DynamicComponent = dynamic(() => import('../components/Heavy'), {\n loading: () => <p>Loading...</p>,\n ssr: false, // 서버 사이드 렌더링 비활성화\n});\n\nexport default function Home() {\n return <DynamicComponent />;\n}전체 라이브러리 대신 필요한 부분만:
\n// 나쁜 예: 전체 라이브러리\nimport _ from 'lodash';\nconst result = _.debounce(fn, 300);\n\n// 좋은 예: 필요한 함수만\nimport debounce from 'lodash/debounce';\nconst result = debounce(fn, 300);\n\n// 더 좋은 예: 작은 라이브러리 사용\nimport debounce from 'lodash-es/debounce';대안 라이브러리 사용:
\n// 나쁜 예: 큰 라이브러리\nimport moment from 'moment';\n\n// 좋은 예: 작은 대안\nimport { format } from 'date-fns';최신 포맷 사용:
\n<!-- WebP 지원 브라우저 -->\n<picture>\n <source srcset=\"image.webp\" type=\"image/webp\" />\n <source srcset=\"image.avif\" type=\"image/avif\" />\n <img src=\"image.jpg\" alt=\"Image\" />\n</picture>Next.js Image 컴포넌트:
\nimport Image from 'next/image';\n\n<Image\n src=\"/hero.jpg\"\n alt=\"Hero\"\n width={800}\n height={600}\n priority // LCP 이미지인 경우\n placeholder=\"blur\" // 블러 플레이스홀더\n/>srcset 사용:
\n<img\n srcset=\"\n image-400.jpg 400w,\n image-800.jpg 800w,\n image-1200.jpg 1200w\n \"\n sizes=\"(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px\"\n src=\"image-800.jpg\"\n alt=\"Image\"\n/>네이티브 Lazy Loading:
\n<img \n src=\"image.jpg\" \n alt=\"Image\"\n loading=\"lazy\"\n decoding=\"async\"\n/>Intersection Observer:
\nconst images = document.querySelectorAll('img[data-src]');\n\nconst imageObserver = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target;\n img.src = img.dataset.src;\n img.classList.remove('lazy');\n observer.unobserve(img);\n }\n });\n});\n\nimages.forEach(img => imageObserver.observe(img));도구:
\n자동화:
\n// webpack 이미지 최적화\nconst ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');\n\nmodule.exports = {\n optimization: {\n minimizer: [\n new ImageMinimizerPlugin({\n minimizer: {\n implementation: ImageMinimizerPlugin.sharpMinify,\n },\n }),\n ],\n },\n};Cache-Control 헤더:
\n// 정적 자산: 긴 캐시\napp.use('/static', express.static('public', {\n maxAge: '1y', // 1년\n immutable: true,\n}));\n\n// HTML: 짧은 캐시\napp.get('*.html', (req, res) => {\n res.setHeader('Cache-Control', 'public, max-age=3600'); // 1시간\n res.sendFile(path.join(__dirname, 'index.html'));\n});ETag 사용:
\napp.use(express.static('public', {\n etag: true,\n lastModified: true,\n}));Cache First 전략:
\n// service-worker.js\nself.addEventListener('fetch', (event) => {\n event.respondWith(\n caches.match(event.request).then((response) => {\n // 캐시에 있으면 캐시 반환\n if (response) {\n return response;\n }\n // 없으면 네트워크 요청\n return fetch(event.request).then((response) => {\n // 캐시에 저장\n const responseToCache = response.clone();\n caches.open('v1').then((cache) => {\n cache.put(event.request, responseToCache);\n });\n return response;\n });\n })\n );\n});Network First 전략:
\nself.addEventListener('fetch', (event) => {\n event.respondWith(\n fetch(event.request)\n .then((response) => {\n // 네트워크 성공 시 캐시 업데이트\n const responseToCache = response.clone();\n caches.open('v1').then((cache) => {\n cache.put(event.request, responseToCache);\n });\n return response;\n })\n .catch(() => {\n // 네트워크 실패 시 캐시 반환\n return caches.match(event.request);\n })\n );\n});localStorage/SessionStorage:
\n// API 응답 캐싱\nconst cacheKey = 'api-data';\nconst cacheTime = 5 * 60 * 1000; // 5분\n\nfunction getCachedData() {\n const cached = localStorage.getItem(cacheKey);\n if (cached) {\n const { data, timestamp } = JSON.parse(cached);\n if (Date.now() - timestamp < cacheTime) {\n return data;\n }\n }\n return null;\n}\n\nfunction setCachedData(data) {\n localStorage.setItem(cacheKey, JSON.stringify({\n data,\n timestamp: Date.now(),\n }));\n}preload:
\n<!-- 중요한 리소스 미리 로드 -->\n<link rel=\"preload\" href=\"critical.css\" as=\"style\" />\n<link rel=\"preload\" href=\"hero-font.woff2\" as=\"font\" type=\"font/woff2\" crossorigin />prefetch:
\n<!-- 다음에 필요할 리소스 미리 가져오기 -->\n<link rel=\"prefetch\" href=\"next-page.html\" />preconnect:
\n<!-- 외부 도메인 연결 미리 설정 -->\n<link rel=\"preconnect\" href=\"https://api.example.com\" />\n<link rel=\"dns-prefetch\" href=\"https://api.example.com\" />폰트 디스플레이:
\n@font-face {\n font-family: 'MyFont';\n src: url('font.woff2') format('woff2');\n font-display: swap; /* 즉시 fallback 표시 */\n}폰트 서브셋:
\n/* 필요한 문자만 포함 */\n@font-face {\n font-family: 'MyFont';\n src: url('font-subset.woff2') format('woff2');\n unicode-range: U+0020-007F; /* ASCII만 */\n}인라인 폰트:
\n<!-- 작은 폰트는 인라인 -->\n<style>\n @font-face {\n font-family: 'IconFont';\n src: url('data:font/woff2;base64,...') format('woff2');\n }\n</style>Critical CSS 인라인:
\n<!-- 중요한 CSS는 인라인 -->\n<style>\n /* Critical CSS */\n body { margin: 0; }\n .header { height: 60px; }\n</style>\n\n<!-- 나머지는 비동기 로드 -->\n<link rel=\"preload\" href=\"styles.css\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\" />CSS 최소화:
\n// webpack\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst CssMinimizerPlugin = require('css-minimizer-webpack-plugin');\n\nmodule.exports = {\n optimization: {\n minimizer: [\n new CssMinimizerPlugin(),\n ],\n },\n};Terser 사용:
\n// webpack.config.js\nconst TerserPlugin = require('terser-webpack-plugin');\n\nmodule.exports = {\n optimization: {\n minimize: true,\n minimizer: [\n new TerserPlugin({\n terserOptions: {\n compress: {\n drop_console: true, // console.log 제거\n },\n },\n }),\n ],\n },\n};조건부 코드:
\n// 개발 코드 제거\nif (process.env.NODE_ENV === 'production') {\n // 프로덕션 코드만\n}\n\n// 또는 webpack DefinePlugin\nnew webpack.DefinePlugin({\n 'process.env.NODE_ENV': JSON.stringify('production'),\n}),동적 임포트:
\n// 필요할 때만 로드\nconst loadModule = async () => {\n const module = await import('./heavy-module.js');\n return module;\n};HTTP/2 장점:
\n설정:
\n// Node.js\nconst http2 = require('http2');\nconst server = http2.createServer((req, res) => {\n // HTTP/2 서버\n});CDN 장점:
\n설정:
\nGzip/Brotli:
\n// Express\nconst compression = require('compression');\napp.use(compression({\n level: 6,\n filter: (req, res) => {\n if (req.headers['x-no-compression']) {\n return false;\n }\n return compression.filter(req, res);\n },\n}));web-vitals 라이브러리:
\nimport { getCLS, getFID, getLCP } from 'web-vitals';\n\nfunction sendToAnalytics(metric) {\n // Google Analytics로 전송\n gtag('event', metric.name, {\n value: Math.round(metric.value),\n event_label: metric.id,\n non_interaction: true,\n });\n}\n\ngetCLS(sendToAnalytics);\ngetFID(sendToAnalytics);\ngetLCP(sendToAnalytics);성능 측정:
\n// 페이지 로딩 시간\nwindow.addEventListener('load', () => {\n const perfData = performance.timing;\n const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;\n console.log('Page Load Time:', pageLoadTime);\n});\n\n// 리소스 로딩 시간\nconst resources = performance.getEntriesByType('resource');\nresources.forEach(resource => {\n console.log(resource.name, resource.duration);\n});Google Analytics:
\n// Web Vitals 리포트\nimport { onCLS, onFID, onLCP } from 'web-vitals';\n\nonCLS(console.log);\nonFID(console.log);\nonLCP(console.log);이미지:
\nJavaScript:
\nCSS:
\n캐싱:
\n네트워크:
\nQ: 성능 최적화를 어디서부터 시작해야 하나요?
\nA: Lighthouse로 측정하여 가장 점수가 낮은 항목부터 개선하는 것이 좋다. 일반적으로 이미지 최적화와 번들 크기 감소가 큰 효과를 낸다.
Q: 모든 최적화를 한 번에 적용해야 하나요?
\nA: 아니요, 점진적으로 적용하고 각 변경사항의 효과를 측정하는 것이 좋다. 한 번에 너무 많이 변경하면 문제 원인 파악이 어렵다.
Q: 성능과 기능 사이의 균형은 어떻게 맞추나요?
\nA: 사용자 경험에 가장 중요한 기능에 우선순위를 두고, 나머지는 점진적으로 최적화한다. 완벽보다는 실용적인 개선이 중요하다.
Q: 모바일과 데스크톱 성능을 다르게 최적화해야 하나요?
\nA: 네, 모바일은 네트워크와 처리 능력이 제한적이므로 더 공격적인 최적화가 필요하다. 반응형 이미지와 조건부 로딩을 활용한다.
Q: 성능 최적화 후 어떻게 검증하나요?
\nA: Lighthouse, PageSpeed Insights, WebPageTest 등으로 측정하고, 실제 사용자 메트릭(RUM)도 모니터링한다.
Q: 성능 최적화가 SEO에 영향을 주나요?
\nA: 네, Google은 페이지 속도를 랭킹 요소로 사용하므로 성능 최적화는 SEO에도 긍정적인 영향을 준다.
웹 성능 최적화는 한 번의 작업이 아니라 지속적인 프로세스다. 새로운 기능 추가, 라이브러리 업데이트, 콘텐츠 변경 등이 성능에 영향을 줄 수 있으므로 정기적으로 측정하고 개선해야 한다.
\nCore Web Vitals를 목표로 하되, 사용자 경험을 최우선으로 고려한다. 기술적 최적화도 중요하지만, 실제 사용자가 느끼는 성능이 가장 중요하다.
\n성능 최적화는 투자 대비 효과가 큰 작업이다. 작은 개선이라도 사용자 경험과 비즈니스 성과에 큰 영향을 미칠 수 있다. 지속적으로 측정하고 개선하는 문화를 만들어가자.
\n웹 성능 최적화를 마스터한 후, 실제 프로젝트에 적용하고 싶다면 블루버튼 같은 프로젝트 매칭 플랫폼을 활용할 수 있다. 성능 최적화가 중요한 프로젝트, Core Web Vitals 개선이 필요한 프로젝트, 빠른 로딩 속도가 필수인 프로젝트 등에서 실전 경험을 쌓을 수 있다. 특히 사용자 경험 개선이나 SEO 최적화가 중요한 프로젝트에서 성능 최적화의 강점을 발휘할 수 있다.
","tableOfContents":"