Section 4 - Unit 8 [최적화] Optimization

최적화

: 가장 적은 자원(메모리, 시간 복잡도..등)를 사용하면서 원하는 결과를 효율적으로 얻도록 코드 작업을 실시하는 것을 코드 최적화라고 함

[필요성]

• 이탈률 감소
• 전환율 증가
• 수익 증대
• 더 나은 UX 제공

최적화 기법 (HTML, CSS)

[HTML]

• DOM 트리 가볍게
  : 트리의 깊이아 깊어 질 수록 트리의 상위 요소 및 상태 변경 시 reflow 및 트리 재구축을 위한 많이 자원이 소모 될 수 있음
• 인라인 스타일 지양
  : 인라인 스타일 사용은 같은 스타일 코드를 중복되게 여러번 작성하게 해 파일을 무겁게 만들 수 있음

[CSS]

• 사용하지 않는 CSS 제거
  : 렌더링과정에서 생성하는 CSSOM은 사용하지 않은 CSS 요소라도 가져가 트리를 구축하기에 사용하지 않으면 제거하는게 맞음

• 간결한 셀렉터 사용
  : 복잡하게 셀렉터를 사용할 경우 해당 요소를 탐색하는데 보다 많은 자원을 소모하게 될 수 있음

[리소스 로딩 최적화]

• CSS 파일 최상단 배치
  : HTML 파일 최상단에 배치해 CSS를 호출해 CSSOM을 빠르게 생성하는 것이 효율적

• JavaScript 파일 최하단 배치
  : 빠른 렌더링을 위해서 DOM트리 생성이 필요한데, script 해석이 시작되면 DOM트리 생성이 일시중지 됨으로, DOM 생성을 우선하기 위해 최하단 배치
  But>> head 위치에 defer을 사용해 js파일을 불러오는 방식이 좀 더 최적화된 로드 방식으로 해석되고 있음

[브라우저 이미지 최적화]

• 이미지 스프라이트
  : 여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만들고 CSS의 width, height, background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법--> 하나의 이미지만 서버에 요청해서 사용하면 됨으로 요청 횟수 감소
  ex) 네이버

• 아이콘 폰트 사용
  : 이미지 대신 아이콘 폰트 사용시 용량 많이 감소됨
  (CDN, 모듈 설치 후 사용)

• WebP 또는 AVIF 이미지 포맷 사용하기
  : 이미지 용량 효율과 압축 효율이 매우 뛰어난 이미지 형식이지만, 많은 브라우저에서 지원하고 있지는 않음
  But 태그를 사용해 해당 이미지 형식이 적용되는 브라우저에 대한 분기를 대체할 수 있음

[CDN]

• Content Delivery Network
  : 데이터 서버를 세계 곳곳에 위치시켜 서버 요청을 최대한 가까운 서버에 요청할 수 있도록 함 (통신 시간 감소)

캐시 관리

[캐시 사용]
: 다운로드 받은 데이터 정보를 미리 복사해 놓은 임시 저상소로 중복된 데이터에 대한 캐시 유효시간 동안 요청을 방지함

• 캐시 유효시간 동안 네트워크 자원 절약
• 요청이 필요없음으로 브라우저 로딩 개선
• 결론, 더 나은 UX 제공
  [기타 캐쉬 헤더]
  Cache-Control: max-age
  : 최대유효기간
  Cache-Control: no-cache
  : 캐시 사용 안함 (매번 새롭게 서버에서 받아 옴), 명시적인 의미가 강함
  Cache-Control: no-store
  :default 설정으로, 캐시해온 데이터를 저장하지 않음, 결국 no-cache와 비슷하게 동작
  Cache-Control: public
  : 공개된 공간에 캐시 저장, 노출o
  Cache-Control:private
  : 비공개된 공간에 캐시 저장, 노출x

++ no-cache vs no-store
사용 전 서버에서 재검증해야 하는 자원의 경우 Cache-Control: no-cache.
캐싱되지 않아야 하는 자원(개인정보)의 경우 Cache-Control: no-store.

[캐시 검증 헤더와 조건부 요청]
: 유효시간이 시간 캐시 정보와 일치하는 데이터를 재요청해 받아오는 것을 방지?

