S4) Unit 8. [최적화]최적화 기법

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Jieunny의 블로그

S4) Unit 8. [최적화]최적화 기법 본문

CodeStates/learning contents

S4) Unit 8. [최적화]최적화 기법

Jieunny 2023. 3. 30. 12:00

📣 최적화(Optimization)

𝟭. 최적화의 개념

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

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

➰ 웹 개발에서의 최적화는 바로 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것

➰ 알고리즘과 같은 원리 => 메모리를 조금이라도 덜 소모하거나 연산 횟수가 한 번이라도 더 적은 코드가 더 효율적이고 최적화된 코드

𝟮. 최적화의 필요성 및 효과

1️⃣ 이탈률 감소

✔️ 페이지 로딩이 느려서 이탈하는 사용자(이탈률)를 효과적으로 줄일 수 있다.

2️⃣ 전환율 증가

✔️ 이탈률이 줄어들면, 전환율이 높아질 확률도 커진다.

➰ 전환율 : 웹 사이트를 방문한 사용자 중 회원가입, 상품 구매, 게시글 조회, 다운로드 등의 행위를 한 방문자의 비율

3️⃣ 수익 증대

✔️ 탈률 감소, 전환율 증가는 트래픽 증대 및 회원 수 증가로 이어지고, 이는 곧 수익 증대를 의미한다.

4️⃣ 사용자 경험(UX) 향상

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

📣 HTML, CSS 최적화하기

✔️ DOM 트리와 CSSOM 트리를 결합해서 렌더링할 때 사용하게 되는데, 리렌더링시 트리의 크기가 크고 복잡할수록 더 많은 계산이 필요하기 때문에 리렌더링에 소모되는 시간도 길어진다 => HTML, CSS 코드를 최적화함으로써 렌더링 성능을 향상시킬 수 있다.

𝟭. HTML 최적화 방법

1️⃣ DOM 트리 가볍게 만들기

✔️ DOM 트리가 깊을수록, 자식 요소가 많을수록 DOM 트리의 복잡도는 커진다.

➰ 불필요하게 깊이를 증가시키는 요소가 있다면 삭제하는 게 좋다.

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

// 수정 후 : 불필요한 div 요소 제거
<ol>
	<li> 첫 번째 </li>
	<li> 두 번째 </li>
	<li> 세 번째 </li>
</ol>

2️⃣ 인라인 스타일 사용하지 않기

✔️ 클래스로 묶어서 한 번에 작성해도 될 스타일 속성을 중복으로 작성하게 되는 경우가 생겨 불필요한 코드 중복이 생긴다.

➰ 불필요한 코드 중복은 가독성을 떨어뜨릴 뿐 아니라 파일 크기를 증가시킨다.

➰ 인라인 스타일은 리플로우를 계속해서 발생시켜 렌더링 완료 시점을 늦춘다.

//수정 전
<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;
}

𝟮. CSS 최적화 방법

1️⃣ 사용하지 않는 CSS 제거하기

✔️ 불필요한 CSS 코드가 있다면 CSSOM 트리의 완성이 늦어진다.

➰ 요소를 삭제할 일이 생기면, CSS 코드만 남지는 않는지 확인하고 함께 삭제하자.

2️⃣ 간결한 셀렉터 사용하기

✔️ 셀렉터가 복잡할수록 스타일 계산과 레이아웃에 시간을 더 많이 소모하게 된다.

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

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

📣 리소스 로딩 최적화하기

✔️ <script> 요소와 <link> 요소를 어디서 불러오는지 위치에 따라 렌더링 완료 시점이 달라질 수 있다.

1️⃣ CSS 파일 불러오기

✔️ CSSOM 트리는 CSS 코드를 모두 해석해야 구성할 수 있기 때문에 CSSOM 트리를 가능한 빠르게 구성할 수 있도록 HTML 문서 최상단에 배치하는 것이 좋다.

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

2️⃣ JavaScript 파일 불러오기

✔️ JavaScript 파일은 DOM 트리 생성이 완료되는 시점인 HTML 문서 최하단에 배치하는 것이 좋다.

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

➰ 스크립트 실행이 완료되기 전까지 DOM 트리 생성이 중단되며, JavaScript 파일을 다운받아와서 사용하는 경우에는 다운로드 및 스크립트 실행이 완료될 때까지 DOM 트리 생성이 중단된다 => DOM 트리 생성이 중단된 시간만큼 렌더링 완료 시간은 늦춰지게 된다.

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

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

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

