최적화 Optimization

최적화

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

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

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

최적화가 필요한 이유

1. 로딩이 길어지면 유저는 페이지를 이탈한다.
2. 유저가 서비스 이용자로 전환하는 비율이 증가한다.
3. 수익 증가
4. UX 향상

HTML, CSS 최적화

DOM 트리 가볍게 만들기

child, depth를 최소화한다.
inline style 사용하지 않기(css파일에서 스타일링하자)
불필요한 css코드 제거
간결한 셀렉터 사용(셀렉터가 복잡할수록 시간이 더 많이 소요된다)

리소스 로딩 최적화

CSS파일 불러오기는 HTML 최상단에

CSS코드를 모두 분석해야 CSSOM 트리가 구성되기 때문에 빠르게 구성할 수 있도록 최상단에 배치한다.

자바스크립트 파일 불러오기는 HTML 최하단에

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

브라우저 이미지 최적화

이미지 스프라이트

여러개의 이미지를 하나의 스프라이트 이미지로 만들고 background-position 속성을 사용해 이미지의 일정 부분에 클래스를 부여해 사용한다.
이렇게 하면 하나의 이미지만 불러오면 되기 때문에 로딩 시간을 줄일 수 있다.

네이버에서 추출한 스프라이트 이미지

아이콘 폰트 사용

아이콘을 이미지로 사용하기보다 아이콘 폰트를 사용해 용량을 줄인다.

WebP 또는 AVIF 이미지 포맷 사용(호환 이슈)

JPEG, PNG -> WebP, AVIF
WebP 용량이 25%~35% 감소된다.
AVIF ~50% 감소된다.

<picture> 태그 이용

각 브라우저의 호환에 맞도록 분기를 대체할 수 있다.
img 요소의 다중 이미지 리소스(multiple image resources)를 위한 컨테이너를 정의할 때 사용

<picture>
  <source srcset="logo.webp" type="image/webp">
  // webp을 지원하지 않을 경우 source태그가 무시된다.
  <img src="logo.png" alt="logo">
</picture>

CDN 사용하기

CDN은 유저가 가까운 곳에 위치한 서버의 데이터를 가져온다.

캐시

다운로드 받은 데이터나 값을 미리 복사해 놓는 임시 장소

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 헤더에 담긴 내용도 캐시에 함께 저장

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

• If-Modified-Since를 작성해 저장해둔 Last-Modified 값과 함께 요청을 보낸다.
  이 값을 이용해 서버데이터의 최종 수정일과 캐시에 저장된 데이터의 수정일이 같은지 확인한다.
• 데이터가 수정되지 않았을 경우 304 Not Modified 응답.
  캐시 데이터의 유효시간이 갱신되어 재사용할 수 있게 된다.

Tree Shaking

불필요한 코드 가지치기 하기

트리쉐이킹의 필요성

자바스크립트 파일이 커지고 자바스크립트 파일을 요청하는 http 요청 수 또한 증가했다. 파일이 오고가는동안 화면 표시가 늦어진다.
자바스크립트 파일의 실행시간도 증가했다. 하드웨어의 사양에 따라 소모 시간이 천차만별이다.

자바스크립트 트리쉐이킹(웹팩)

웹팩4버전 이상일 경우 ES6 모듈 대상으로 기본적인 트리쉐이킹이 제공된다.
React-Create-App 또한 트리쉐이킹이 가능하다.

1. 필요한 모듈만 import

import React from 'react' ❌
import {useState, useEffect } from 'react' ♥️

2. Babelrc 파일 설정

Babel : 자바스크립트 문법이 구형 브라우저에도 호환 가능하도록 ES5 문법으로 변환.
es5는 import를 지원하지 않아 commonJS문법의 require로 변경시킨다.
이때 require은 export되는 모든 모듈을 불러오기 때문에 필요하지 않은 모듈까지 모두 불러오게 된다. 이를 방지하기 위한 코드를 사용하자.

{
  “presets”: [ 
    [
      “@babel/preset-env”,
      { //ES5로 변환하는 것을 막는다.
	    "modules": false //true일경우 항상 ES5로 변환
      }
    ]
 ]
}

3. sideEffects 설정

사이드이펙트를 일으킬 수 있는 코드일 경우 사용하지 않는 코드라도 트리쉐이킹 대상에서 제외시킨다.
이럴때 package.json 파일에서 아래의 코드를 작성한다.

{
  "name": "tree-shaking",
  "version": "1.0.0",
  "sideEffects": false
  //혹은 파일을 특정할 수도 있다.
  "sideEffects": ["./src/components/NoSideEffect.js"]
}

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

ES5 문법을 사용하는 모듈을 통째로 사용하는 상황이라면 상관X
ES5 일부만 사용하는 경우, 해당 모듈을 대체할 수 있으면서 ES6를 지원하는 다른 모듈을 사용하는 것이 좋다.
ES6 문법을 사용하는 모듈을 사용하면 해당 모듈에서도 필요한 부분만 import 해서 사용하지 않는 코드는 빌드할 때 제외되기 때문!

Lighthouse

사이트를 검사해 성능 측정을 할 수 있는 도구
성능검사 + 개선책도 제공한다.
검사할 페이지의 url을 보내면 된다.