📌 최적화란?
컴퓨터 공학에서의 최적화는 적은 리소스를 소모하면서 가능한 빠르게 원하는 결과를 얻을 수 있도록 하는 것을 의미한다. 웹 개발에서의 최적화는 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것이다.🧐 최적화의 필요성 및 효과
- 이탈률 감소
- 전환율 증가
- 수익 증대
- 사용자 경험 향상
최적화 기법
📌 HTML, CSS 코드 최적화하기
HTML 최적화 방법
- DOM 트리 가볍게 만들기
- 불필요하게 깊이를 증가시키는 요소 삭제
- 인라인 스타일 사용하지 않기
- 인라인 스타일은 개별 요소에 스타일 속성을 작성해주는 것이기 때문에 클래스로 묶어서 한번에 작성해도 될 스타일 속성을 중복으로 작성하게 되는 경우가 생긴다.
- CSS 파일을 따로 작성하면 한 번의 리플로우만 발생하는 것과 달리 인라인 스타일은 리플로우를 계속해서 발생시켜 렌더링 완료 시점을 늦춘다.
💡 참고
styled components는 인라인 스타일에 포함되지 않는다. styled components는 javascript 파일 내에 작성되지만 렌더링 시 class를 부여해서 css를 적용하기 때문이다.
CSS 최적화 방법
- 사용하지 않는 CSS 제거
- 간결한 셀렉터 사용
📌 리소스 로딩 최적화하기
CSS 파일 불러오기
화면을 렌더링할 때 DOM트리는 HTML 코드를 한줄씩 읽으면서 순차적으로 구성할 수 있지만, CSSOM 트리는 CSS 코드를 모두 해석해야 구성할 수 있다. 따라서 CSSOM 트리를 빠르게 구성할 수 있도록 HTML 문서 최상단(head 요소 안)에 배치하는 것이 좋다.
JS 파일 불러오기
Javascript는 DOM트리와 CSSOM트리를 동적으로 변경할 수 있다. HTML 코드 파싱 중에 <script> 요소를 만나는 순간 해당 스크립트가 실행되며 <script> 요소 이전에 생성된 DOM까지만 접근할 수 있다. 따라서 <script> 요소를 중간에 넣는다면 해당 요소 이후에 생성될 DOM을 수정하는 코드가 있는 경우 화면에 의도한 대로 표시되지 않는다. 또 스크립트 실행이 완료될 때까지 DOM트리 생성이 중단되고 중단된 시간만큼 렌더링 완료 시간이 늦춰진다. 이러한 이유로 Javascript 파일은 DOM트리 생성이 완료되는 시점인 HTML 문서 최하단(body 요소 바로 위)에 배치하는게 좋다.
📌 브라우저 이미지 최적화하기
페에지 대부분의 용량은 이미지 파일과 미디어 파일이 차지한다. 따라서 이미지의 용량을 줄이거나 요청의 수를 줄이는 것을 우선적으로 고려하면 사용자 경험을 빠르게 개선할 수 있다.
이미지 스프라이트
이미지 스프라이트 기법은 여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만들고 CSS의 width, height,background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법이다.
이 기법을 사용하면 한번의 요청으로 개별 이미지를 사용할 수 있기 때문에 네트워크 로딩 시간을 줄일 수 있다. 또한 많은 이미지 파일을 개별로 관리할 필요없이 스프라이트 이미지 파일만 관리하면 되므로 관리가 용이하다.
아이콘 폰트 사용하기
아이콘을 이미지 대신 아이콘 폰트를 사용하여 용량을 줄일 수 있다. 대표적으로 Font Awesome이 있다. Font Awesome의 사용법은 두가지가 있다.
- CDN 사용하기 : Font Awesome에서 발급한 키트를
head요소에 넣고 사용하고 싶은 아이콘을 찾아서 복사하고 붙여넣는다. - Font Awesome 모듈 설치하기 : Font Awesome을 다른 라이브러리처럼 설치해서 사용할 수도 있다. 리액트에서 사용할 경우 아래와 같은 패키지들을 설치하면 된다. 설치 후에는 사용하고 싶은 아이콘을 불러와서 사용한다. 아이콘의 이름은 camelCase로 작성해야한다.
// 핵심 패키지 설치
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
// 사용할 때 코드
import { FontAwesomeIcon } from "@fontawesome/react-fontawesome"
import { faReact } form "@fontawesome/free-brands-svg-icons"
const el = <FontAwesome icon={faReact} />WebP 또는 AVIF 이미지 포맷 사용하기
WebP는 PNG와 비교해 26% 용량이 감소되며 JPEG와 비교했을 땐 25-35% 더 감소된다. AVIF는 JPEG와 비교했을 때 무려 용량의 50%가 감소되며 WebP와 비교했을 땐 20% 감소된다.
하지만 WebP와 AVIF 모두 비교적 최근에 등장한 이미지 포맷이기 때문에 다른 포맷처럼 모든 브라우저에서 호환되지 않는다는 단점이 있다. 이런 단점은 HTML의 <picture> 태그를 이용하면 각 브라우저의 호환에 맞도록 분기를 대체할 수 있다.
다음과 같이 작성하면 만약 접속한 브라우저에서 <source> 태그 내의 srcset에 정의한 WebP 포맷을 지원하지 않는다면 해당 <source> 태그는 무시한다.
// img 요소의 다중 이미지 리소스를 위한 컨테이너를 정의할 때 사용
<picture>
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="logo">
</picture>📌 CDN 사용하기
CDN은 네트워크 지연(유저와 호스팅 서버 간의 물리적 거리의 한계)을 해결하고자 세계 곳곳에 분포한 분산된 서버에 콘텐츠를 저장한다. 간단히 말해 CDN은 유저가 가까운 곳에 위치한 데이터 센터(서버)의 데이터를 가져온다. 이렇게 하면 데이터가 전달되기 위해 거쳐야하는 서버의 수가 줄기 때문에 로딩 속도가 빨라진다.
