[최적화] Optimization

🚩 최적화

• 주어진 조건으로 최대 효율을 낼 수 있도록 하는 것
• 컴퓨터공학에서는 최소한의 리소스로 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는것
• 웹 개발에서는 주어진 조건안에서 최대한 빠르게 화면을 표시하는것

🧩 최적화 필요성

1. 이탈률 감소 : 로딩 3초이상이면 반이상 사이트를 이탈함
2. 전환율 증가 : 웹사이트 방문자중 회원가입, 구매 등 행위를 한 방문자의 비율을 의미함
3. 수익 증대 : 빠른 웹사이트는 수익을 증대시킨다
4. 사용자경험(UX) 향상 : 최적화는 UX를 개선시킨다.

🧩 최적화 기법

• HTML 최적화 기법

  • dom트리 가볍게 만들기 : 불필요한 div태그등 제거
  • 인라인 스타일 사용하지 않기 : css는 style말고 class로 전해주기

• CSS 최적화 기법

  • 간결한 셀렉터 사용하기

  // 복잡한 CSS 셀렉터 예시
  .cart_page .cart_item #firstItem { ... }
  
  // 필요한 경우에는 어쩔 수 없지만, 가능한 한 간결하게 작성해줍니다.
  .cart_item { ... }

• 리소스 로딩 최적화

  • html에서 js불러올땐 script 태그, css불러올땐 link태그 쓰는데, 파일을 불러오는 위치가 어디냐에 따라 렌더링 완료시점이 달라질 수 있음
  1. CSS파일 불러오기 : CSS파일은 HTML 최상단인 head태그 안에서 배치하는게 좋음
  2. JS파일 불러오기 : js파일은 HTML최하단인 body요소가 닫히기 직전에 작성하는게 좋음.

• 브라우저 이미지 최적화하기

  • 이미지스프라이트 기법을 사용함. 이는 여러개의 이미지를 모아 하나의 스프라이트 이미지로 만들고, css의 background-position속성으로 이미지의 일정 부분만 클래스 등으로 구별하여 사용하는 방법이다.
    
  • 아이콘을 이미지가 아닌 폰트로 사용. font Awesome을 사용
  • webp, avif를 jpeg, png대신 사용하면 용량이 20퍼 이상 감소
  • 추가적으로 CDN을 알아보면 좋다.

🚩 캐시

• 캐시 : 다운받은 데이터나 값을 미리 복사해 놓는 임시 장소
• 예를들어 똑같은 이미지를 두번 다운로드 받을때 캐시를 저장해놓으면 HTTP헤더 용량만 전송해서 리소스를 아낀다.

🚩 트리셰이킹

• 나무를 흔들어 가지를 털어내듯 불필요한 코드를 제거하는 것
• 파일크기를 줄이면 최적화에 도움이 됨
• js파일은 cpu빨을 많이받아서 모바일환경에서 느려짐

🧩 JS 트리셰이킹

1. 필요한 모듈만 import 하기
   import React from 'react'하면 다 불려와진다. {useState}같이 쓸것만 가져올것
2. Babelrc파일 설정하기

• 다음과같이 코드를 설정하면 ES5로 변환되는걸 방지함

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

3. sideEffects 설정하기

• 웹팩은 사이드 이펙트를 일으킬 수 있는 코드의 경우, 사용하지 않는 코드라도 트리쉐이킹 대상에서 제외됨
• package.json파일에서 sideEffects를 설정하여 특정파일에서는 발생하지 않을것임을 알려줄 수 있음

{
  "name": "tree-shaking",
  "version": "1.0.0",
  "sideEffects": ["./src/components/NoSideEffect.js"]
}

4. ES6 문법을 사용하는 모듈 사용하기

🚩Lighthouse

• 크롬 개발자도구에서 선택할수 있는 웹페이지 퍼포먼스 검사 툴, 어떤 웹페이지든 검사가능