웹 개발 상에서의 최적화(Optimization)기법

이예빈·2022년 10월 7일
2

사용자 친화 웹

목록 보기
4/5
post-thumbnail

1. 최적화란?


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

알고리즘 문제 해결을 예시로 들어보면 원하는 결과가 나오는 코드들 중에서 메모리를 적게 소모할수록 연산 횟수가 적을수록, 즉 더 적은 비용과 시간을 소모할 수록 효율적이고 최적화된 코드라고 할 수 있을 것이다.

💡 최적화 ➡️ 사용자 경험(UX)향상 ➡️ 이탈률 감소 ➡️ 전환율 증가 ➡️ 수익 증대

그렇다면 프론트엔드 웹 개발에서 최적화는 주어진 조건 하에 최대한 빠르게 화면을 표시하도록 하는 것이다. 최적화 되지 않은 웹은 화면 로딩에 시간이 걸리므로 사용자의 페이지 이탈 확률을 높인다. 구글의 2016년 조사에 따르면 페이지 로딩시간에 따른 이탈률은 3초에 32%, 5초에 90%까지 증가하였다.

그 당시보다 인터넷 속도가 더 빨라졌을테니 지금 현재는 위의 조사결과보다 더 빠르게 이탈할 것이라고 예상된다고 한다. 특히 빨리빨리의 민족 한국인들은 더 큰 폭일 수 있다.

웹 최적화를 통해 이탈률을 줄이면 동시에 전환율도 높일 수 있다.
전환율웹 사이트를 방문한 사용자 중 회원가입, 상품 구매, 게시글 조회 등의 행위를 한 방문자의 비율 을 의미한다. 이탈률 감소와 전환율 증가는 트래픽 증대 및 회원 수 증가로 이어지며 이것은 곧 수익 증대를 의미한다.

실제로 로딩 속도가 1초 빨라졌을 때 아마존 판매량 1%, 구글 검색량 0.2%, 월마트 전환율 2%가 증가했다고 한다. 이 것을 금액으로 환산하면 68억 달러, 4억 5천만 달러, 2억 4천만 달러의 매출 증가라고 하니 1초 차이로 수익에 엄청난 차이를 가져다 줄 수 있는 만큼 최적화는 비즈니스에 있어서 굉장히 중요한 요소라고 할 수 있다.

2. 최적화 기법


1) HTML 최적화

// 최적화 전
<div>
   <ol>
     <li> 리스트1 </li>
     <li> 리스트2 </li>
     <li> 리스트3 </li>
   </ol>
</div>


// 최적화 후
<ol>
   <li> 리스트1 </li>
   <li> 리스트2 </li>
   <li> 리스트3 </li>
</ol>

DOM 트리가 깊을수록, 자식 요소가 많을수록 DOM 트리의 복잡도는 커진다.
복잡도가 클수록 DOM트리가 변경되었을 때 연산 횟수도 증가한다.
HTML요소의 관계를 살피어 불필요하게 깊이를 증가시키는 요소는 삭제하는 것이 좋다.

//수정 전
<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) CSS 최적화

렌더링시 CSSOM 트리는 CSS 파일 내 모든 코드가 분석된 이후에 생성된다. 따라서 불필요한 CSS 코드는 CSSOM 트리의 완성을 늦출 수 있으므로 바로 제거하는 것이 좋다. 코드 요소 삭제시 연결된 CSS 코드가 있는지 확인한다면 이런 상황을 방지할 수 있다.

또한 selector가 복잡할수록 스타일 계산과 레이아웃 시간이 증가되므로 최대한 간결한 CSS selector를 사용하는 것이 좋다.

3) 브라우저 이미지 최적화

이미지를 많이 로드해야 되는 웹페이지인 경우 이미지를 각각 서버에 요청하게 되면 웹사이트의 로딩 시간이 늘어나게 된다. 이를 방지하기 위해서 이미지 스프라이트 기법을 사용할 수 있다.

이미지 스프라이트 기법은 여러 개의 이미지를 모아서 하나의 스프라이트 이미지로 만들고 CSS 속성을 이용하여 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법이다. 하나의 이미지를 배경 이미지로 사용하되 표시하고 싶은 부분에 맞추어 width, height, background-position 속성을 주어 아이콘을 만들 수 있다.

이를 통해 한번의 이미지 요청으로 여러개의 이미지를 사용하는 효과를 줄 수 있기 때문에 네트워크 로딩 시간을 줄일 수 있다. 또한 여러개의 파일을 관리하지 않아도 되기 때문에 관리의 용이성도 확보할 수 있다.

4) WebP 또는 AVIF 이미지 포맷 사용

기존에 사용하던 JPEG나 PNG 등의 형식이 아니라 새롭게 등장한 이미지 포맷인 WebP 또는 AVIF를 사용하면 용량을 더욱 감소시킬 수 있어 이미지 최적화에 사용할 수 있다. WebP를 사용하면 PNG와 대비 26%의 용량을 감소 시킬 수 있고, JPEG 대비 25~35% 감소 시킬 수 있다. AVIF는 JPEG 대비 50%까지 용량을 감소시킬 수 있다.

하지만 비교적 최근에 등장한 포맷이기 때문에 모든 브라우저에서 호환되지 않을 수 있으니 주의하여 사용해야 한다.

WebP의 경우 브라우저 버전에 따라 지원되지 않을 수 있고 AVIF 또한 지원되지 않는 버전이 더 많고 Edge에선 아직 사용할 수 없다.

5) CDN 사용

CDN(Content Delivery Network)은 콘텐츠를 보다 빠르고 효율적으로 제공하기 위해 설계되었다. 유저와 호스팅 서버의 물리적 거리의 한계로 네트워크 latency는 불가피하지만, CDN은 세계 곳곳에 분산된 서버에 콘텐츠를 저장하여 이를 어느정도 해소해줄 수 있다. CDN은 유저와 가까운 곳에 위치한 데이터 센터(서버)의 데이터를 가져오므로 데이터 전달을 위해 거쳐야 하는 서버의 수를 줄여주어 로딩 속도를 빠르게 해준다.

profile
temporary potato

0개의 댓글