[최적화] Optimization

예진·2022년 12월 5일
최적화코드스테이츠 블로깅
0

코드스테이츠 블로깅

목록 보기
13/15

🔥 Optimization (최적화)

: 주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정
최적화는 허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정이다.
수익과 관련되는 분야에서는 이익을 최대로 내는 과정을 말하기도 한다.
다양한 분야와 때에 따라 다르게 정의할 수 있고 물류(logistics), 설계(design) 문제 등에 응용된다.

분야에 따라 의미가 조금씩 달라지긴 하지만, 최적화는 보통 주어진 조건으로 최대 효율을 낼 수 있도록 하는 것을 의미한다.

최적화의 필요성 및 효과

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

  1. 이탈률 감소
    최적화가 잘 되지 않으면 웹 페이지는 화면 로딩에 시간이 걸리고, 화면을 불러오는 시간이 길어지만 사용자가 페이지를 이탈할 확률이 높아진다.
    그러나 웹 사이트의 성능 최적화를 통해 페이지 로딩 속도를 줄이면, 사용자의 이탈률을 효과적으로 줄일 수 있어 최적화의 필요성을 알 수 있다.

  2. 전환율 증가
    이탈률이 줄어들면, 전환율이 높아질 확률도 커진다.
    전환률이란 웹 사이트를 방문한 사용자 중 회원가입, 상품 구매, 게시글 조회, 다운로드 등의 행위를 한 방문자의 비율을 의미한다.

  3. 수익 증대

  4. 사용자 경험(UX) 향상

🔥 Optimization 기법

1. 최적화 기법

HTML, CSS 코드 최적화하기

  • HTML 최적화 방법
  1. DOM 트리 가볍게 만들기
  2. 인라인 스타일 사용하지 않기
  • CSS 최적화 방법
  1. 사용하지 않는 CSS 제거하기
  2. 간결한 셀렉터 사용하기

리소스 로딩 최적화하기

  1. CSS 파일 불러오기
    DOM 트리는 HTML 코드를 한 줄 한 줄 읽으면서 순차적으로 구성할 수 있지만, CSSOM 트리는 CSS 코드를 모두 해석해야 구성할 수 있어서 HTML 문서 최상단에 배치하는 것이 좋다.
  2. JavaScript 파일 불러오기
    JavaScript는 DOM 트리와 CSSOM 트리를 동적으로 변경할 수 있고, 스크립트 실행이 완료되기 전까지 DOM 트리 생성이 중단되어 그 시간만큼 렌더링 완료 시간은 늦춰지게 된다.
    그러므로 JavaScript 파일은 DOM 트리 생성이 완료되는 시점인 HTML 문서 최하단에 배치하는 것이 좋다.

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

  1. 이미지 스프라이트
    : 여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만들고 CSS의 background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법
    해당 기법을 이용하면 한 번의 이미지 요청으로 대부분의 개별 이미지를 사용할 수 있기 때문에 네트워크 로딩 시간을 줄일 수 있다. 또한 많은 이미지 파일을 개별로 관리할 필요없이 특정 스프라이트 이미지 파일만을 관리하면 되므로 관리가 용이하다는 장점이 있다.
  2. 아이콘 폰트 사용하기
    아이콘 사용량이 많을 때에는 모든 아이콘을 이미지로 사용하는 것이 아니라 아이콘 폰트를 사용하여 용량을 줄일 수 있다. ( ex. Font Awesome )
  • Font Awesome 사용법
    (1) CDN으로 사용하기
    (2) Font Awesome 모듈 설치하기
  1. WebP 또는 AVIF 이미지 포맷 사용하기
    이미지 최적화를 위해 전통적으로 사용하는 JPEG 또는 PNG 형식이 아닌 새롭게 등장한 이미지 포맷인 WebP 또는 AVIF를 사용하여 용량을 더욱 감소시킬 수 있다.
    하지만 WebP와 AVIF 모두 비교적 최근에 등장한 이미지 포맷이기 때문에 JPEG 포맷처럼 모든 브라우저에서 호환되지 않는다는 단점이 있다.

