82. 성능최적화

Mission: 성능최적화 관련 질문 정리

📌

프론트엔드 성능최적화를 위한 방법이 있다면 말씀해주시고 그 중 프로젝트에서 활용한 경험이 있다면 설명해주세요.

• 프론트엔드 성능 최적화 방법:
  1. 이미지 최적화: 이미지를 압축하고 적절한 포맷을 선택하여 파일 크기를 줄입니다. 이미지 스프라이트를 사용하여 여러 이미지를 하나의 이미지로 결합하고, 레이지 로딩을 구현하여 페이지 로딩 속도를 향상시킵니다.
  2. 코드 번들링: 자바스크립트와 CSS 파일을 번들링하여 요청 수를 줄이고 로딩 시간을 단축합니다. 또한 코드 스플리팅을 통해 페이지 간 불필요한 코드 로딩을 방지합니다.
  3. 브라우저 캐싱: 캐시 제어 헤더를 사용하여 정적 리소스를 브라우저 캐시에 저장하고, 변경이 없는 리소스는 다시 로드하지 않도록 합니다.
  4. 렌더링 최적화: CSS와 자바스크립트를 비동기로 로드하고, 스크립트를 페이지 하단에 배치하여 페이지의 초기 로딩을 가속화합니다.
  5. 서버 사이드 렌더링 (SSR): 서버 사이드 렌더링을 활용하여 초기 페이지 로딩 속도를 개선하고 검색 엔진 최적화를 강화합니다.
  6. 폰트 최적화: 필요한 글꼴만 로드하고, 웹 폰트를 로컬 캐시에 저장하여 다운로드 시간을 줄입니다.
  7. 애니메이션 최적화: CSS 트랜지션 및 애니메이션을 하드웨어 가속을 활용하여 부드럽게 렌더링하고, requestAnimationFrame을 사용하여 애니메이션을 최적화합니다.
     
     
• 프로젝트에서의 경험:
  - 이전 프로젝트에서 이미지 최적화를 진행했습니다. 모든 이미지를 압축하고, 웹P 포맷을 사용하여 이미지 크기를 크게 줄였습니다. 또한 이미지 스프라이트를 도입하여 여러 작은 아이콘 이미지를 하나의 이미지로 결합하고, CSS를 통해 필요한 부분만 잘라서 표시하도록 구현했습니다. 이로써 페이지 로딩 시간을 대폭 감소시키고 사용자 경험을 향상시켰습니다.
  
  프론트엔드 성능 최적화는 웹 애플리케이션의 사용자 경험과 성능을 향상시키는 중요한 요소입니다. 이러한 최적화를 통해 웹 페이지의 로딩 속도를 개선하고 사용자들에게 더 빠른 및 효율적인 서비스를 제공할 수 있습니다.