TMI

성능 측정과 중요성!!

Toris-dev 2024. 6. 16. 19:54

웹 성능 최적화를 해야 하는 이유

  • 성능 최적화 : 웹 페이지가 사용자에게 빠르게 표시되도록 하는 작업
    • 무거워진 웹 로딩은 사용자 경험을 떨어뜨리고, 비즈니스에 큰 영향을 끼치기 때문에 성능 체크가 매우 중요.
    • Ex) 이미지 공유 서비스인 Pinterest의 경우 성능 최적화를 통해 매출을 40% 증가

 

  1. 비즈니스 성과 향상: 사용자들이 웹 사이트에 빠르게 접근할수록 그들이 원하는 정보에 더 빠르게 도달
    • Ex) Google 연구 결과 - 페이지 로딩 시간이 1초에서 3초로 증가하면 이탈률이 32%로 증가하고, **1초에서 10초로 증가하면 이탈률이 123%**까지 증가 ( Google / SOASTA Research, 2017 )
  2. 이용자 이탈 방지: 웹 페이지가 빠르게 로드하면 사용자 경험을 향상시키고, 사용자는 페이지를 떠나거나 이탈하지 않고 더 오래 머무를 가능성이 높아짐
  3. 검색 엔진 최적화: Google은 웹 성능 지표가 검색 엔진 순위에 영향을 미친다고 발표
  • 빠른 웹 페이지는 사용자에게 더 좋은 경험을 제공하므로 검색 엔진은 이러한 웹 페이지를 더 높은 순위로 평가
  • 콘텐츠 가시성 향상 ( 웹 페이지가 더 빠르게 로드되면 가시성 향상 ), 이탈율 감소 등의 이유로 검색엔진 순위가 더 높게 평가됨
  • 구글은 페이지 속도를 웹 페이지의 순위 결정에 영향을 미치는 요소 중 하나로 사용함. 따라서, 빠른 웹 페이지는 구글에서 더 높은 순위를 얻을 수 있음

4. 사용자 경험: 빠른 로딩 시간과 사용자 친화적인 인터페이스는 사용자들이 웹 사이트를 더 즐겁게 이용할 수 있도록 도와줌

  • Ex) 여러 기업들이 LCP(Largest Contentful Paint)를 개선함으로써 판매 증가와 세션 시간 증가를 경험

 

성능 측정 지표 알아보기

 

FCP ( First Contentful Paint ) 사용자가 페이지로 처음 이동한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링된 시점까지의 시간
LCP ( Largest Contentful Paint ) 사용자가 처음 페이지로 이동한 시점을 기준으로 표시 영역 내에 표시되는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간
Speed Index 페이지 로드 중에 콘텐츠가 시작적으로 표시되는 속도
Time to Interactive (TTI) 페이지 로드가 시작된 시점부터 기본 하위 리소스가 로드되어 사용자 입력에 빠르고 안정적으로 반응할 수 있는 시점까지의 시간
Total Blocking Time (TBT) 입력 응답성을 방지하기에 충분한 시간 동안 기본 스레스가 차단된 콘텐츠가 포함된 첫 페인트 ( FCP) 이후의 총 시간을 측정
Cumulative Layout Shift (CLS) 페이지의 전체 수명 동안 발생하는 모든 예상치 못한 레이아웃 변경에 관한 레이아웃 변경 점수

 

 

성능 개선 방안 알아보기

1. 블록 리소스 (CSS, JS) 최적화

  • CSS 최적화
    • 스타일 시트를 가져올 때, 렌더링이 차단되지 않도록 HTML 문서 최상단 <head> 태그에 배치
    • 외부 스타일 시트를 가져올 때 @import 문 지양, 내부 스타일 시트는 head 태그에 추가
  • JS 최적화
  • 자바스크립트는 HTML 문서 최하단(</body> 태그 직전)에 배치
  • 혹은 <script> 태그에 defer나 async 속성을 명시해서 HTML 파싱을 멈추지 않도록 결정
<head>
	<script async src="/test.js" type="text/javascript"></script> -> 브라우저가 페이지를 파싱을 하는 동안에도 스크립트 실행
	<script defer src="/test.js" type="text/javascript"></script> -> 페이지가 파싱이 끝난 후 실행
	<script async defer src="/test.js" type="text/javascript"></script> -> 브라우저가 페이지를 파싱을 하기전에 스크립트를 가져와 실행
</head>

 

2. 리소스 요청 수 줄이기: 필요한 리소스만 요청할 수 있도록 최적화

  1. 이미지 스트라이트 -> 이미지 스트라이트 기업을 사용해 여러 개의 이미지를 하나의 이미지로 합쳐 요청을 한 번으로 줄이기
  2. CSS, JS 번들
    • Webpack과 같은 모듈 번들러를 사용하여 파일 요청수 줄이기
  3. 내부 스타일시트 활용
    • <link> 태그로 외부 스타일 시트를 모두 가져오는 것 대신에 문서 안에서 <style> 태그를 사용해 스타일링
  4. 작은 이미지를 HTML, CSS로 대체
    • 이미지를 다운로드해서 사용하는 것 대신 Data URI로 처리

3. 리소스  용량 줄이기

  1.  중복 코드 제거
    • 예를 들어, 페이지별로 중복되는 함수가 있다면 utils.js라는 파일을 만들어서 중복되는 함수들을 정리해서 사용
  2. Tree-shaking 작업
    • 외부 라이브러리에서 import를 할 때 모든 함수를 가져오지 않고 필요한 함수만 가져와서 사용
  3. HTML 마크업 최적화 및 간결한 CSS 셀렉터 사용
    • HTML의 태그는 최대한 중첩하지 않고 단순하게 구성, 간결한 CSS 선택자를 사용하여 용량 최적화
  4. 압축(minify)해서 사용
    • HTML, JS, CSS 파일을 모두 난독화하고 압축해서 사용

4. 웹 페이지 렌더링 최적화

  • 렌더링: DOM, CSS를 그리는 시간과 JS를 실행하는 시간, 그리고 JS로 인해 DOM, CSS 변경이 다시 화면에 그려지는 시간이 모두 포함
  • 자바스크립트는 브라우저에서 단일 스레드로 동작하기 때문에 JS의 실행 시간은 렌더링 성능과 직결됨
    1. 레이아웃 최적화
      • 강제 동기 레이아웃 및 레이아웃 스래싱 피하기, 하위 노드 DOM으로 조작하기, HTML 및 CSS 최적화하기
    2. 애니메이션 최적화
      • 애니메이션을 구현할 때 네이티브 자바스크립트 API를 사용하는 것보다 CSS 사용을 권장
      • Ex) setTimeOut, setInterval 대신에 requestAnimationFrame 사용하기
    3. 서버 요청 최적화
      • HTML, JS, CSS 파일을 모두 난독화하고 압축해서 사용
저작자표시 (새창열림)