최적화란?
주어진 자원이나 한정된 스펙내에서 최소한의 자원를 소모하면서 최대 효율을 낼 수 있도록 하는 과정이며 웹 개발에서의 최적화는 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것이다.
알고리즘을 예시로 들어보면 원하는 결과가 나오는 코드 중 메모리를 조금이라도 덜 소모하거나 연산 횟수가 한 번이라도 더 적은 코드가 더 효율적이고 최적화된 코드이다.
최적화의 필요성 및 효과
1. 이탈률 감소
최적화가 이루어지지 않은 웹 페이지는 화면 로딩에 시간이 더 오래 걸리게 되며 사용자가 페이지를 이탈할 확률이 높아진다. 웹 사이트의 성능 최적화를 통해 페이지 로딩 속도를 줄이면 사용자의 이탈률을 효과적으로 줄일 수 있다.
구글 조사 결과에 따르면 페이지 로드가 3초 이상 걸리면 53%의 사용자가 사이트를 이탈한다고 한다. 또한 페이지 로드 시간이 길어질 수록 이탈률이 크게 증가하는데 페이지 로드 속도가 1초에서 3초로 늘어나면 이탈률은 32%, 5초로 늘어나면 90%, 6초로 늘어나면 106%, 10초로 늘어나면 123%까지 증가하는 것으로 나타났다.
2. 전환율 증가
이탈률이 줄어들면 전환율이 높아질 확률도 커진다. 전환율이란 웹 사이트를 방문한 사용자 중 회원가입, 상품 구매, 게시글 조회, 다운로드 등의 행위를 한 방문자의 비율을 의미한다.
물론 화면이 제대로 표시된다고 해도 방문자를 실제 서비스 이용자로 전환하게 하는 것은 어려운 일이지만 이미 이탈해버린 사용자의 전환율은 0% 이다. 전환율을 늘려 서비스 사용자를 늘리기 위해서는 이탈률을 줄여야 한다.
3. 수익 증대
빠른 웹 사이트 로딩 속도로 인한 이탈률 감소와 전환율 증가는 트래픽 증대 및 회원 수 증가로 이어지고 이는 곧 수익 증대를 의미한다.
실제로 로딩 속도가 1초 빨라졌을 때 아마존 판매량은 1%, 구글 검색량은 0.2%, 월마트의 전환율은 2% 증가했다고 한다. 퍼센티지로 보면 크지 않아 보이지만 이 수치를 돈으로 환산하면 각각 68억 달러, 4억 5천만 달러, 2억 4천400만 달러의 매출 증가라고 한다.
4. 사용자 경험(UX) 향상
최적화는 효과적인 UX 개선 수단이며 페이지 로딩이 빠를수록 UX는 향상된다.
로딩이 오래 걸릴 경우, 스피너, 프로그레스 바, 스켈레톤과 같이 로딩 중임을 알려주는 UI를 먼저 표시하여 사용자를 조금 더 기다리게 하는 방법도 있다. 하지만 이러한 방법은 최적화를 통해 페이지 로드 속도를 빠르게 하는 것보다 UX에 좋다고 볼 수는 없다.
HTML, CSS 코드 최적화하기
화면을 렌더링할 때는 HTML 파일과 CSS 파일이 필요하다. HTML 파일은 DOM 트리를, CSS 파일은 CSSOM 트리를 만들고 두 트리를 결합하여 렌더트리를 생성하고 이후 렌더링할 때 사용된다.
DOM 트리와 CSSOM 트리 중 하나라도 변경되면 리렌더링이 발생되는데 트리의 크기가 크고 복잡할수록 더 많은 계산이 필요하기 때문에 리렌더링에 소모되는 시간도 길어진다. 따라서 HTML, CSS 코드를 최적화함으로써 렌더링 성능을 향상시킬 수 있다.
HTML 최적화
1. DOM 트리 가볍게 만들기(불필요한 요소 삭제)
// 수정 전
<div>
<ol>
<li> first </li>
<li> second </li>
<li> third </li>
</ol>
</div>
// 수정 후, 불필요한 div 요소 제거
<ol>
<li> first </li>
<li> second </li>
<li> third </li>
</ol>DOM 트리에서 자식 요소가 많을수록 복잡도는 커지고 DOM 트리가 변경되었을 시 계산해야되는 것도 많아지므로 불필요하게 트리의 깊이를 증가시키는 요소는 삭제한다.
2. 인라인 스타일 사용하지 않기
// 수정 전
<div style="margin: 10px;"> margin 10px </div>
<div style="margin: 10px;"> margin 10px </div>
// 수정 후, class와 CSS로 대체
<div class="margin10"> margin 10px </div>
<div class="margin10"> margin 10px </div>
.margin10 {
margin: 10px;
}인라인 스타일은 개별 요소에 스타일 속성을 작성해주는 것이기 때문에 클래스로 묶어서 한 번에 작성한다. 불필요한 코드 중복은 가독성을 떨어뜨리며 파일 크기를 증가시킨다.
또한 CSS 파일을 따로 작성하면 한 번의 리플로우만 발생하게 되는데 인라인 스타일은 리플로우를 계속해서 발생시켜 렌더링 완료 시점을 늦춘다. 애초에 인라인 스타일은 웹 표준에 맞지 않으므로 지양해야 한다.
CSS 최적화
1. 사용하지 않는 CSS 제거
CSS 파일의 모든 코드의 분석이 끝나면 CSSOM 트리가 생성된다. 불필요한 CSS 코드가 있다면 CSSOM 트리의 완성이 늦어지므로 사용하지 않는 CSS 코드가 있다면 제거하는 것이 좋다. 보통 해당 CSS 코드를 사용하던 요소를 삭제하면서 CSS 코드만 남게 되는 경우가 많다.
2. 간결한 셀렉터 사용
// 복잡한 CSS 셀렉터 예시
.cart_page .cart_item #firstItem {
...
}
// 올바른 예시
.cart_item {
...
}셀렉터가 복잡할수록 스타일 계산과 레이아웃에 시간을 더 많이 소모하게 되므로 꼭 필요한 경우라면 어쩔 수 없지만 최대한 간결한 CSS 셀렉터를 사용하는 것이 좋다.
리소스 로딩 최적화
HTML 파일에서 JavaScript 파일을 불러올 땐 <script> 요소를 사용하고 CSS 파일을 불러올 땐 <link> 요소를 사용한다. 이때 파일을 불러오는 위치에 따라서 렌더링 완료 시점이 달라질 수 있다.
1. CSS 파일 불러오기
<head>
<link href="style.css" rel="stylesheet" />
</head>DOM 트리는 HTML 코드를 한 줄씩 순차적으로 읽으면서 구성하지만 CSSOM 트리는 CSS 코드를 모두 해석해야 구성할 수 있다. 따라서 CSSOM 트리를 빠르게 구성할 수 있도록 HTML 파일 상단의 <head> 요소에 배치하는 것이 좋다.
2. JavaScript 파일 불러오기
<body>
...
<script src="script.js" type="text/javascript"></script>
</body>JavaScript는 DOM 트리와 CSSOM 트리를 동적으로 변경할 수 있다. HTML 코드 파싱 중 <script> 요소를 만나는 순간 해당 스크립트가 실행되며 <script> 요소 이전까지 생성된 DOM 까지만 접근할 수 있다.
<script> 요소를 HTML 코드 중간에 넣는다면 해당 요소 이후에 생성될 DOM을 수정하는 코드가 있는 경우 화면에 의도한 대로 표시되지 않게 된다.
페이지의 대부분의 용량은 HTML/CSS/JS와 같은 코드 데이터가 아닌 이미지 파일과 같은 미디어 파일이 차지합니다. (전체 페이지 용량의 약 51% 차지)그래서 이미지의 용량을 줄이거나 요청의 수를 줄이는 것을 우선적으로 고려할 시, 사용자 경험을 빠르게 개선할 수 있습니다.
또한 JavaScript 파일을 다운로드한 후 스크립트 실행이 완료될 때까지 DOM 트리 생성이 중단된다. DOM 트리 생성이 중단된 시간만큼 렌더링 완료 시간은 늦춰지므로 JavaScript 파일은 DOM 트리 생성이 완료되는 시점인 HTML 문서 최하단 body 요소가 닫히기 직전에 배치하는 것이 좋다.
브라우저 이미지 최적화
페이지의 대부분의 용량은 HTML, CSS, JS 코드가 아닌 이미지 파일과 같은 미디어 파일이 차지한다. (전체의 약 51%) 그러므로 이미지의 용량을 줄이거나 서버 요청 수를 줄이는 것을 우선적으로 고려하면 UX를 개선할 수 있다.
이미지 스프라이트
웹 페이지를 로드할때 각각의 이미지를 전부 서버에 요청할 경우 로딩 시간이 늘어나게 되는데 이미지 스프라이트를 사용하면 한번의 이미지 요청으로 대부분의 개별 이미지를 사용할 수 있기 때문에 네트워크 로딩 시간을 줄일 수 있다.
또한 많은 이미지 파일을 개별로 관리할 필요없이 특정 스프라이트 이미지 파일만을 관리하면 되므로 관리가 용이하다.
이미지 스프라이트는 여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만들고 CSS의 background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용한다.
하나의 이미지를 배경 이미지로 사용하되 표시하고 싶은 부분에 맞춰 width, height, background-position 속성을 주어 아이콘을 만든다.
아이콘 폰트 사용
아이콘 사용이 많을 경우 아이콘을 이미지가 아닌 아이콘 폰트를 사용하여 용량을 줄일 수 있다. 대표적인 아이콘 글꼴 서비스로는 Font Awesome이 있다.
WebP 또는 AVIF 이미지 포맷 사용
이미지 최적화를 위해 전통적으로 사용하는 JPEG, PNG 형식이 아닌 WebP, AVIF를 사용하면 용량을 감소시킬 수 있다. WebP는 JPEG와 비교했을 때 25-35% 감소, PNG는 26% 감소된다. AVIF는 JPEG와 비교했을 때 50%감소, WebP는 20% 감소된다.
하지만 WebP와 AVIF는 비교적 최근에 등장한 이미지 포맷이기 때문에 모든 브라우저에서 호환되지 않는다는 단점이 있으므로 사용 시 참고하는 것이 좋다.
Can I use AVIF?, Can I use WebP?
CDN(Content Delivery Network) 사용
CDN은 콘텐츠를 좀 더 빠르고 효율적으로 제공하기 위해 설계되었다. 네트워크 지연(latency)은 유저와 서버간의 물리적인 거리의 한계가 존재하므로 필연적으로 발생한다. CDN은 이를 해결하고자 세계 곳곳에 분포한 분산된 서버에 콘텐츠를 저장한다.
사용자가 가까운 곳에 위치한 데이터 센터의 서버에서 데이터를 가져오기 때문에 거쳐야하는 서버의 갯수가 크게 줄어드므로 로딩 속도가 빨라진다.
