끄적끄적 보니타

Web Vitals는 구글이 정의한 웹사이트 사용자 경험(UX) 품질을 측정하는 핵심 지표웹페이지의 로딩 속도, 인터랙션 반응 속도, 시각적 안정성을 평가해서 SEO(검색엔진 최적화)와 사용자 경험을 개선하는 데 도움을 줌.✔ Core Web Vitals (핵심 지표 3가지)현재 가장 중요한 Web Vitals 지표는 LCP, FID, CLS✔ 각 Web Vitals 최적화 방법① LCP (Largest Contentful Paint) → 로딩 속도 최적화🚀 문제: 페이지에서 가장 큰 콘텐츠가 늦게 로드되면 사용자 체감 속도가 느려짐✅ 해결 방법:이미지 최적화 → WebP 사용, 크기 조정, loading="lazy" 적용Critical Rendering Path 최적화 → preload로 중요한 리소..

SSG(Static Site Generation)는 웹사이트를 빌드할 때 미리 HTML 파일을 생성하여 제공하는 방식서버에서 동적으로 HTML을 생성하는 SSR(Server-Side Rendering)과 달리, SSG는 정적인 HTML을 미리 만들어서 배포 속도가 빠르고 서버 부하가 적은 것이 특징✔ SSG의 특징✅ 미리 생성된 정적 HTML 제공 → 빠른 로딩 속도✅ CDN 캐싱 최적화 가능 → 트래픽이 많아도 안정적✅ 서버가 필요 없거나 최소한의 리소스만 사용✅ 데이터가 자주 바뀌지 않는 페이지에 적합✔ SSG vs SSR vs CSR 비교✔ SSG를 지원하는 대표적인 프레임워크Next.js (getStaticProps, getStaticPaths 활용)Gatsby (GraphQL로 데이터 페칭)Hu..

1. 코드 최적화① 불필요한 렌더링 최소화React의 경우, useMemo, useCallback, React.memo를 활용해 불필요한 리렌더링 방지Virtual DOM 업데이트 최소화② 코드 분할 (Code Splitting)Webpack의 Dynamic Import(import()), React의 React.lazy를 사용하여 필요한 부분만 로드예시 (React Lazy Loading):const LazyComponent = React.lazy(() => import('./LazyComponent'));③ Tree Shaking 적용Webpack, Rollup 등을 활용해 사용하지 않는 코드 제거ES6 모듈을 사용하면 자동으로 Tree Shaking 적용됨2. 네트워크 최적화④ 이미지 최적화WebP..