[최적화] 최적화(Optimization) 기법

rsuubinn·2023년 3월 30일
0

최적화

목록 보기
1/4

✏️ 최적화(Optimization)

: 주어진 조건으로 최대 효율을 낼 수 있도록 하는 것

컴퓨터 공학에서 최적화는 가능한 적은 리소스를 소모하면서 가능한 빠르게 원하는 결과를 얻을 수 있도록 하는 것을 의미한다.

최적화의 필요성 및 효과

1. 이탈률 감소

웹 사이트의 성능 최적화를 통해 페이지 로딩 속도를 줄이면, 사용자의 이탈률을 효과적으로 줄일 수 있다.

2. 전환율 증가

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

3. 수익 증대

빠른 웹사이트 로딩 속도는 수익 증대까지 이어질 수 있다.
이탈률 감소, 전환율 증가는 트래픽 증대 및 회원 수 증가로 이어지고, 이는 곧 수익 증대를 의미한다.

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

최적화는 효과적인 UX 개선 수단이다.
페이지 로딩이 빠를수록 UX는 향상되기 때문에 이미 페이지 로드 속도가 빠른 편이라고 해도 최적화를 통해 UX가 더욱 향상할 수 있다.

HTML, CSS 코드 최적화 하기

1. HTML 최적화 방법

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

DOM 트리가 깊을수록, 자식 요소가 많을수록 DOM 트리의 복잡도는 커진다.
HTML 요소들의 관계를 잘 살펴보고, 불필요하게 깊이를 증가시키는 요소가 있다면 삭제한다.

// 수정 전
<div>
  <ol>
    <li>첫 번째</li>
    <li>두 번째</li>
    <li>세 번째</li>
  </ol>
</div>

// 수정 후
<div>
  <li>첫 번째</li>
  <li>두 번째</li>
  <li>세 번째</li>
</div>

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

인라인 스타일은 개별 요소에 스타일 속성을 작성해주는 것이기 때문에, 클래스로 묶어서 한 번에 작성해도 될 스타일 속성을 중복으로 작성하게 되는 경우가 생긴다.
이처럼 불필요한 코드 중복은 가독성을 떨어뜨릴 뿐 아니라 파일의 크기를 증가시킨다.
애초에 인라인 스타일은 웹 표준에 맞지 않으므로 지양해야 한다.

// 수정 전
<div style="margin: 10px;">마진 10px</div>
<div style="margin: 10px;">이것도 마진 10px</div>

// 수정 후
<div class="margin10">마진 10px</div>
<div class="margin10">이것도 마진 10px</div>

.margin10 {
	margin: 10px;
}

2. CSS 최적화 방법

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

CSS 파일의 모든 코드 분석이 끝난 후에 CSSOM 트리가 생성된다.
그만큼 불필요한 CSS 코드가 있다면 CSSOM 트리의 완성이 늦어진다.
따라서 사용하지 않는 CSS 코드가 있다면 제거하는 것이 좋다.

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

셀렉터가 복잡할수록 스타일 계산과 레이아웃에 시간을 더 많이 소모하게 된다.
따라서 최대한 간결한 CSS 셀렉터를 사용하는 것이 좋다.

// 복잡한 CSS 셀렉터 예시
.cart_page .cart_item #firstItem { ... }

// 필요한 경우는 어쩔 수 없지만, 가능한 간결하게 작성한다.
.cart_item { ... }

리소스 로딩 최적화 하기

1. CSS 파일 불러오기

화면을 렌더링할 때는 DOM 트리와 CSSOM 트리가 필요하다.
DOM 트리는 HTML 코드를 한 줄 한 줄 읽으면서 순차적으로 구성할 수 있지만, CSSOM 트리는 CSS 코드를 몯 해석해야 구성할 수 있다.
따라서 CSSOM 트리를 가능한 빠르게 구성할 수 있도록 HTML 문서 최상단에 배치하는 것이 좋다.

// CSS 파일은 HTML 파일 상단의 head 요소 안에서 불러오는 것이 좋다.
<head>
	<link href="style.css" rel="stylesheet" />
