
◎Optimization
: 가능한 적은 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것
‣최적화의 필요성 및 효과
- 이탈률 감소: 방문자가 웹 사이트의 첫 페이지에서 아무런 상호작용도 하지않고 종료하는 것을 줄이기 가능
- 전환율 증가: 웹 사이트를 방문한 사용자 중 회우너가입, 상품 구매 등의 행위를 한 방문자의 비율 늘리기 가능
- 수익 증대
- 사용자 경험(UX) 향상
◎Optimazation 기법
‣최적화 기법
- HTMl, CSS 코드 최적화하기
- DOM 트리 가볍게 만들기
=> DOM트리가 깊을수록, 자식요소가 많을수록 DOM 트리의 복잡도는 커진다.
ex) 불필요한 div요소 제거 <div>
<ol>
<li> 첫 번째 </li>
<li> 두 번째 </li>
<li> 세 번째 </li>
</ol>
</div>
- 인라인 스타일 사용하지 않기
ex)
<div style="margin: 10px;"> 마진 10px </div>
<div class="margin10"> 마진 10px </div>
.margin10 {
margin: 10px;
}
- CSS 최적화 방법
- 사용하지 않는 CSS 제거하기
- 간결한 셀렉터 사용하기
- 리소스 로딩 최적화하기
- CSS 파일 불러오기
: CSS 코드를 모두 해석해야 구성할 수 있는 CSSOM 트리를 가능한 빠르게 구성할 수 있도록 HTMl 문서 최상단에 배치한다.
=> head
요소 안에 불러오기
- javascript 파일 불러오기
: DOM 트리 생성이 완료되는 시점인 HTML 문서 최하단에 배치하는 것이 좋다.
=> body
요소가 닫히기 직전에 작성하기
- 브라우저 이미지 최적화하기
- 이미지 스프라이트
: 여러 개의 이미지를 모아 하나의 스프라이트 이미지를 만들고 CSS의 background-position
속성을 사용해 이미지의 일정부분만 클래스 등으로 구분하여 사용하는 방법
- 아이콘 폰트 사용하기
- WebP 또는 AVIF 이미지 포맷 사용하기
- CDN 사용하기
: 유저가 가까운 곳에 위치한 데이터 센터의 데이터를 가져온다.
그러므로 데이터가 전달되기 위해 거쳐야하는 서버의 갯수가 크게 줄어 로딩속도가 빨라진다.
‣캐시 관리
- 캐시 사용하기
-캐시: 다운로드 받은 데이터나 값을 미리 복사해 놓는 임시 장소
- 서버에서 응답을 보내줄떄 헤더에
Cache-Control
을 작성해서 보내준다.
ex) Cache-Control: max-age=60
: 60초 동안 유효
- 두번째 요청시 캐시에 데이터가 존재하면서 아직 60초가 지나지 않아 유효하다면 캐시에서 해당하는 데이터를 가져온다.
- 60초가 지나면 서버에서 다시 받아온다.
- 캐시 검증 헤더와 조건부 요청
=> 유효시간이 지났지만 서버에서 다시 받아와야 하는 파일이 캐시에 저장되어 있는 파일과 완전히 동일한 경우
- 캐시 검증 헤더
: 캐시에 저장된 데이터오 서버의 데이터가 동일한지 확인하기 위한 정보를 답은 응답 헤더
-Last-Mpdofied
: 데이터가 마지막으로 수정된 시점
-Etag
: 데이터의 버전
- 조건부 요청 헤더
: 캐시의 데이터와 서버의 데이터가 동일하다면 재사용하게 해달라는 의미의 요청 헤더
-If-Modified-Since
: 캐시된 리소스의 Last-Modified
값 이후에 서버 리소스가 수정되었는지 화인하고, 수정되지 않았다면 캐시된 리소스를 사용한다.
-If-None-Match
: 캐시된 리소스의 Etag
값과 현재 서버 리소스의 ETag
값이 같은지 확인하고, 같으면 캐시된 리소스를 사용한다.
‣Tree shaking
: 불필요한 코드를 제거하는 것
- 필요한 모듈만 import하기
- Bablerc파일 설정하기
“presets”: [
[
“@babel/preset-env”,
{
"modules": false
}
]
]
}
- sideEffects 설정하기
{
"name": "tree-shaking",
"version": "1.0.0",
"sideEffects": false
}
- ES6문법을 사용하는 모듈 사용하기
‣Lighthouse
: 웹 페이지의 품질을 개선할 수 있는 자동화 툴
=> 다양한 지표를 이용하여 웹페이지의 성능 검사를 해줄뿐만 아니라 그에 대한 개선책도 제공
- Lighthouse 분석 결과 항목
- Performane: 웹 성능 측정
- Accessibility: 웹페이지가 웹 접근성을 잘 갖추고 있는지 확인
- Best Practices: 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인
- SEO: 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인
- PWA: 해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인
- Lighthouse의 Performance 측정 메트릭
- FCP(First Contentful Paint)
: 성능지표를 추적
-사용자가 페이지에 접속했을 때 브라우저가 DOM 컴텐츠의 첫 번째 부분을 렌더링하는데 걸리는 시간을 측정
-우수한 사용자 경험을 제공하려면 FCP가 1.8초 이하여야한다.
- LCP(Largest Contentful Paint)
-뷰포트를 차지하는 가장 큰 콘텐츠의 렌더 시간을 측정
- Speed Index
: 성능지표를 추적
-페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 시각적으로 표시되는 지를 측정
- TTI(Time to interactive)
-페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정
- TBT(Total Blocking Time)
-페이지가 유저와 상호작용하기까지의 막혀있는 시간을 측정
-FCP와 TTI 사이에 긴 시간이 걸리는 작업들을 모두 기록하여 TBT를 측정
- CLS(Cumulative Layout Shift)
-사용자에게 컨텐츠가 화면에서 얼마나 많이 움직이는지(불안정한 지)를 수치화한 지표
- 개선방향잡기
=> 무엇이 시간을 많이 소모하는지, 어떻게 개선하여 최적화를 할 수 있을지 해결책 제시