웹 성능 최적화를 해야 하는 이유
- 성능 최적화 : 웹 페이지가 사용자에게 빠르게 표시되도록 하는 작업
- 무거워진 웹 로딩은 사용자 경험을 떨어뜨리고, 비즈니스에 큰 영향을 끼치기 때문에 성능 체크가 매우 중요.
- Ex) 이미지 공유 서비스인 Pinterest의 경우 성능 최적화를 통해 매출을 40% 증가
- 비즈니스 성과 향상: 사용자들이 웹 사이트에 빠르게 접근할수록 그들이 원하는 정보에 더 빠르게 도달
- Ex) Google 연구 결과 - 페이지 로딩 시간이 1초에서 3초로 증가하면 이탈률이 32%로 증가하고, **1초에서 10초로 증가하면 이탈률이 123%**까지 증가 ( Google / SOASTA Research, 2017 )
- 이용자 이탈 방지: 웹 페이지가 빠르게 로드하면 사용자 경험을 향상시키고, 사용자는 페이지를 떠나거나 이탈하지 않고 더 오래 머무를 가능성이 높아짐
- 검색 엔진 최적화: 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. 리소스 요청 수 줄이기: 필요한 리소스만 요청할 수 있도록 최적화
- 이미지 스트라이트 -> 이미지 스트라이트 기업을 사용해 여러 개의 이미지를 하나의 이미지로 합쳐 요청을 한 번으로 줄이기
- CSS, JS 번들
- Webpack과 같은 모듈 번들러를 사용하여 파일 요청수 줄이기
- 내부 스타일시트 활용
- <link> 태그로 외부 스타일 시트를 모두 가져오는 것 대신에 문서 안에서 <style> 태그를 사용해 스타일링
- 작은 이미지를 HTML, CSS로 대체
- 이미지를 다운로드해서 사용하는 것 대신 Data URI로 처리
3. 리소스 용량 줄이기
- 중복 코드 제거
- 예를 들어, 페이지별로 중복되는 함수가 있다면 utils.js라는 파일을 만들어서 중복되는 함수들을 정리해서 사용
- Tree-shaking 작업
- 외부 라이브러리에서 import를 할 때 모든 함수를 가져오지 않고 필요한 함수만 가져와서 사용
- HTML 마크업 최적화 및 간결한 CSS 셀렉터 사용
- HTML의 태그는 최대한 중첩하지 않고 단순하게 구성, 간결한 CSS 선택자를 사용하여 용량 최적화
- 압축(minify)해서 사용
- HTML, JS, CSS 파일을 모두 난독화하고 압축해서 사용
4. 웹 페이지 렌더링 최적화
- 렌더링: DOM, CSS를 그리는 시간과 JS를 실행하는 시간, 그리고 JS로 인해 DOM, CSS 변경이 다시 화면에 그려지는 시간이 모두 포함
- 자바스크립트는 브라우저에서 단일 스레드로 동작하기 때문에 JS의 실행 시간은 렌더링 성능과 직결됨
- 레이아웃 최적화
- 강제 동기 레이아웃 및 레이아웃 스래싱 피하기, 하위 노드 DOM으로 조작하기, HTML 및 CSS 최적화하기
- 애니메이션 최적화
- 애니메이션을 구현할 때 네이티브 자바스크립트 API를 사용하는 것보다 CSS 사용을 권장
- Ex) setTimeOut, setInterval 대신에 requestAnimationFrame 사용하기
- 서버 요청 최적화
- HTML, JS, CSS 파일을 모두 난독화하고 압축해서 사용
- 레이아웃 최적화
'TMI' 카테고리의 다른 글
| Spring 란? (0) | 2024.05.11 |
|---|---|
| 패스트캠퍼스 CampCON 후기 (0) | 2024.03.27 |
| [프로젝트] 엘리스 1차 프로젝트 후기 (0) | 2024.03.05 |
| [프로그래밍 패러다임] 함수형 프로그래밍 (0) | 2024.02.25 |
| [Electron] 일렉트론 기초 학습!! (1) | 2024.01.27 |
