[FE] 웹 성능 최적화 방법

웹 성능 최적화 방법

 

웹 페이지의 성능 최적화를 위해 크게 두가지 방법이 있다

• 렌더링 최적화
• 로딩 최적화

 

렌더링 최적화 방법
: 리플로우 최소 발생, 빠르게 화면 그리기

• CSS 최적화
  • 리플로우, 리페인트를 고려한 스타일 작성 : 리플로우는 브라우저가 전체 픽셀을 다시 계산해야 하므로 되도록이면 리페인트 속성을 사용해 스타일을 작성하는 것이 좋음
  • 사용하지 않는 CSS 제거 : Lighthouse를 사용해 unused CSS 줄이기
  • 간결한 스타일 작성 : 복잡한 셀렉터 사용 지양, 선택자를 간결하게 사용해 특이성 낮게 유지하기
• Html 최적화
  • 인라인 스타일 사용하지 않기 : html 요소에 style 속성을 통해 인라인 스타일을 작성하면 불필요한 코드 중복 발생하기 쉬움
  • 복잡한 DOM 트리 지양하기 : DOM이 작고 깊이가 얕을수록 계산이 빠름, 불필요한 div wrapper 제거
• 애니메이션 최적화
  • 애니메이션 구현은 CSS를 통해 구현하는 것이 성능면에서 이득
  • transform 은 리페인트와 리플로우를 발생시키지 않고 합성만 발생하기 때문!
• JS 최적화
  • 강제 동기 레이아웃 피하기 / 레이아웃 스레싱 피하기 : 레이아웃 단계가 완료되기 전에 요소의 위치나 크기를 변경 후 바로 가져오려고 하면 강제로 레이아웃이 발생됨

 

로딩 최적화

• 렌더 블로킹 최적화
  • CSS는 Head, JS는 body 하단에서 불러오기 : css는 바로 눈에 보이는 시각적 부분을 구현하는데 필요하기 때문
  • media 속성 사용 : 반응형 웹 제작시 유용, 조건별로 CSS 불러오기 쉬움
  • async / defer 속성 사용 : 스크립트 파일을 병렬로 다운로드하게 해줌
• 이미지 최적화
  • picture 태그 사용하기 : picture 태그의 type 속성을 통해 사용자 환경에 맞는 이미지를 제공할 수 있음. 혹은, media 속성을 사용해 브라우저 사이즈에 맞는 이미지 제공 가능
  • lazy load : loading 속성을 사용해 이미지를 브라우저 화면에 지연/병렬 로딩 가능
  • 스프라이트 이미지 사용 : 여러 개의 이미지를 하나의 이미지로 만들어 css의 background-position 속성을 사용해 부분적으로 이미지를 사용하여 이미지 파일 개수 자체를 줄임
• 웹팩(Webpack) 사용
  • css, js 파일을 번들링해 리소스 요청 줄일 수 있음
• Gzip 사용
  • 텍스트 기반의 리소스로 압축
• JS 압축
  • UglifyJS 등을 사용해 js 파일 압축
• CDN 사용
  • 유저에게 많은 콘텐츠를 손실없이 빠르게 전달 가능
• 캐싱 사용
  • 사용자가 요청하는 html, css, js, image 등을 첫 요청 시 응답을 특정 위치에 복사본을 저장하고, 이후 동일한 URI 의 리소스 요청이 왔을 때 이전에 저장해둔 파일을 사용해 더 빠르게 로딩가능

 

Lazy loading이 불필요한 페이지

• 랜딩 페이지나, 첫 시작 페이지 : 사용자가 처음 방문할 때 바로 볼 수 있어야 하는 핵심 콘텐츠가 많은 페이지
• SEO에 중요한 이미지나 콘텐츠를 포함하는 페이지 : 검색 엔진이 페이지의 모든 콘텐츠를 즉시 인덱싱할 수 있어야 할 때는 사용하면 안됨
• 긴급한 정보가 포함된 페이지 : 위기 관리 또는 긴급 상황 업데이트와 같이 사용자가 즉시 정보에 접근해야 하는 페이지
• 단일 페이지 애플리케이션 : SPA에서는 페이지의 일부가 사용자와의 상호작용에 따라 동적으로 업데이트 되므로 초기 로드는 빠를 수 있으나 사용자 경험을 저해하는 복잡성이 발생할 수 있음