HTML 최적화 방법
1) DOM 트리 가볍게 만들기
<div>
<ol>
<li> 첫 번째 </li>
<li> 두 번째 </li>
<li> 세 번째 </li>
</ol>
</div>DOM 트리에서 불필요한 태그들을 없애서 트리의 깊이가 깊지 않도록 만들어야 렌더링 속도를 높힐 수 있다.
2) 인라인 스타일 사용하지 않기
클래스로 묶어서 한번에 작성하는게 코드 양에서 효율적이다. 파일 크기를 줄일 수 있고, 인라인 스타일에 경우 리플로우를 계속해서 발생시켜 렌더링 완료 시점을 늦춘다!
<div style="margin: 10px;"> 마진 10px </div>
<div style="margin: 10px;"> 이것도 마진 10px </div>CSS 최적화 방법
1) 사용하지 않는 CSS 제거하기
2) 간결한 셀렉터 사용하기
// 복잡한 CSS 셀렉터 예시
.cart_page .cart_item #firstItem { ... }
// 필요한 경우에는 어쩔 수 없지만, 가능한 한 간결하게 작성해줍니다.
.cart_item { ... }리소스 로딩 최적화하기
1) CSS 파일 불러오기
화면 렌더링을 위해서는 DOM트리와 CSSOM트리가 필요한 CSSOM트리는 HTML을 읽어오기전 모두 해석해야한다. 따라서,
css 파일을 불러오는 링크 태그는 html 문서 최상단에 배치하는 것이 좋다.
<head>
<link href="style.css" rel="stylesheet" />
</head>2) JS 파일 불러오기
script태그를 만나는 순간 자바스크립트 파일이 실행되며, 실행 이전까지 생성된 DOM 에 접근할 수 있다. DO트리 생성을 중단시킬 수 있으며, 전체 로딩시간을 저하시킬 수 있으므로 script태그는 문서 최하단에 배치하는 것이 좋다.
<body>
<div>...</div>
...
// JavsScript 파일은 body 요소가 닫히기 직전에 작성하는 것이 가장 좋습니다.
<script src="script.js" type="text/javascript"></script>
</body>브라우저 이미지 최적화하기
1) 이미지 스프린트
한 화면에서 여러 아이콘이나 이미지를 사용하는 경우, 각 아이콘, 이미지에 해당하는 파일을 따로 불러오지 않고 각 아이콘, 이미지가 함께 들어있는 큰 이미지를 활용하여 background-position 속성을 사용해 이미지의 일정 부분만 사용하는 방법으로 리소스 불러오기 횟수를 줄일 수 있다.
2) 아이콘 폰트 사용하기
아이콘을 이미지로 사용하지 않고 폰트로 사용한다!
1. CDN 으로 불러오기
2. Font Awesome 모듈 사용
3) Webp 또는 AVIF 이미지 포맷을 사용
호환되는 브라우저들을 잘 파악할 것!
JS 트리 쉐이킹 - (가지치기)
웹 브라우저가 강력해짐에 따라 자바스크립트 실행의 크기는 점점 커지고, 이 커진 자바스크립트의 실행은 CPU에 부담을 주기 시작했다. 번들링 시 불필요한 자바스크립트의 실행을 줄이고 최소화하는 것이 트리쉐이킹이라고 한다. ES6 모듈을 대상으로는 기본적으로 트리쉐이킹을 제공한다.
1. 필요한 모듈만 import 하기
import {useState, useEffect} from 'react';이 같이 전체를 import 하지 않고 필요한 함수만 import하는 경우 빌드 시 코드의 크기를 줄일 수 있다.
2. Babelrc 파일 설정하기
Babel은 자바스크립트 문법 변환 모듈이다. 이때 import -> require 문법으로 변환되면서 트리쉐이킹에 큰 걸림돌로 작용한다.
따라서 ES5로 변환되는 것을 막아야한다.
Barbelrc 파일에 다음과 같은 코드를 작성해 ES5로 변환하는 것을 막을 수 있다.
{
“presets”: [
[
“@babel/preset-env”,
{
"modules": false // true이면 ES5로 항상 변환
}
]
]
}3. sideEffects 설정하기
리액트에서 웹팩은 사이드 이펙트를 일으킬 수 있는 코드의 경우, 사용하지 않는 코드라도 트리쉐이킹 대상에서 제외시킨다.
sideEffects 란 함수의 실행으로 인해 외부에 있는 상태가 변경되는 상황! (리액트에서 상태는 immutable 해야한다.)
이런 경우 packaage.json 파일에서 sideEffect를 설정하여 코드를 제외시켜도 됨을 웹팩에게 알려줄 수 있다.
{
"name": "tree-shaking",
"version": "1.0.0",
"sideEffects": false
}
