최적화란 무엇인가?
최적화는 주어진 조건에서 최대로 효율을 낼 수 있도록 하는 과정이다.
최적화가 왜 필요한가?
쇼핑몰 사이트 등에서 로딩창만 계속 본 경험이 있었는데 정말 짜증났고 다시는 들어간 적이 없었던 것 같다.
이처럼 최적화가 안되어있으면 데이터를 불러오는 시간이 더 많이 들기 때문에 유저의 이탈률이 어마무시 할 것이다.
게다가 요즘에는 인터넷 속도가 더 빨라졌기 때문에 이탈률이 훨씬 더 증가했을 것이다.
최적화를 진행하면 전환율도 증가를 하는데 웹 사이트를 방문한 사용자 중 회원가입, 상품 구매, 게시글 조회, 다운로드 등의 행위를 한 방문자의 비율을 의미한다고 한다.
이처럼 이탈률 감소와 전환율 증가는 자연스레 수익 증대로 이어지게 되기 때문에 최적화 작업은 불가피하다.
HTML,CSS 코드 최적화하기
보통 CSS 작업을 할 때 무심코 이랬던 적이 있다.
<div>
<div>
<li> 첫 번째 </li>
</div>
</div>이렇게 CSS 작업이 조금 어려울 때 이렇게 좀 편법(?)을 쓴 적이 있는데, 자식 요소가 많아질수록 레이아웃 계산도 훨씬 많아진다는 것을 늦게 깨달았다..
이를 방지하기 위해 Fragment를 쓴 적이 있긴 한데 이 부분도 레이아웃 계산에 들어가는지는 모르겠다.
인라인 스타일 지양하기
내가 제일 싫어하는 방법이기도 한데, 이 방법은 리플로우를 계속해서 발생시키기 때문에 렌더링 시점이 늦어진다.
리소스 로딩 최적화하기
CSS 파일
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>DOM 트리는 html을 하나하나 읽으면서 순차적으로 구성할 수 있지만 CSSOM 트리는 CSS코드를 읽어야 구성할 수 있기 때문에 css를 불러올 때는 최상단에 놓는게 좋다.
JS 파일
반면에 JS 파일은 가장 밑에 두는 게 좋은데 DOM 트리를 생성하는 과정에서 script 태그를 만나면 자바스크립트 파일을 다운받기 위해 트리 생성을 중단하기 때문이다.
브라우저 이미지 최적화하기
이미지 스프라이트
클라이언트에서 서버에게 요청하는 파일이 많아질수록 로딩 시간은 점점 늘어나게 된다.
이를 해결하기 위해 이미지 스프라이트라는 기법을 사용하는데 여러 개의 이미지를 모은 다음 CSS로 background-position 속성을 사용하는 것이다.
또한 FontAwesome 같은 곳에서 아이콘을 이용하거나 WebP 또는 AVIF 이미지 포맷 사용하는 방법이 있다.
Tree Shaking
개발을 하다보면 라이브러리를 가져다 쓸 때 불필요한 코드도 가져다 쓰게 되는 경우가 있는데 이를 제거하는 작업을 나무에 빗대어서 Tree Shaking이라고 한다.
필요한 모듈만 import하기
import { useState, useEffect } from 'react'tree shaking은 빌드 시 필요없는 코드는 제거한다.
tree shaking이랑 code spliting이 아예 관련없는 건 아닌 거 같은데...어렵네..
Babelrc 파일 설정하기
babel은 빌드시 ES5 문법으로 변환시켜준다. ES5는 import 지원을 하지 않기 때문에 require 를 사용하는데 이는 tree shaking에 걸림돌이 되고, 모든 모듈을 다 불러오게 된다. 이를 방지하기 위해,
{
“presets”: [
[
“@babel/preset-env”,
{
"modules": false //ES5로 변환되는 것을 방지
}
]
]
}위와 같이 modules 속성을 false로 처리한다.
