[기초지식] Optimization(최적화기법)

daun·2022년 8월 4일

기초지식

[기초지식]

목록 보기

20/25

1. HTML, CSS 코드 최적화

TML 파일은 DOM 트리를, CSS 파일은 CSSOM 트리를 만듬
랜더링시 두 트리를 결합
이 두 트리 중에서 하나라도 변경되면 리렌더링을 유발
이때 트리의 크기가 크고 복잡할수록 더 많은 계산이 필요하기 때문에 리렌더링에 소모되는 시간도 길어짐

=> 따라서 HTML, CSS 코드를 최적화함으로써 렌더링 성능을 향상시킬 수 있음

1) HTML 최적화 방법

되도록 DOM 트리를 가볍게! 불필요한 요소는 삭제!
ex) 불필요한 div 요소 제거
인라인 스타일 사용하지 않기!
(애초에 인라인 스타일은 웹 표준에 맞지않아 지양해야함)
ex) 스타일은 모두 CSS로 대체하여 리플로우는 한 번만 발생시킴

2) CSS 최적화 방법

불필요한 CSS코드 제거-> CSSOM 트리 생성 빨라짐
간결한 셀렉터 사용

2. 리소스 로딩 최적화

파일을 불러오는 위치가 어디인지에 따라서 렌더링 완료 시점이 달라짐

1) CSS 파일 불러오는 위치

DOM트리는 HTML코드를 한 줄씩 읽으면서 순차적으로 구성
CSSOM 트리는 CSS 코드를 모두 해석해야 구성

=> 따라서 CSSOM 트리는 가능한 빠르게 구성할 수 있도록
CSS는 HTML문서 최상단 위치

// CSS 파일은 HTML 파일 상단의 head 요소 안에서 불러올 것
<head>
	<link href="style.css" rel="stylesheet" />
</head>

2) JS 파일 불러오는 위치

JavaScript는 DOM 트리와 CSSOM 트리를 동적으로 변경
HTML코드 파싱 중 스크립트 태그를 만나는 순간 해당 스크립트 실행되며,
이전에 생성된 DOM요소 까지만 접근할 수 있음
이는 해당 요소 이후에 생성될 DOM을 수정하는 코드가 있을 경우
화면이 의도한 대로 표시되지 않을 수 있음
또한 스크립트 실행 완료되기 전까지 DOM 트리 생성이 중단됨 => 따라서 JS파일은 HTML문서 최하단에 배치
```
<body>
	// JavsScript 파일은 body 요소가 닫히기 직전에 작성할 것
	<script src="script.js" type="text/javascript"></script>
</body>
```

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

페이지의 대부분의 용량은 HTML/CSS와 같은 코드 데이터가 아닌
이미지 파일과 같은 미디어 파일이 차지(전체 용량의 약 51%)

=> 그래서 이미지의 용량을 줄이거나 요청의 수를 줄여야함

1) 이미지 스프라이트

여러개의 이미지를 모아 하나의 스프라이트 이미지로 만들rh
CSS의 background-position 속성을 사용해
이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법

2) 아이콘 폰트 사용

모든 아이콘을 이미지로 사용하는 것이 아니라 아이콘 폰트를 사용하여 용량을 줄일 수 있습니다. 대표적인 아이콘 글꼴 서비스로는 Font Awesome이 있dma

(1) CDN으로 이용

1. Font Awesome에 가입하면 키트를 발급해주는데, 이 키트를 HTML 파일에서 요소에 넣어주기만 하면 CDN으로 Font Awesome을 사용할 준비가 완료
1. Font Awesome 사이트에서 사용하고 싶은 아이콘을 찾아서 사용할 환경(HTML, React, Vue)에 맞는 코드를 복사하고 붙여넣기만 하면 사용할 수 있습니다.

(2) 모듈로 설치

React 환경에서 사용할 경우에는 패키지를 설치하면 됨

패키지 모듈로 설치

// 핵심 패키지 설치
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

1. 아이콘 이름은 camelCase로 작성할 것

3) WebP 또는 AVIF 이미지 포맷 사용하기

JPEG,PNG(x) 고용량, 대부분의 브라우저 지원
WebP,AVIF(o) 저용량, 구버전 브라우저에서 지원 안됨, safari 지원안됨
Q. 그럼 어떻게 해야하는가?
A. 다행히도 HTML의 Picture 태그 이용하면
각 브라우저의 호환에 맞도록 분기 가능

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>
// <souce srcset>에 정의한 logo.WebP 포맷을 지원하지 않는다면 souce태그는 무시됨

4. 캐시 사용

프론트엔드단에서 캐시를 사용하지 위해서는
HTTP 요청을 보낼 때 조건부 요청 헤더를 작성해서
캐시를 재사용해도 되는지 확인만 해주면 됨!

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

=> 보통 두 종류의 헤더를 동시에 사용
둘 중 하나만 사용했다가 매칭되는 응답 헤더가 없는 경우에는
재사용할 수 있는 경우에도 리소스를 다시 받는 번거로움을 피하려고!

5. CDN 사용

네트워크 지연은 우저와 호스팅 서버간의 물리적 거리 때문에 발생
유저-서버의 거리가 멀다면 지연도 늘어남
CDN은 이를 해결하고자 세계 곳곳에 분포한 분산된 서버에 콘텐츠를 저장
간단히 말해, CDN은 유저가 가까운 곳에 위치한 데이터 센터의 데이터를 가져옴
그러므로 데이터가 전달되기 위해 거쳐야하는 서버의 갯수가 크게 줄어
로딩 속도가 빨라짐!