오늘의 학습내용

최적화(Optimization)

1. 최적화 효과

: 웹 개발에서의 최적화는 화면을 최대한 빠른 속도로 표시하게 하는 것을 의미함.

• 사이트 이탈률 감소
• 전환율 증가
• 수익 증대
• UX 향상

2. 최적화 기법

2-1) HTML

• DOM tree 가볍게 만들기
  : tree의 깊이를 증가시키는 불필요한 부분을 없애자

• CSS 인라인 스타일 지양하기

2-2) CSS

• 불필요한 CSS제거하기
  : CSS 코드를 모두 해석 한 후 CSSOM tree가 생성되기 때문에 최대한 불필요한 코드를 제거하자

• Selector명 간결하게하기

2-3) 리소스 로딩

• CSS파일은 head 최상단에 위치하기
  : 한줄 한줄 코드를 읽으며 구성이 가능한 HTML과 다르게 CSSOM tree는 코드의 모든 해석이 끝난 뒤 구성되기 때문에 최상단에 두는것이 효율적임

• Javascript 파일은 body 최하단에 위치하기
  : HTML 해석 중, js script를 만나면 자바스크립트 파일이 실행되기 때문에 DOM tree 생성이 중단되며 이는 웹사이트 최적화에 부적합한 요인으로 작용함

2-4) 브라우저 이미지 최적화하기

• 이미지 스프라이트
  : 여러 개의 이미지를 하나의 스프라이트 이미지로 만들어 CSS의 background-position 속성/클래스로 나누어 사용하는 방법

• 아이콘 폰트 활용
  : 대표 예로 font-awsome이 있다(React는 npm 모듈로 설치하여 사용 가능)

• 최신 이미지포맷(WebP/AVIF) 사용하기
  : 최신 이미지 포맷인 관계로 일부 브라우저에서는 구현이 안되는 문제가 있으나 picture태그 내 source 태그를 이용하여 대체 이미지 구현이 가능함

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>

2-5) CDN 사용하기

: 사용자에게 가까운 서버를 연결해줌으로써 데이터 전달 속도를 향상시킨다

3. 캐시(Cache) 관리

: 캐시에 저장한 데이터를 재활용함으로써 웹 성능을 향상할 수 있다

캐시 검증 헤더와 조건부 요청

• Last-Modified(검증 헤더) - If-Modified-Since(조건부요청 헤더)
• Etag(검증 헤더) - If-None-Match(조건부요청 헤더)

4. 트리쉐이킹(Tree Shaking)

: 코드를 제거하는 것을 의미하며 최근들어 Javascript파일의 크기가 커지면서 필요성이 대두됨

• 필요한 모듈만 import하기

// react에서 useState, useEffect만 불러오기
import {useState, useEffect} from 'react';

• Babelrc 파일 설정하기
  : 구문법인 ES5문법으로 변환을 시켜주는 바벨 파일을 관리함으로서 트리쉐이킹에 용이하게 한다. (ES5문법은 import를 지원하지 않음)

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

• sideEffects 설정하기
  : sideEffect가 일어날 수 있는 코드는 제외하고 트리쉐이킹이 진행되기 때문에 이를 설정해 줄 필요가 있음.

// sideEffect가 없으므로 트리쉐이킹이 가능함을 알려주는 설정
// sideEffects : '해당 파일경로'로 작성하는 것도 가능
{
  "name": "tree-shaking",
  "version": "1.0.0",
  "sideEffects": false
}