✔️ 페이지의 대부분의 용량은 HTML/CSS/JS와 같은 코드 데이터가 아닌 이미지 파일과 같은 미디어 파일이 차지한다.

➰ 이미지의 용량을 줄이거나 요청의 수를 줄이는 것을 우선적으로 고려할 시, 사용자 경험을 빠르게 개선할 수 있다.

𝟭. 이미지 스프라이트

✔️ 웹 페이지를 로드하는 데 필요한 서버 요청 수를 줄이기 위해 사용하는 기법

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

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

➰ 네트워크 로딩 시간을 줄일 수 있고, 관리가 용이하다는 장점이 있다.

𝟮. 아이콘 폰트 사용하기

✔️ 모든 아이콘을 이미지로 사용하는 것이 아니라 아이콘 폰트를 사용하여 용량을 줄일 수 있다.

➰ Font Awesome

1️⃣ CDN으로 사용하기

(1) Font Awesome에 가입하면 키트를 발급해주는데, 이 키트를 HTML 파일에서 <head> 요소에 넣어준다.

(2) Font Awesome 사이트에서 사용하고 싶은 아이콘을 찾아서 사용할 환경(HTML, React, Vue)에 맞는 코드를 복사하고 붙여넣기

<i class="fa-solid fa-face-laugh-beam">

2️⃣ Font Awesome 모듈 설치하기

(1) 패키지 설치하기

// 핵심 패키지 설치
npm i --save @fortawesome/fontawesome-svg-core

// 아이콘 패키지 설치 (해당 코드는 무료 아이콘들입니다. 유료 아이콘을 사용할 경우 추가로 설치가 필요합니다.)
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

// Font Awesome React 구성 요소 설치
npm i --save @fortawesome/react-fontawesome@latest

(2) Font Awesome 사이트에서 사용하고 싶은 아이콘의 정보를 확인한 후에, 알맞게 불러와서 사용하기

ㄴ 아이콘 이름은 camelCase로 작성해야 한다.

<i class="fa-brands fa-react"></i>

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

✔️ WebP는 PNG와 비교해 26% 용량이 감소되며 JPEG와 비교했을 땐 25-35% 더 감소된다.

✔️ AVIF는 JPEG와 비교했을 때 무려 용량의 50%가 감소되며 WebP와 비교했을 땐 20% 감소된다.

➰ 최근에 등장한 이미지 포맷이기 때문에 모든 브라우저에서 호환되지 않을 수 있다.

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

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

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

// 만약 접속한 브라우저에서 <source>태그 내의 srcset에 정의한 WebP 포맷을 지원하지 않는다면 해당 <source> 태그는 무시

📣 CDN 사용하기

✔️ 유저가 가까운 곳에 위치한 데이터 센터(서버)의 데이터를 가져온다.

➰ 데이터가 전달되기 위해 거쳐야하는 서버의 갯수가 크게 줄기 때문에 로딩 속도가 빨라진다.

저작자표시

'CodeStates > learning contents' 카테고리의 다른 글

S4) Unit 9. [Deploy]Amazon Web Service (0)	2023.03.31
S4) Unit 8. [최적화]캐시 & Tree Shaking & Lighthouse (0)	2023.03.30
S4) Unit 7. [Testing] TDD (0)	2023.03.29
S4) Unit 6. [API] GraphQL (0)	2023.03.28
S4) Unit 5. [컴퓨터 공학] 운영체제 & 문자열과 그래픽 & 가비지 컬렉션 (1)	2023.03.27

'CodeStates/learning contents' Related Articles

Jieunny의 블로그

S4) Unit 8. [최적화]최적화 기법 본문

S4) Unit 8. [최적화]최적화 기법

📣 최적화(Optimization)

𝟭. 최적화의 개념

𝟮. 최적화의 필요성 및 효과

📣 HTML, CSS 최적화하기

𝟭. HTML 최적화 방법

𝟮. CSS 최적화 방법

📣 리소스 로딩 최적화하기

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

𝟭. 이미지 스프라이트

𝟮. 아이콘 폰트 사용하기

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

📣 CDN 사용하기

'CodeStates > learning contents' 카테고리의 다른 글

티스토리툴바

S4) Unit 8. [최적화]최적화 기법 본문

S4) Unit 8. [최적화]최적화 기법

📣 리소스 로딩 최적화하기

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

📣 CDN 사용하기