• 캐시 검증 헤더
  : 캐시에 저장된 데이터와 서버의 데이터가 동일한지 확인하기 위한 정보를 담은 응답 헤더

  • Last-Modified
    : 데이터가 마지막으로 수정된 시점을 의미하는 응답 헤더로, 조건부 요청 헤더인 If-Modified-Since 와 묶어서 사용
  • Etag : 데이터의 버전을 의미하는 응답 헤더로, 조건부 요청 헤더인 If-None-Match 와 묶어서 사용

• 조건부 요청 헤더
  : 캐시의 데이터와 서버의 데이터가 동일하다면 재사용하게 해달라는 의미의 요청 헤더

  • If-Modified-Since
    : 캐시된 리소스의 Last-Modified 값 이후에 서버 리소스가 수정되었는지 확인하고, 수정되지 않았다면 캐시된 리소스를 사용합니다.
  • If-None-Match
    : 캐시된 리소스의 ETag 값과 현재 서버 리소스의 ETag 값이 같은지 확인하고, 같으면 캐시된 리소스를 사용합니다.

• Last-Modified & If-Modified-Since 예시 통신과정
  
  
  
  

• Etag & If-None-Match 예시 통신과정
  
  
  

트리쉐이킹

: 불필요한 코드를 제거하는 과정
[Javascript 트리쉐이킹]

• 필요한 모듈만 import 하기
• Babelrc 파일 설정
  : Balbel을 사용할 경우 ES6 문법을 ES5로 바꿔주는데 ES5에서 모듈을 불러오는 방식인 require은 export되는 모든 모듈을 가져옴으로 해당 동작을 막아주는 설정을 해주는 것이 좋음

“presets”: [ 
    [
      “@babel/preset-env”,
      {
	    "modules": false
      }
    ]
 ]

• sideEffects 설정하기
  : 번들링시 특정 코드가 사이트 이펙트가 발생하지 않음을 webpack에 알려 압축시 제외 시킬 수 있음
• ES6 문법을 사용하는 모듈 사용하기
  : ES5->ES6 로 대체할 수 있으면 대체해 필요한 모듈만 불러오도록 설계하는 것이 좋음

LightHouse

: Lighthouse는 구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴
Lighthouse는 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있음

[Lighthouse 분석 결과 항목]

• Performance
  : Performance 웹 성능을 측정하는 항목으로 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인
• Accessibility
  : Accessibility 항목에서는 웹 접근성을 잘 갖추었는지 확인하는 항목으로 대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인
• Best Practices
  : Best Practices 항목에서는 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인하는 항목으로 HTTPS 프로토콜을 사용하는지, 사용자가 확인할 확률은 높지 않지만 콘솔 창에 오류가 표시 되지는 않는지 등을 확인
• SEO(Search Engine Optimaziation)
  : SEO 항목에서는 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인하는 항목으로 애플리케이션의 robots.txt가 유효한지, 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리가 없는지 등을 확인
• PWA(Progressive Web App)
  : PWA 항목에서는 해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인하는 항목으로 앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인합니다.

[Lighthouse의 Performance 측정 메트릭]

• First Contentful Paint
  : FCP는 사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정함

  🔔 우수한 사용자 경험을 위해선 1.8초 이하

• Largest Contentful Paint
  :Largest Contentful Paint, 줄여서 LCP는 뷰포트를 차지하는 가장 큰 콘텐츠(이미지 또는 텍스트 블록)의 렌더 시간을 측정

  🔔

• Speed Index
  :Speed Index는 페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 시각적으로 표시되는 지를 측정

  🔔
  

• Time to interactive
  :Time to interactive, 줄여서 TTI는 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정

  🔔

  • Total Blocking Time
    : TBT는 페이지가 유저와 상호작용하기까지의 막혀있는 시간을 측정합니다. Lighthouse에서는 FCP와 TTI 사이에 긴 시간이 걸리는 작업들을 모두 기록하여 TBT를 측정 (50ms이후의 시간이 막혀있는 시간)

  🔔 0-200 빠름, 200-600 보통, 600~ 느림

  • Cumulative Layout Shift
    : CLS는 사용자에게 컨텐츠가 화면에서 얼마나 많이 움직이는지(불안정한 지)를 수치화한 지표입니다. 이 지표를 통해 화면에서 이리저리 움직이는 요소(불안정한 요소)가 있는 지를 측

  • Opportunities
    : 분석한 결과를 바탕으로 개선방향 및 개선책 추천 해줌

-출처 코드스테이츠