</head>

2. JavaScript 파일 불러오기

JavaScript는 DOM 트리와 CSSOM 트리를 동적으로 변경할 수 있다.
HTML 코드 파싱 중에 <script> 요소를 만나는 순간 해당 스크립트가 실행되며, <script> 요소 이전까지 생성된 DOM 까지만 접근할 수 있다.
<script> 요소를 HTML 코드 중간에 넣는다면, 해당 요소 이후에 생성될 DOM을 수정하는 코드가 있는 경우 화면이 의도한 대로 표시되지 않을 수 있다.

또한 스크립트 실행이 완료되기 전까지 DOM 트리 생성이 중단된다.
DOM 트리 생성이 중단된 시간만큼 렌더링 완료 시간은 늦춰지게 된다.
이러한 이유로 JavaScript 파일은 DOM 트리 생성이 완료되는 시점인 HTML 문서 최하단에 배치하는 것이 좋다.

<body>
  <div>...</div>
  ...
  
  // JavaScript 파일은 body 요소가 닫히기 직전에 작성하는 것이 가장 좋다.
  <script src="script.js" type="text/javascript"></script>
</body>

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

페이지의 대부분 용량은 코드 데이터가 아닌 이미지 파일과 같은 미디어 파일이 차지한다.
그래서 이미지 용량을 줄이거나 요청의 수를 줄이는 것을 우선적으로 고려할 시, 사용자 경험을 빠르게 개선할 수 있다.

1. 이미지 스프라이트

클라이언트에서 서버 요청이 증가할수록 로딩 시간은 점점 늘어난다.
따라서 웹 페이지를 로드하는데 필요한 서버 요청 수를 줄이기 위해 이미지 스프라이트 기법을 사용할 수 있다.

이미지 스프라이트 기법 은 여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만들고 CSS의 background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법이다.

하나의 이미지를 배경 이미지로 사용하되, 표시하고 싶은 부분에 맞춰 width, height, background-position 속성을 주어 아이콘틀 만든다.

해당 기법을 이용하면 한 번의 이미지 요청으로 대부분의 개별 이미지를 사용할 수 있기 때문에 네트워크 로딩 시간을 줄일 수 있다.

2. 아이콘 폰트 사용하기

아이콘을 이미지로 사용하는 것이 아니라 아이콘 폰트를 사용하여 용량을 줄일 수 있다.
대표적은 아이콘 글꼴 서비스로는 Font AwesomeMaterial Icons 이 있다.

3. WebP 또는 AVIF 이미지 포맷 사용하기

이미지 최적화를 위해 전통적으로 사용하는 JPEG 또는 PNG 형식이 아닌 새롭게 등장한 이미지 포맷인 WebP 또는 AVIF 를 사용하여 용량을 더욱 감소시킬 수 있다.
하지만 비교적 최근에 등장한 이미지 포맷이기 때문에 모든 브라우저에서 호환되지 않는다는 단점이 있다.

다행히도 HTML의 <picture> 태그를 이용하면 각 브라우저의 호환에 맞도록 분기에 대처할 수 있다.

<picture>: img 요소의 다중 이미지 리소스(multiple image resources)를 위한 컨테이너를 정의할 때 사용한다.

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>

다음과 같이 HTML 태그를 작성할 시, 만약 접속한 브라우저에서 <source> 태그 내의 <srcset> 에 정의한 WebP 포맷을 지원하지 않는다면 해당 <source> 태그는 무시된다.

CDN 사용하기

CDN(Content Delivery Network)은 세계 곳곳에 분포한 분산된 서버에 콘텐츠를 저장한다.
간단히 말해, CDN은 유저가 가까운 곳에 위치한 데이터 센터(서버)의 데이터를 가져온다.
그러므로 데이터가 전달되기 위해 거쳐야하는 서버의 갯수가 크게 줄기 때문에 로딩 속도가 빨라진다.

profile
@rsuubinn

0개의 댓글