최적화

 최적화 방법들

 

최적화 기법

(1) DOM 트리 가볍게 만들기

// 수정 전
<div>
	<ol>
		<li> 첫 번째 </li>
		<li> 두 번째 </li>
		<li> 세 번째 </li>
	</ol>
</div>

// 수정 후 : 불필요한 div 요소 제거
<ol>
	<li> 첫 번째 </li>
	<li> 두 번째 </li>
	<li> 세 번째 </li>
</ol>

(2) 인라인 스타일 사용하지 않기

//수정 전
<div style="margin: 10px;"> 마진 10px </div>
<div style="margin: 10px;"> 이것도 마진 10px </div>

//수정 후 : class와 CSS로 대체
<div class="margin10"> 마진 10px </div>
<div class="margin10"> 이것도 마진 10px </div>

.margin10 {
	margin: 10px;
}

(3) 사용하지 않는 CSS 제거하기

(4) 간결한 셀렉터 사용하기

 

캐시 사용하기

• 캐시가 유효한 시간 동안 네트워크 리소스를 아낄 수 있음
• 파일을 다시 받아올 필요가 없기 때문에 브라우저 로딩이 빨라짐
• 로딩이 빨라진 만큼 빠른 사용자 경험 제공 가능

자바스크립트 트리쉐이킹

(1) 필요한 모듈만 import 하기

(2)Babelrc파일 설정하기

{
  “presets”: [ 
    [
      “@babel/preset-env”,
      {
	    "modules": false
      }
    ]
 ]
}

(3) sideEffects 설정하기

웹팩은 사이드 이펙트를 일으킬 수 있는 코드의 경우, 사용하지 않는 코드라도 트리쉐이킹 대상에서 제외시킵니다. 이 경우

package.json 파일에서 sideEffects를 설정하여 사이드 이펙트가 생기지 않을 것이므로 코드를 제외시켜도 됨을 웹팩에게 알려줄 수 있습니다.

{
  "name": "tree-shaking",
  "version": "1.0.0",
  "sideEffects": false
}

{
  "name": "tree-shaking",
  "version": "1.0.0",
  "sideEffects": ["./src/components/NoSideEffect.js"]
}

(4) ES6 문법을 사용하는 모듈 사용하기

 

Lighthouse

 

* Performance - 웹성능 측정

* Accessibility  -  웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인

* Best Practices  -  웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인

* SEO -  웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인

* PWA - 해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인