Optimization 개요

HanSungUk·2022년 8월 4일
TILoptimization
0

Optimization

목록 보기
1/3

Optimization 개요

현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

학습목표

  • 최적화의 개념에 대해 학습합니다.
  • 최적화가 분야 별로 어떤 의미로 사용되는지 학습하고, 컴퓨터 공학에서의 최적화에 대해 이해합니다.
  • 최적화의 필요성 및 효과에 대해 학습하고, 최적화가 효과적인 UX개선 수단임을 이해합니다.

1. 최적화란

컴퓨터 공학에서 최적화란 가능한 적은 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것을 의미합니다.
웹 개발에서의 최적화란 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것을 의미합니다.

1-1. 최적화의 필요성 및 효과

  1. 이탈률 감소
    화면을 불러오는 시간이 길어지면 사용자가 페이지를 이탈할 확률이 높아집니다.
    여기서 이탈이란 방문자가 웹 사이트의 첫 페이지에서 아무런 상호작용을 하지 않고 종료하는 것을 의미힙니다.
    웹 사이트 최적화를 통해 페이지 로딩 속도를 줄임으로서 이탈률을 감소시킬 수 있습니다.

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

  3. 수익 증대
    빠른 웹 사이트 로딩 속도는 수익 증대까지 일어날 수 있습니다.
    이탈률 감소 -> 전환율 증가 -> 트래픽 증대 및 회원 수 증가 --> 수익 증대 를 의미합니다.

  4. 사용자 경험(UX) 향상
    최적화는 효과적인 UX 개선 수단입니다. 페이지 로딩이 빠를 수록 UX는 향상됩니다.

2. Optimization

2-1. HTML, CSS 코드 최적화하기

화면을 렌더링할 때는 HTML 파일과 CSS 파일이 필요합니다.
HTML 파일은 DOM 트리, CSS 파일은 CSSOM 트리를 만들고 두 트리를 결합하여 렌더링할 때 사용합니다.
두 트리 중에서 하나라도 변경되면 리렌더링이 일어나게 되고 트리의 크기가 크고 복잡할 수록 소모되는 시간이 길어집니다. 따라서 HTML, CSS 코드를 최적화함으로써 렌더링 성능을 향상시킬 수 있습니다.

2-1-1. HTML 최적화 방법

  1. DOM 트리 가볍게 만들기
    DOM 트리가 깊을수록, 자식 요소가 많을수록 DOM 트리의 복잡도는 커집니다.
    불필요하게 깊이를 증가시키는 요소는 삭제합니다.
// 수정 전
<div>
	<ol>
		<li> 첫 번째 </li>
		<li> 두 번째 </li>
		<li> 세 번째 </li>
	</ol>
</div>

// 수정 후 : 불필요한 div 요소 제거
<ol>
	<li> 첫 번째 </li>
	<li> 두 번째 </li>
	<li> 세 번째 </li>
</ol>
  1. 인라인 스타일 사용하지 않기
    애초에 인라인 스타일은 웹 표준에 맞지 않으므로 지양해야합니다.
    CSS 파일을 따로 작성하면 단 한 번의 리플로우만 발생하는 것과 달리, 인라인 스타일은 리플로우를 계속해서 발생시켜 렌더링 완료 시점을 늦춥니다.

리플로우는 문서 내 요소의 위치와 도형을 다시 계산하기 위한 웹브라우저 프로세스의 이름으로, 문서의 일부 또는 전체를 다시 렌더링하는 데 사용됩니다

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

//수정 후 : class와 CSS로 대체
<div class="margin10"> 마진 10px </div>
<div class="margin10"> 이것도 마진 10px </div>

.margin10 {
	margin: 10px;
}

2-1-2. CSS 최적화 방법

  1. 사용하지 않는 CSS 제거하기
    CSS 파일의 모든 코드의 분석이 끝난 후에 CSSOM 트리가 생성됩니다. 그만큼 불필요한 CSS 코드가 있다면 CSSOM 트리의 완성이 늦어집니다.

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

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

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

2-1-3. 리소스 로딩 최적화하기

HTML 파일에서 JavaScript 파일을 불러올 땐, <script>요소를, CSS 파일을 불러올 땐 <link>요소를 사용하게 됩니다.

  1. CSS 파일 불러오기
    DOM 트리는 HTML 코드를 한 줄 한 줄 읽으면서 순차적으로 구성할 수 있지만 CSSOM 트리는 CSS 코드를 모두 해석해야 구성할 수 있습니다. 따라서 CSSOM 트리를 가능한 빠르게 구성할 수 있도록 HTML 문서 최상단에 배치하는 것이 좋습니다.
