프론트엔드 성능 최적화

 

프론트엔드 성능 최적화 책 보며, 내용 공부하며 추가 중

 

 

웹 성능 최적화는 중요하다

Why?

•  사용자 경험(UX) 향상
•  가입률, 전환율 향상
•  이탈율 감소

→ 비즈니스 성과 ↑

 

 

웹 성능 최적화는 크게 2가지 측면(로딩 성능, 렌더링 성능)을 고려한다

1. 로딩 성능
   1. 다운로드해야 하는 리소스 수 줄이기
      •   불필요한 리소스 제거, 최소화
      •   필요한 리소스만 선택적으로 로드
   2. 리소스 크기 줄이기
      •   이미지 파일 크기 줄이고 최적화된 포맷 사용
      •   텍스트 파일을 압축하여 전송 크기 줄이기
   3. 코드 분할
      •   필요한 시점에만 로드될 수 있도록
   4. 리소스 우선순위 설정
      •   중요한 리소스를 먼저 다운로드하여 주요 콘텐츠 빠르게 접근
2. 렌더링 성능
   1. 자바스크립트 코드의 효율성
      •   잘 작성된 코드는 화면 렌더링 속도를 높이고 사용자 상호작용을 원활하게 만듦
   2. 이미지 사이즈 최적화
      
      •   이미지 파일 크기를 줄여 로드 시간을 단축
   3. 코드 분할
      •   모든 리액트 코드가 하나의 자바스크리비트 파일로 번들링되어 로드되는 SPA 특성상, 코드 분할을 통해 당장 필요 없는 코드를 나중에 로드
   4. 텍스트 압축
      •   서버에서 텍스트 파일을 미리 압축해 다운로드 크기를 줄임
   5. 병목 코드 최적화
      •   서비스 속도를 저하시키는 병목 코드 최적화

 

성능 분석 도구

1. 크롬 개발자 도구
   •   네트워크 패널, 퍼포먼스 패널, 라이트하우스 패널 등을 통해 성능 분석
2. 라이트하우스
   •   웹 페이지의 성능, 접근성, SEO 등을 종합적으로 분석

 

주요 성능 지표 (라이트하우스 기준)

1.  First Contentful Paint (FCP): 첫 번째 콘텐츠가 렌더링되는 시간 (10% 가중치)
2.  Speed Index (SI): 페이지 로드 중 콘텐츠가 시각적으로 표시되는 속도 (10% 가중치)
3.  Largest Contentful Paint (LCP): 가장 큰 이미지나 텍스트 요소가 렌더링되는 시간 (25% 가중치)
4.  Time to Interactive (TTI): 사용자가 상호작용할 수 있는 시점까지 걸리는 시간 (10% 가중치)
5.  Total Blocking Time (TBT): 페이지 로드 중 사용자가 입력할 수 없는 시간 (30% 가중치)
6.  Cumulative Layout Shift (CLS): 예상치 못한 레이아웃 이동의 누적 점수 (15% 가중치)

 

최적화 기회(Opportunities) 및 진단(Diagnostics)

최적화 가능성을 확인하고 개선할 부분을 찾는 부분

 

 

 

.. (추후 더 추가 예정)