Optimization

김나율·2022년 12월 5일
최적화
0

section4

목록 보기
4/9

◎Optimization

: 가능한 적은 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것

‣최적화의 필요성 및 효과

  1. 이탈률 감소: 방문자가 웹 사이트의 첫 페이지에서 아무런 상호작용도 하지않고 종료하는 것을 줄이기 가능
  2. 전환율 증가: 웹 사이트를 방문한 사용자 중 회우너가입, 상품 구매 등의 행위를 한 방문자의 비율 늘리기 가능
  3. 수익 증대
  4. 사용자 경험(UX) 향상

◎Optimazation 기법

‣최적화 기법

  • HTMl, CSS 코드 최적화하기
    • HTML 최적화 방법
    1. DOM 트리 가볍게 만들기
      => DOM트리가 깊을수록, 자식요소가 많을수록 DOM 트리의 복잡도는 커진다.
      ex) 불필요한 div요소 제거
        <div> //제거
	   <ol>
		<li> 첫 번째 </li>
		<li> 두 번째 </li>
		<li> 세 번째 </li>
	   </ol>
  </div>  //제거
    2. 인라인 스타일 사용하지 않기
      ex)
      //수정 전
<div style="margin: 10px;"> 마진 10px </div>
//수정 후 : class와 CSS로 대체
<div class="margin10"> 마진 10px </div>
.margin10 {
	margin: 10px;
}
    • CSS 최적화 방법
      1. 사용하지 않는 CSS 제거하기
      2. 간결한 셀렉터 사용하기
  • 리소스 로딩 최적화하기
    1. CSS 파일 불러오기
      : CSS 코드를 모두 해석해야 구성할 수 있는 CSSOM 트리를 가능한 빠르게 구성할 수 있도록 HTMl 문서 최상단에 배치한다.
      => head 요소 안에 불러오기
    2. javascript 파일 불러오기
      : DOM 트리 생성이 완료되는 시점인 HTML 문서 최하단에 배치하는 것이 좋다.
      => body요소가 닫히기 직전에 작성하기
  • 브라우저 이미지 최적화하기
    1. 이미지 스프라이트
      : 여러 개의 이미지를 모아 하나의 스프라이트 이미지를 만들고 CSS의 background-position 속성을 사용해 이미지의 일정부분만 클래스 등으로 구분하여 사용하는 방법
    2. 아이콘 폰트 사용하기
    3. WebP 또는 AVIF 이미지 포맷 사용하기
  • CDN 사용하기
    : 유저가 가까운 곳에 위치한 데이터 센터의 데이터를 가져온다.
    그러므로 데이터가 전달되기 위해 거쳐야하는 서버의 갯수가 크게 줄어 로딩속도가 빨라진다.

‣캐시 관리

  • 캐시 사용하기
    -캐시: 다운로드 받은 데이터나 값을 미리 복사해 놓는 임시 장소
    1. 서버에서 응답을 보내줄떄 헤더에 Cache-Control을 작성해서 보내준다.
      ex) Cache-Control: max-age=60 : 60초 동안 유효
    2. 두번째 요청시 캐시에 데이터가 존재하면서 아직 60초가 지나지 않아 유효하다면 캐시에서 해당하는 데이터를 가져온다.
    3. 60초가 지나면 서버에서 다시 받아온다.
  • 캐시 검증 헤더와 조건부 요청
    => 유효시간이 지났지만 서버에서 다시 받아와야 하는 파일이 캐시에 저장되어 있는 파일과 완전히 동일한 경우
    • 캐시 검증 헤더
      : 캐시에 저장된 데이터오 서버의 데이터가 동일한지 확인하기 위한 정보를 답은 응답 헤더
      -Last-Mpdofied: 데이터가 마지막으로 수정된 시점
      -Etag: 데이터의 버전
    • 조건부 요청 헤더
      : 캐시의 데이터와 서버의 데이터가 동일하다면 재사용하게 해달라는 의미의 요청 헤더
      -If-Modified-Since: 캐시된 리소스의 Last-Modified값 이후에 서버 리소스가 수정되었는지 화인하고, 수정되지 않았다면 캐시된 리소스를 사용한다.
      -If-None-Match: 캐시된 리소스의 Etag값과 현재 서버 리소스의 ETag 값이 같은지 확인하고, 같으면 캐시된 리소스를 사용한다.

‣Tree shaking

: 불필요한 코드를 제거하는 것

  • JacaScript 트리 쉐이킹
  1. 필요한 모듈만 import하기
  2. Bablerc파일 설정하기
//ES5로 변환하는 것을 막을수 있다.
  “presets”: [ 
    [
      “@babel/preset-env”,
      {
	    "modules": false
      }
    ]
 ]
}
  1. sideEffects 설정하기
//애프리케이션 전체에서 사이드 이펙트가 발생하지 않을것이라고 알려줌.
{
  "name": "tree-shaking",
  "version": "1.0.0",
  "sideEffects": false  // 특정파일 => ["./src/components/NoSideEffect.js"] 
}
  1. ES6문법을 사용하는 모듈 사용하기

‣Lighthouse

: 웹 페이지의 품질을 개선할 수 있는 자동화 툴
=> 다양한 지표를 이용하여 웹페이지의 성능 검사를 해줄뿐만 아니라 그에 대한 개선책도 제공

  • Lighthouse 분석 결과 항목
    1. Performane: 웹 성능 측정
    2. Accessibility: 웹페이지가 웹 접근성을 잘 갖추고 있는지 확인
    3. Best Practices: 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인
    4. SEO: 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인
    5. PWA: 해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인
  • Lighthouse의 Performance 측정 메트릭
    1. FCP(First Contentful Paint)
      : 성능지표를 추적
      -사용자가 페이지에 접속했을 때 브라우저가 DOM 컴텐츠의 첫 번째 부분을 렌더링하는데 걸리는 시간을 측정
      -우수한 사용자 경험을 제공하려면 FCP가 1.8초 이하여야한다.
    2. LCP(Largest Contentful Paint)
      -뷰포트를 차지하는 가장 큰 콘텐츠의 렌더 시간을 측정
    3. Speed Index
      : 성능지표를 추적
      -페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 시각적으로 표시되는 지를 측정
    4. TTI(Time to interactive)
      -페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정
    5. TBT(Total Blocking Time)
      -페이지가 유저와 상호작용하기까지의 막혀있는 시간을 측정
      -FCP와 TTI 사이에 긴 시간이 걸리는 작업들을 모두 기록하여 TBT를 측정
    6. CLS(Cumulative Layout Shift)
      -사용자에게 컨텐츠가 화면에서 얼마나 많이 움직이는지(불안정한 지)를 수치화한 지표
  • 개선방향잡기
    => 무엇이 시간을 많이 소모하는지, 어떻게 개선하여 최적화를 할 수 있을지 해결책 제시
profile
김나율
이전 포스트

[TIL] 12.2 ( Testbuilder)

다음 포스트

Lighthouse(Opportunities를 통해 최적화하기)

0개의 댓글