CDN 사용하기

CDN은 콘텐츠를 좀 더 빠르고 효율적으로 제공하기 위해 설계되었다.
CDN은 유저가 가까운 곳에 위치한 데이터 센터(서버)의 데이터를 가져와서 데이터가 전달되기 위해 거쳐야하는 서버의 갯수가 크게 줄기 때문에 로딩 속도가 빨라진다.

2. 캐시 관리

캐시(Cache) : 다운로드 받은 데이터나 값을 미리 복사해 놓은 임시 장소
데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다.

브라우저 캐시(Cache)의 장점

  • 캐시가 유효한 시간 동안 네트워크 리소스를 아낄 수 있다.
  • 파일을 다시 받아올 필요가 없기 때문에 브라우저 로딩이 빨라진다.
  • 로딩이 빨라진 만큼 빠른 사용자 경험 제공이 가능하다.

캐시 검증 헤더

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

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

조건부 요청 헤더

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

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

3. Tree Shaking (트리쉐이킹)

: 말 그대로 나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것

JavaScript는 파일의 크기, 파일의 실행 시간 등의 이유로 가능하면 트리쉐이킹을 해주는 것이 좋다.

JavaScript 트리쉐이킹

  1. 필요한 모듈만 import 하기
    import 구문을 사용해 라이브러리를 불러와 사용할 때, 라이브러리 전체를 불러오는 것이 아니라 필요한 모듈만 불러우면 번들링 과정에서 사용하는 부분의 코드만 포함시키기 때문에 트리쉐이킹이 가능하다.

  2. Babelrc 파일 설정하기
    Babel : JavaScript 문법이 구형 브라우저에서도 호환이 가능하도록 ES5 문법으로 변환하는 라이브러리
    이 때 ES5문법은 import를 지원하지 않기 때문에 commonJS 문법의 require로 변경시킨다. require는 export 되는 모든 모듈을 불러오기 때문에 Barbelrc 파일에 아래 코드를 작성해주면 ES5로 변환하는 것을 막을 수 있다.

{
  “presets”: [ 
    [
      “@babel/preset-env”,
      {
	    "modules": false
        // modules 값을 true로 설정하면 항상 ES5 문법으로 변환하므로 주의해서 작성해야 함
      }
    ]
 ]
}
  1. sideEffects 설정하기
    웹팩은 사이드 이펙트를 일으킬 수 있는 코드의 경우, 사용하지 않는 코드라도 트리쉐이킹 대상에서 제외시킨다.
  1. ES6 문법을 사용하는 모듈 사용하기

4. Lighthouse

: 구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴
성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있다.
다양한 지표를 이용하여 웹페이지의 성능 검사를 해줄 뿐만 아니라 그에 대한 개선책도 제공해준다.

Lighthouse 시작하기

  1. 크롬에서 검사하고 싶은 페이지의 url을 입력한다.
  2. 개발자 도구를 연다.
  3. lighthouse 탭을 클릭한다.
  4. Generate report를 클릭하고, Categories에서 특정한 지표만 선택하여 검사할 수도 있다.
  5. 대략 30-60초간 검사가 실행된다. 그 후 리포트가 해당 페이지의 개발자 도구 내에 생성된다.

Lighthouse 분석 결과 항목

  1. Performance
  2. Accessibility
  3. Best Practices
  4. SEO
  5. PWA (Progressive Web App)

Lighthouse의 Performance 측정 메트릭

  1. First Contentful Paint
  2. Largest Contentful Paint
  3. Speed Index
  4. Time to interactive
  5. Total Blocking Time
  6. Cumulative Layout Shift
profile
예진
😊
이전 포스트

[React] 번들링과 웹팩

다음 포스트

[Deploy] CI/CD

0개의 댓글