다시 마음을 다잡고, 열심히 해보려 한다.
Optimization (최적화)
간단히 이야기하자면 '주어진 조건으로 최대의 효율을 내는 것'이라고 할 수 있다.
- 컴퓨터 공학에서의 Optimization :
→ 가능한 적은 자원을 소모하면서 가능한 빠르게 원하는 결과를 얻을 수 있도록 하는 것. - 웹 개발에서의 Optimization :
→ 주어진 조건 하에서 최대한 빠르게 화면을 표시하도록 하는 것.
웹 개발에서 최적화가 필요한 이유
- 이탈률 방지 및 감소
- 화면 로딩 시간이 길어지면 사용자가 페이지를 이탈할 확률이 높아진다.
- 사용자들은 오래 기다려주지 않는다. 페이지 로드가 3초 이상 걸리면 53%의 사용자가 사이트를 이탈한다.
- 전환율 증대
- 이탈률 감소 → 전환율 증대 로 이어진다.
- 수익 증대
- 이탈률 감소 → 전환율 증대 → 트래픽 증대 → 회원 수 증가 → 수익 증대 로 귀결된다.
- 사용자 경험(UX) 향상
- 페이지가 빠르게 로딩 및 전환된다면 사용자의 만족도는 증가할 것이고, 이는 사용자 경험의 향상으로 이어진다.
- 최적화는 효과적인 UX 개선 수단이다.
Optimization 기법
- HTML, CSS 코드를 최적화하면 렌더링의 성능이 향상되어 전체적인 최적화가 가능해진다.
- 트리의 크기가 크고 복잡할수록 리렌더링에 소모되는 시간도 길어진다.
1. HTML 최적화
- DOM 트리 경량화 시키기
- 불필요한 요소 삭제
- 인라인 스타일 사용하지 않기
- 인라인 스타일은 개별 요소에 스타일을 지정해주기 때문에, 스타일 속성이 중복 작성될 경우가 많아진다.
- 리플로우를 계속해서 발생시켜 렌더링 완료 시점을 늦춘다.
2. CSS 최적화
- 불필요한 CSS 제거하기
- 간결한 셀렉터 사용하기
3. 리소스 로딩 최적화
- CSS 파일 :
- CSSOM 트리를 빠르게 구성할 수 있도록, HTML 문서 최상단에 배치하기
- <head> 요소 안에서 불러오기
<head>
<link href="style.css" rel="stylesheet" />
</head>- JS 파일 :
- HTML 문서 최하단에 배치하기
- <body> 요소 내 마지막에서 불러오기
- 또는 <head> 요소 내에서 defer 속성과 함께 불러올 경우, 바로 불러오지만 실행은 파싱이 끝나자마자 진행된다.
<body>
<div>...</div>
...
<script src="script.js" type="text/javascript"></script>
</body><head>
<script defer src="script.js"></script>
</head>
4. 브라우저 이미지 최적화
페이지 대부분의 용량은 이미지 파일과 같은 미디어 파일이 차지한다.
따라서 이미지 용량을 줄이거나 또는 요청 횟수를 줄이는 것이 최적화에 도움이 된다.
- 이미지 스프라이트 :
- 여러 개의 이미지를 하나의 스프라이트 이미지로 만들어서 필요한 부분만 클래스 등으로 구분해서 마치 필요한 부분만 오려쓰듯 사용한다.
- 이미지 파일마다 요청하는 것이 아닌 하나의 이미지 파일만 요청해오면 되기 때문에 서버 요청 횟수가 줄어들고 네트워크 로딩 시간을 줄일 수 있다.
- 아이콘 폰트 사용하기 :
- CDN으로 사용하기
- Font Awesome 모듈 설치하기
- WebP 또는 AVIF 이미지 형식 사용하기 :
- 기존의 JPEG나 PNG 형식보다 훨씬 용량이 작고, 품질은 더욱 뛰어나다.
- 하지만, 아직 모든 브라우저에서 호환이 되지 않는다. → <picture> 태그로 각 브라우저의 호환에 맞게 분기를 대체할 수 있다.
<picture>
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="logo">
</picture>5. 캐시 사용하기
- 캐시를 사용하면 리소스를 매번 다운로드할 필요가 없다.
- HTTP 요청을 보낼 때, 조건부 요청 헤더를 작성해서 같이 보낸다 :
- If-Modified-Since,
- If-None-Match
6. CDN 사용하기
사용자와 호스팅 서버 간의 물리적 거리의 한계(예. 한국 - 미국 구글 본사)로 인해 CDN은 세계 곳곳에 분산된 서버에 콘텐츠를 저장한다.
사용자와 가까운 곳에 위치한 데이터 센터(서버)의 데이터를 가져오기 때문에, 서버의 갯수가 줄어 로딩 속도가 빨라진다.
Tree Shaking
나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것.
JS 트레쉐이킹
- 필요한 모듈만 Import하기
- Babelrc 파일 설정하기 : ES5로 변환되는 것을 방지시켜 주어, require(Export되는 모든 모듈을 불러옴)가 아닌 Import사용이 가능하다.
{
“presets”: [
[
“@babel/preset-env”,
{
"modules": false
}
]
]
}- sideEffets 설정하기
- ES6 문법을 사용하는 모듈 사용하기
'코딩' 카테고리의 다른 글
| 시간복잡도 (0) | 2022.08.07 |
|---|---|
| AWS (Amazon Web Service) (0) | 2022.08.05 |
| [최적화] Lighthouse (0) | 2022.08.04 |
| [기타] 관심 공고 리스트 (0) | 2022.08.04 |
| GraphQL (0) | 2022.08.02 |
