01. Intro

왜 성능 최적화를 해야할까?

사용자 경험 개선

• 사용자는 느린 페이지를 피하고 로딩 시간이 짧을수록 더 오래 머무를 가능성이 높아진다.
• 페이지 전환/클릭 반응에서 딜레이가 줄어들어 인터렉티브한 경험을 제공한다.

SEO 성능 향상

• 구글과 같은 검색 엔진은 웹사이트의 속도를 중요한 순위 요인으로 고려한다.
  검색 순위에서 유리해져 더 많은 트래픽을 유도할 수 있다.

모바일 사용자에 대한 대응력 강화

• 데스크톱에 비해 느린 모바일 네트워크의 사용자 경험이 개선된다.

이탈률(bounce rate) 감소

• 로딩 시간이 짧을수록 이탈률이 줄어든다.

서버 비용 절감

• 자원 사용을 줄일 수 있어 서버 트래픽과 대역폭이 줄어든다.
  곧 서버 운영 비용 절감으로 이어질 수 있다.

더 넓은 접근성

• 성능이 좋으면 인터넷 속도가 느리거나 네트워크 조건이 불안정한 환경에서도 웹사이트에 접근할 수 있어
  더 많은 사용자에게 도달할 수 있다.
  
  

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

• ✅ 로딩 성능
  각 리소스를 불러오는 성능
  → 어떻게 더 빠르게 리소스를 로드할 것인가?
  • 이미지 사이즈 최적화
  • Code Split
  • 리소스 텍스트 압축
• ✅ 렌더링 성능
  불러온 리소스들을 화면에 보여주는 성능
  → 어떻게 더 빠르게 렌더링할 것인가?
  • Bottleneck 코드 최적화

브라우저는 서버와 어떻게 통신하는가/화면을 어떻게 그리는가 알아야한다.

분석 툴

• 크롬 Network 탭
  Network Resource들의 상세한 정보
  
  
• 크롬 Performance 탭
  페이지 동작할 때 실행되는 작업들을 스크린샷으로 보여줌
  
  
• 크롬 Audit 탭(Lighthouse)
  서비스가 성능적으로 어느 정도 수준인지를 판단과 가이드라인 확인 가능
  
  
• webpack-bundle-analyzer
  webpack 라이브러리. 번들링된 파일들이 어떤 코드를 갖고있는지를 한 눈에 파악 가능