3/30 일일정리 Optimization

Optimization

컴퓨터공학에서 최적화(Optimization)란 허용된 리소스 내에서 요구사항을 만족하면서 최선의 결과를 얻어내는 것을 말한다. 일반적으로 시스템이 사용하는 자원의 소모를 줄이거나 시스템 성능을 향상하여 시스템 효율을 높이는 것을 의미한다. 알고리즘을 잘 짜서 메모리를 덜쓰고, 연산을 한번이라도 덜하도록 코드를 작성하면 효율적이고 최적화된다.

 

최적화의 필요성

 최적화가 필요한 이유는 속도와 연관되어 있다. 구글의 조사결과에 따르면 페이지 로드가 3초 이상 걸리면 사용자의 53%가 이탈한다고 한다. 최적화를 통해 로딩 속도를 높이면 사용자 이탈을 줄일 수 있다.

 

 이탈률과 연관된 이야기로 최적화를 통해 전환율도 높일 수 있다. 전환율이란 사용자가 웹사이트에 들어와서 보고 그냥 나가는 것이 아니라 실제로 웹사이트의 서비스를 이용하게되는 비율을 말한다. 이탈하는 사용자는 전환율이 0%이기 때문에 이탈을 줄이면 전환율도 자동적으로 상승하게 된다.

 

 전환율의 증가는 곧바로 수익 증대로 이어지게 된다. 실제로 로딩속도가 1초 빨라졌을 때 아마존 판매량은 1%, 구글 검색량은 0.2%, 월마트의 전환율은 2% 증가했다고 한다. 이 수치를 돈으로 환산하면 각각 68억 달러, 4억 5천만 달러, 2억 4천만 달러라고 한다.

 

 최적화가 잘 된 웹사이트에서는 사용자가 쾌적하게 사이트를 이용할 수 있기 때문에 사용자 경험(UX)도 향상시킬 수 있다.

 

 

최적화 기법

HTML 최적화

⓵ DOM 트리 가볍게 만들기 - 꼭 필요한 만큼만 태그 사용하기

⓶ 인라인 스타일 사용하지 않기 - css 파일을 사용하면 리플로우가 한 번만 일어나지만 인라인 스타일을 사용하면 리플로우가 계속 발생하여 렌더링을 늦춘다.

 

CSS 최적화

⓵ 사용하지 않는 CSS 제거하기

⓶ 간결한 셀렉터 사용하기 - 셀렉터가 길어지면 스타일 계산과 레이아웃에 시간이 더 걸린다.

 

리소스 로딩 최적화

⓵ CSSOM 트리는 CSS 파일을 모두 읽어야 구성이 가능하기 때문에 css파일을 불러오는 link태그는 HTML 문서 최상단에 배치하는 것이 좋다.

⓶ DOM트리를 구성하는 도중에 script태그를 만나면 DOM 트리 구성이 중단된다. DOM트리 구성이 중단된 시간만큼 렌더링이 늦어지기 때문에 DOM 트리 구성을 멈추는 script 태그는 HTML 문서의 최하단에 배치하는 것이 좋다.

 

 

브라우저 이미지 최적화

웹사이트 용량의 상당부분을 차지하는 이미지 파일의 용량을 줄이거나 요청회수를 줄이면 최적화를 진행할 수 있다.

 

⓵ 이미지 스프라이트

 여러가지 이미지를 하나의 파일에 모아두고 해당 파일에서 내가 원하는 이미지의 위치를 지정해서 가져와 사용하는 기법이다. 한 번의 이미지 요청으로 수십~수백개의 이미지를 사용할 수 있기 때문에 네트워크 로딩 시간을 줄일 수 있다.

 

⓶ 아이콘 폰트

 아이콘을 이미지로 사용하는 것이 아니라 폰트로 사용해서 용량을 줄일 수 있다.

 

⓷ WebP, AVIF 이미지 포맷 사용

 최근에 나온 WebP, AVIF 이미지 포맷을 사용하면 JPEG나 PNG 파일보다 용량을 줄일 수 있다. 아직 지원하지 않는 브라우저도 있기 때문에 호환성을 파악하여 사용해야 한다.

 

 

캐시 관리

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

 

웹사이트를 사용할 때 페이지 이동을 하거나 새로고침을 하는 등 같은 파일을 여러 번 서버에 요청하는 경우가 빈번하게 발생한다. 자주 요청하는 데이터를 매번 요청할 것이 아니라 브라우저의 캐시라는 공간에 저장해두고, 다시 요청을 할 때 캐시에 데이터가 있는지 확인한 후 해당 데이터를 서버까지 요청하는 것이 아니라 캐시에서 바로 꺼내와 쓸 수 있다. 이렇게 캐시를 사용하면 네트워크 리소스를 줄이고, 데이터를 바로 꺼내 쓰기 때문에 브라우저 로딩도 빨라진다. 

 

캐시 같은 경우 유효시간이 정해져 있어서 유효한 시간동안만 위와 같이 동작한다. 유효시간이 지나면 다시 서버로 요청을 보내게 되는데, 이때 캐시 검증 헤더나 조건부 요청 헤더를 사용한다.

 

캐시 데이터의 유효시간이 지나고 서버로 요청을 보낼 때 '캐시에 있는 데이터가 유효한가?'  라는 의미가 담긴 옵션을 헤더에 담아 보내는데, 서버는 이 헤더를 보고 유효한 데이터라면 304 상태 코드와 함께 캐시 데이터의 유효 기간을 갱신하는 응답을 보내게 되고 캐시 데이터를 갱신된 유효기간까지 사용할 수 있게 된다.

 

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

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

보통 캐시 검증 헤더와 조건부 요청 헤더를 같이 사용한다.

 

 

Tree Shaking

Tree Shaking이란 나무를 흔들어서 잔가지를 털어내는 것 처럼 코드에서 불필요한 코드를 덜어내는 것을 의미한다. 웹사이트의 규모가 커지고 여러가지 라이브러리를 사용하다보면 불필요한 코드들이 점점 쌓이게 되는데, 이러한 코드를 덜어냄으로써 코드의 최적화를 진행 할 수 있다.

 

Javascript tree shaking

⓵ 필요한 모듈만 import 하기

 import로 라이브러리를 사용할 때 전체를 불러오는 것이 아니라 필요한 모듈만 불러오면 번들링하는 과정에서 필요한 코드만 포함하기 때문에 트리 쉐이킹 할 수 있다.

 

⓶ Babelrc 파일 설정

 babel의 경우 ES5 문법으로 변환하게 되는데 이 과정에서 import를 require로 변경하게 되는데, require같은 경우 ⓵과는 다르게 라이브러리 내의 모든 모듈을 불러오기 때문에 ⓵이 의미가 없어진다. 따라서 Babelrc 파일 설정에서 아래와 같이 설정해주면 ES5 문법으로 변환되는 것을 막을 수 있다.

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

 

⓷ Side effect 설정

웹팩은 기본적으로 사이트이펙트를 발생시키는 함수는 사용하지 않더라도 제외하지 않는다. package.json 파일에서 sideEffect : false로 지정하면 웹팩에게 sideEffect가 발생하지 않으므로 사용하지 않는 사이드이펙트를 발생시키는 함수를 지워도 된다는 것을 알려줄 수 있다.

 

Lighthouse

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