📌 최적화
: 주어진 조건으로 최대 효율을 낼 수 있도록 하는 것
컴퓨터 공학에서의 최적화: 가능한 적은 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것
웹 개발에서의 최적화: 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것
최적화의 필요성 및 효과
1. 이탈률 감소
구글 조사 결과 페이지 로드가 3초 이상 걸리면 53%이 사용자가 사이트를 이탈한다고 한다.
페이지 로드 시간이 길어지면 이탈률이 폭발적으로 증가한다.
웹 사이트의 성능 최적화를 통해 페이지 로딩 속도를 줄이면, 사용자의 이탈률을 효과적으로 줄일 수 있다는 의미를 갖는다.
2. 전환율 증가
이탈률이 줄어들면 전환율이 높아질 확률도 커진다.
전환율: 웹 사이트에 방문한 사용자 중 회원가입, 상품 구매, 게시글 조회, 다운로드 등의 행위를 한 방문자의 비율
3. 수익 증대
이탈률 감소, 전환율 증가 => 트래픽 증대 및 회원수 증가로 이어진다. => 수익 증대
페이지 로딩 속도 1초의 차이로 어마어마한 수익이 왔다갔다 할 수도 있다.
4. 사용자 경험 향상
페이지 로딩이 빠를 수록 UX가 향상된다. => 웹 사이트 성능 최적화는 효과적인 UX 개선 수단이다.
📌 HTML, CSS 최적화 기법
HTML 파일은 DOM 트리를 만들고,
CSS 파일은 CSSOM 트리를 만든다.
두 트리를 결함하여 렌더링할 때 사용한다.
트리의 크기가 복잡할수록 리렌더링에 소모되는 시간이 길어진다.
따라서 HTML, CSS 코드를 최적화함으로써 렌더링 성능을 향상시킬 수 있다..
1. HTML 최적화 방법
- DOM 트리 가볍게 만들기
불필요하게 깊이를 증가시키는 요소를 삭제한다.
불필요한 div 요소 제거 등, 트리의 복잡도를 줄인다.
자식요소가 많을 수록 DOM 트리의 복잡도가 커진다.
- 인라인 스타일 사용하지 않기
개별 요소에 스타일을 작성해주는 것이기 때문에 파일 크기를 증가시킨다.
CSS파일을 따로 작성하면 단 한 번의 리플로우만 발생하는 것과 달리,
인라인 스타일은 리플로우를 계속해서 발생시켜 렌더링 완료 시점을 늦춘다.
=> 인라인 스타일은 웹 표준이 어긋난다.
2. CSS 최적화 방법
- 사용하지 않는 CSS 코드 제거하기
불필요한 CSS 코드가 있다면 CSSOM 트리의 완성이 늦어진다.
HTML 요소를 삭제할 때에는 해당 요소에 적용했던 CSS 코드를 삭제해준다.
- 간결한 셀렉터 사용하기
셀렉터가 복잡할 수록 스타일 계산과 레이아웃에 시간을 더 많이 소모한다.
=> 최대한 간결한 셀렉터를 사용하는 것이 좋다.
📌 리소스 로딩 최적화 하기
HTML 파일에서 script 요소와 link 요소의 위치에 따라 렌더링 완료 시점이 달라질 수 있다.
1. CSS 파일 불러오기 (link)
HTML 파일 최상단 Head 요소 안에서 불러온다.
CSSOM 트리는 CSS 코드를 모두 해석해야 구성할 수 있다.
따라서 CSSOM 트리를 가능한 빠르게 구성할 수 있도록 HTML 문서 최상단에 배치한다.
2. 자바스크립트 파일 불러오기 (script)
HTML 파일의 body 요소 최하단에서 불러온다.
HTML 코드 파싱 중에 script 요소를 만나는 순간 해당 스크립트가 실행된다.
따라서 script 요소 이전에 생성된 DOM까지만 접근할 수 있다.
script 요소를 HTML 코드 중간에 넣으면 해당 요소 이후의 DOM에 접근할 수 없게 되고,
스크립트 실행이 완료되기 전까지 DOM 트리 생성이 중단된다.
DOM 트리 생성이 늦어지면 그만큼 렌더링 완료 시간도 늦어진다.
이러한 이유로 자바스크립트 파일은 DOM 트리 생성이 완료되는 시점인 HTML 문서 최하단에 배치하는 것이 좋다.
📌 브라우저 이미지 최적화하기
전체 페이지 용량의 대부분은 코드 데이터가 아닌, 미디어 파일이 차지한다.
따라서 이미지 용량을 줄이거나 요청의 수를 줄이는 것으로 UX를 개선할 수 있다.
1. 이미지 스프라이트
여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만들고,
CSS의background-position속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 기법
하나의 스프라이트 이미지에서 표시하고 싶은 부분을 width, height, background-position 속성을 주어 아이콘을 만든다.
-
한 번의 이미지 요청으로 여러 개별 이미지를 사용할 수 있기 때문에 네트워크 로딩 시간을 줄일 수 있다.
-
특정 스프라이트 이미지 파일만을 관리하면 되므로 관리가 용이하다.
2. 아이콘 폰트 사용하기
아이콘을 이미지로 사용하는 것이 아닌, 아이콘 폰트를 사용한다.
(font awesome 등)
CDN으로 사용하거나 모듈 설치로 사용할 수 있다.
3. WebP 또는 AVIF 이미지 포맷 사용하기
비교적 최근에 등장한 이미지 포맷, 이미지 용량이 매우 감소된다.
모든 브라우저에서 호환되지 않는다.
=> HTML 파일에서 picture 태그를 이용하면 각 브라우저의 호환에 맞도록 분기할 수 있다.
picture: img 요소의 다중 이미지 리소스를 위한 컨테이너를 정의할 때 사용된다.
<picture>
<source srcset="logo.webp" type="image/webp"> //브라우저가 WebP 포맷을 지원하지 않는다면 무시된다.
<img src="logo.png" alt="logo">
</picture>캐시 사용하기
리소스를 매번 다운로드 받을 필요 없이 캐시에서 꺼내와 재사용하면 되기 때문에 네트워크 리소스와 로딩 시간을 줄일 수 있다.
CDN 사용하기
Content Delievery Network
: 유저가 가까운 곳에 위치한 데이터 센터(서버)의 데이터를 가져온다.
e.g. CloudFront, Cloudflare