// CSS 파일은 HTML 파일 상단의 head 요소 안에서 불러오는 것이 좋습니다.
<head>
	<link href="style.css" rel="stylesheet" />
</head>
  1. JavaScript 파일 불러오기
    JavaScript는 DOM 트리와 CSSOM 트리를 동적으로 변경할 수 있습니다. HTML 코드 파싱 중에 <script>요소를 만나는 순간 해당 스크립트가 실행되며, <script> 요소 이전까지 생성된 DOM까지만 접근할 수 있습니다. <script>요소를 HTML 코드 중간에 넣는다면, 해당 요소 이후에 생성될 DOM을 수정하는 코드가 있는 경우에는 화면이 의도한대로 표시되지 않게 됩니다.

또한 스크립트 실행이 완료되기 전까지 DOM 트리 생성이 중단됩니다. JavaScript 파일을 다운받아서 사용하는 경우 다운로드 및 스크립트 실행이 완료될 때까지 DOM 트리 생성이 중단됩니다. DOM 트리 생성이 중단된 시간만큼 렌더링 완료 시간은 늦춰지게 됩니다. 이러한 이유로 JavaScript 파일은 DOM 트리 생성이 완료되는 시점인 HTML 문서 최하단에 배치하는 것이 좋습니다.

<body>
	<div>...</div>
	...

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

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

페이지의 대부분의 용량은 이미지 파일과 같은 미디어 파일이 차지합니다.
전체 페이지의 약 51%를 차지하는 만큼 이미지의 용량을 줄이거나 요청의 수를 줄임으로서 사용자 경험을 빠르게 개선할 수 있습니다.

  1. 이미지 스프라이트
    웹 페이지를 로드하는 데 필요한 서버 요청 수를 줄이기 위해 이미지 스프라이트 기법을 사용할 수 있습니다.


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


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

해당 기법을 사용하면 한번의 이미지 요청으로 대부분의 개별 이미지를 사용할 수 있기 때문에 네트워크 로딩 시간을 줄일 수 있습니다.
또한 많은 이미지 파일을 개별로 관리할 필요 없이 특정 스프라이트 이미지 파일만으로 관리하면 되므로 관리가 용이합니다.

  1. 아이콘 폰트 사용하기
    아이콘 폰트를 사용하여 용량을 줄일 수 있습니다. 대표적인 사이트로는 Font Awesome이 있습니다.
  • CDN으로 사용하기
    Font Awesome에 가입하면 키트를 발급해주는데, 이 키트를 HTML 파일에서 <head>요소에 넣어주기만 하면 CDN으로 Font Awesome을 사용할 준비가 완료됩니다.

Font Awesome 사이트에서 사용하고 싶은 아이콘을 찾아서 사용할 환경에 맞는 코드를 복사하고 붙여넣기만 하면 사용할 수 있습니다.

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

이미지 최적화를 위해 전통적으로 사용하는 JPEG 또는 PNG 형식이 아닌 새롭게 등장한 WebP 또는 AVIF를 사용하여 용량을 더욱 감소시킬 수 있습니다.
WebP는 PNG보다 26% 용량이 감소되며, JPEG보다 25-35% 감소됩니다.
AVIF는 WebP보다 20% 감소되며, JPEG보다 50% 감소됩니다.

하지만 위 이미지 포맷은 최근에 등장한 포맷이기 때문에 브라우저 호환성 문제가 있습니다. 따라서 HTML의 <picture>태그를 이용하여 각 브라우저의 호환에 맞도록 분기를 대체할 수 있습니다.

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

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

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

2-4. 캐시 사용하기

캐시는 다운로드 받은 데이터나 값을 미리 복사해 놓는 임시 장소를 뜻합니다. 캐시를 사용하면 리소스를 매번 다운로드할 필요 없이 캐시에서 꺼내서 사용하면 되기 때문에 로딩 시간을 줄일 수 있습니다.

프론트엔드단에서 캐시를 사용하기 위해서 HTTP 요청을 보낼 때 조건부 요청 헤더를 사용하여 캐시를 재사용해도 되는지 확인해주면 됩니다. 두 종류의 헤더를 동시에 사용합니다.

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

2-5. CDN 사용하기

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

profile
HanSungUk
다음 포스트

Optimization 라이트 하우스(Lighthouse)

0개의 댓글