Optimization 최적화

🥶 최적화, optimization

• 주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정.
• 최적화는 허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정이다.

     

컴퓨터 공학에서의 최적화 :

최소한의 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것을 의미!

 

최적화의 필요성 및 효과

 

1. 이탈률 감소

2. 전환율 증가

3. 수익 증대

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

 

📌HTML, CSS 코드 최적화하기

1. HTML 최적화 방법

(1) DOM 트리 가볍게 만들기

(2) 인라인 스타일 사용하지 않기

2. CSS 최적화 방법

(1) 사용하지 않는 CSS 제거하기

(2) 간결한 셀렉터 사용하기

 

 

 

📌리소스 로딩 최적화하기

 

1. CSS 파일 불러오기 → CSSOM 트리를 가능한 빠르게 구성할 수 있도록 HTML 문서 최상단에 배치

2. JavaScript 파일 불러오기 → 스크립트 생성이 끝날때까지 DOM트리 생성이 중단되어 렌더링이 느려져서 DOM트리 완성 후에 스크립트를 불러올 수 있도록 최하단에 위치하도록 한다.

 

 

 

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

 

1. 이미지 스프라이트

• 이미지 스프라이트 기법은 여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만들고 CSS의 background-position속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법
• 하나의 이미지를 배경 이미지로 사용하되, 표시하고 싶은 부분에 맞춰 width, height, background-position 속성을 주어 아이콘을 만듭니다

2. 아이콘 폰트 사용하기

(1) CDN으로 사용하기

(2) Font Awesome 모듈 설치하기

(3) WebP 또는 AVIF 이미지 포맷 사용하기 → 용량감소, 단 호환문제 발생

이미지 최적화를 위해 전통적으로 사용하는 JPEG 또는 PNG 형식이 아닌 새롭게 등장한 이미지 포맷인 WebP 또는 AVIF를 사용하여 용량을 더욱 감소시킬 수 있습니다. WebP는 PNG와 비교해 26% 용량이 감소되며 JPEG와 비교했을 땐 25-35% 더 감소됩니다. AVIF는 JPEG와 비교했을 때 무려 용량의 50%가 감소되며 WebP와 비교했을 땐 20% 감소됩니다.

 

 

📌CDN 사용하기

• CDN은 유저가 가까운 곳에 위치한 데이터 센터(서버)의 데이터를 가져옵니다. 그러므로 데이터가 전달되기 위해 거쳐야하는 서버의 갯수가 크게 줄기 때문에 로딩 속도가 빨라집니다.

 

 

캐시 사용하기

캐시(Cache)는 다운로드 받은 데이터나 값을 미리 복사해 놓는 임시 장소를 뜻함

1. 서버에서 응답을 보내줄 때 이미지 파일과 함께 헤더에 Cache-Control을 작성해서 보낸다.
2. 두번째 요청부터는 캐시를 우선조회한다. 이때 캐시가 유효하다면 캐시에서 해당하는 데이터를 가져와서 사용한다.
3. 캐시가 유효하지 않다면 서버에서 다시 이미지를 받아오게 된다.

• 이때 유효 시간은 지났지만 캐시에 저장되어있는 이미지와 받아와야 하는 이미지가 같다면 캐시 검증 헤더와 조건부 요청 헤더를 사용할 수 있다.

이렇게 브라우저 캐시를 활용했을 때의 효과

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

 

 

캐시 검증 헤더

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

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

 

조건부 요청 헤더

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

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

 

1. 첫번째 요청에서 캐시 유효시간이 60초인 이미지 파일을 같이 받아옴. 이때 Last-Modified 헤더에 담긴 내용도 캐시에 함께 저장 (서버의 파일 버전을 의미하는 Etag헤더에 담긴 내용도 캐시에 함께 저장)

2. 캐시 유효시간을 지난 후 두번째 요청에서

• If-Modified-Since를 작성해 저장해둔 Last-Modified 값과 함께 요청을 보낸다. 이 값을 이용해 서버데이터의 최종 수정일과 캐시에 저장된 데이터의 수정일이 같은지 확인한다. (If-None-Match를 작성하고 캐시에 함께 저장해놓았던 Etag 값을 담아 요청을 보내어 이 값을 이용해 서버 데이터의 Etag와 캐시에 저장된 데이터의 Etag를 비교합니다. 두 데이터가 동일한 데이터라면 두 Etag값이 같아야 합니다.)

 

3. 데이터가 수정되지 않았을 경우 304 Not Modified 응답.캐시 데이터의 유효시간이 갱신되어 재사용할 수 있게 된다.

 

 

 

트리쉐이킹(Tree Shaking)이란?

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

1. JavaScript 파일의 크기 증가

• HTTP 요청 수 또한 데스크탑에서 155.6%, 모바일에서 425.0% 증가함. 크기가 훨씬 커진 JavaScript 파일이 늘어난 요청 횟수만큼 더 오가는 것이니, 네트워크 리소스 소모가 그만큼 커졌다.

2. JavaScript 파일의 실행 시간 증가

 

 

JavaScript 트리쉐이킹

1. 필요한 모듈만 import 하기

import { useState, useEffect } from 'react'

불러오지 않은 코드는 빌드할 때 제외되므로 코드의 크기를 줄일 수 있게 됩니다.

 

 

2. Babelrc 파일 설정하기

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

Babel : 자바스크립트 문법이 구형 브라우저에도 호환 가능하도록 ES5 문법으로 변환.

es5는 import를 지원하지 않아 commonJS문법의 require로 변경시킨다.

require은 export되는 모든 모듈을 불러오기 때문에 필요하지 않은 모듈까지 모두 불러오게 된다.

이를 방지하기 위한 코드!!

modules값을 true로 설정하면 항상 ES5 문법으로 변환

 

3. sideEffects 설정하기

const crews = ['kimcoding', 'parkhacker']

const addCrew = function (name) {
	crews.push(name)
}

addCrew함수는 함수 외부에 있는 배열인 crews를 변경시키는 함수입니다.

 

해당 함수는 외부에 영향을 주지도 받지도 않는 함수, 순수 함수가 아니기 때문에 트리쉐이킹을 통해 제외하는 경우 문제가 생길 수도 있다고 판단해 웹팩은 이 코드를 제외시키지 않는다.

 

이럴 때 package.json 파일에서 sideEffects를 설정하여 사이드 이펙트가 생기지 않을 것이므로 코드를 제외시켜도 됨을 웹팩에게 알려줄 수 있습니다.

 

다음과 같이 작성하면 애플리케이션 전체에서 사이드 이펙트가 발생하지 않을 것이다.

{
  "name": "tree-shaking",
  "version": "1.0.0",
  "sideEffects": false
}

혹은 아래와 같이 작성하여 특정 파일에서는 발생하지 않을 것이다.

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

 

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

ES5 문법을 사용하는 모듈을 통째로 사용하는 상황이라면 상관X

ES5 일부만 사용하는 경우, 해당 모듈을 대체할 수 있으면서 ES6를 지원하는 다른 모듈을 사용하는 것이 좋다.

ES6 문법을 사용하는 모듈을 사용하면 해당 모듈에서도 필요한 부분만 import 해서 사용하지 않는 코드는 빌드할 때 제외되기 때문!

 

 

Lighthouse

사이트를 검사해 성능 측정을 할 수 있는 도구성능검사 + 개선책도 제공

 

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