<aside> 🔖 프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React)를 보며 웹 성능 최적화 방법을 배워본다

</aside>

웹 성능 최적화는 왜 필요한가?

• 사용자가 떠나지 않도록 하기 위해, 이는 곧 수익 증대로 이어진다.
• 프론트엔드 개발자로서 경쟁력을 갖추기 위해

무엇을 어떻게 배울 것인가?

• 실전 사이트 혹은 프로덕트를 통해 직접 분석하고 상황에 맞는 최적화 기법을 배운다.
• 브라우저의 렏더링 원리, Performance, Lighthouse, Network 패널을 이용한 분석, webpack-bundle-analyzer를 이용한 분석, 텍스트 압축, 이미지 사이즈 최적화, 적절한 사이즈로의 변환, 이미지 cdn을 통한 최적화, 리소스 캐싱, 이미지 preload, 컴포넌트 preload, Component Lazy Load, React Code Splitting, Image Lazy Load, 병복 코드 제거, repaint, reflow 줄이기

웹 성능 최적화의 주요 포인트는

웹 성능 결정 요소는 로딩 성능과 렌더링 성능에 있다.

• 로딩 성능 : 각 리소스를 불러오는 성능
• 렌더링 성능 : 불러온 리소스를 화면에 그리는 성능

블로그 사이트 최적화

통계 사이트 최적화

일반 홈페이지 최적화

이미지 갤러리 서비스 최적화