웹 최적화(Optimization)

최적화(Optimization)의 개념

분야에 따라서 의미가 조금씩 달라지긴 하지만, 최적화는 보통 주어진 조건으로 최대 효율을 낼 수 있도록 하는 것을 의미한다.

• 컴퓨터 공학에서는 일반적으로 특정한 문제를 해결하기 위해 가장 효율적인 알고리즘을 찾는 것

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

최적화의 필요성 및 효과

웹 개발에서의 최적화의 필요성과 효과를 알아보자.

웹 개발에서의 최적화

1. 이탈률 감소

최적화가 잘되지 않은 웹 페이지는 화면 로딩에 시간이 걸려 화면을 불러오는 시간이 길어지면 사용자가 페이지를 이탈할 확률이 높아진다.

여기서 이탈이란 방문자가 웹 사이트의 첫 페이지에서 아무런 상호작용도 하지 않고 종료하는 것을 의미한다.

2. 수익 증대

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

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

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

최적화는 UX를 효과적으로 향상시킬 수 있는 수단이며, 페이지 로딩이 빠를수록 UX는 향상되기 때문에 최적화를 통해 UX가 더욱 향상할 수 있습니다

최적화 기법

📌HTML, CSS 코드 최적화

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>

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

.margin10 {
	margin: 10px;
}

3. 사용하지 않는 CSS 제거하기

CSS 파일의 모든 코드의 분석이 끝난 후에 CSSOM 트리가 생성되는데, 필요하지 않은 CSS파일을 정리하지 않는다면 그만큼 트리의 완성이 늦어진다.

📌 이미지 최적화

웹페이지에서 사용되는 이미지는 페이지 로딩 속도에 영향을 미친다. 따라서 이미지의 크기를 최적화하고, 이미지를 표시하는 방법을 최적화하여 로딩 속도를 높일 수 있다.

이를 위해, 이미지를 압축하거나, 웹 페이지에서 필요한 이미지만 로드하도록 Lazy loading을 적용하면 좋습니다.

📌 캐싱(Caching)

캐싱은 브라우저에서 이미 로딩한 웹페이지나 리소스를 저장해 놓는 기술이다.

이를 통해 웹페이지의 로딩 속도를 높일 수 있는데, HTTP 헤더를 사용하여 웹페이지나 리소스의 캐시 유효기간을 설정하고, 캐시되지 않은 리소스를 최소화하는 방법을 사용할 수 있습니다.

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

• Last-Modified : 데이터가 마지막으로 수정된 시점을 의미하는 응답 헤더로, 조건부 요청 헤더인 If-Modified-Since 와 묶어서 사용한다.
• Etag : 데이터의 버전을 의미하는 응답 헤더로, 조건부 요청 헤더인 If-None-Match 와 묶어서 사용합니다.

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

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

트리쉐이킹( Tree Shaking )

트리쉐이킹이란 나무를 흔들어서 잔가지를 털듯, 불필요한 코드들을 제거하는 것을 의미한다. 이로인해 웹 사이트 성능 최적화에 도움이 된다.

JavaScript 트리쉐이킹

웹펙 4버전 이상을 사용하는 경우 ES6 모듈을 대상으로 트리쉐이킹을 기본적으로 제공한다.

필요한 모듈만 import 하기

import { useState, useEffect } from 'react'

Babelrc 파일 설정하기

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

sideEffects 설정하기

const crews = ['kimcoding', 'parkhacker']

const addCrew = function (name) {
	crews.push(name)
}

//package.json
{
  "name": "tree-shaking",
  "version": "1.0.0",
  "sideEffects": false
}