2022. 10. 7. 15:28ㆍ프론트엔드/기타
Optimization, 최적화란?
보통 주어진 조건으로 최대의 효율을 내도록 하는 것을 의미하며, 웹개발에서는 메모리, 서버자원 등의 한정된 리소소를 가지고 최대의 효율(빠른 페이지 로딩)을 내도록 하는 것을 의미한다.
최적화가 중요한이유
UX (사용자 경험)의 측면
페이지 로딩이 느릴경우 사용자의 이탈률이 증가하게된다. 구글의 조사결과 페이지로드에 3초이상이 걸리면 무려 53%의 사용자가 사이트를 이탈한다고한다. 이탈율은 서비스의 수익과도 이어지는데 수익과는 별개로 페이지의 로딩이 느릴 경우, 브랜드에 대한 사용자의 인식, 웹 어플리케이션 사용에 부정적인 영향을 주게된다.
수익증대
웹사이트의 빠른 로딩은 수익증대 까지 이어지는 중요한 지표이다. 웹페이지의 빠른 로딩을 통해 사용자의 이탈률을 줄이고, 이탈률의 감소는 전환율의 증가로 이어질 모수를 크게하여 트래픽 증대 및 회원수의 증가로 곧 수익증대까지 이어질 수 있다. 실제로 로딩속도가 1초 빨라졌을때 아마존 판매량은 1%, 구글 검색량은 0.2%, 월마트의 전환율을 2% 증가했다고 한다.
이런 거대 기업들에서는 단 1%의 변화로도 어마어마한 차이이다. 이 수치를 돈으로 환산하면 각각 68억달러, 4억 5천만 달러, 2억 4천400만 달러의 매출 증가라고한다.
웹사이트 최적화 기법
HTML, CSS 최적화
1. DOM트리를 가볍게!
// 수정 전
<div>
<ol>
<li> 첫 번째 </li>
<li> 두 번째 </li>
<li> 세 번째 </li>
</ol>
</div>
// 수정 후 : 불필요한 div 요소 제거
<ol>
<li> 첫 번째 </li>
<li> 두 번째 </li>
<li> 세 번째 </li>
</ol>DOM 트리가 깊을수록, 자식 요소가 많을수록 DOM 트리의 복잡도는 커지는데, 복잡도가 클수록 DOM트리가 변경되었을때 계산해야 하는 것도 많아진다.
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;
}인라인 스타일의 사용은 웹표준에 어긋날 뿐만 아니라 불필요한 코드의 중복으로 가독성을 덜어뜨릴 뿐 아니라 파일의 크기를 증가시킨다. 또 CSS파일을 따로 작성하면 단 한번의 리플로우만 발생하는 것과 달리, 인라인 스타일은 리플로우를 계속 발생시켜 렌더링의 완료시점까지 늦춘다.
리소스 로딩 최적화
HTML 파일에서 CSS, Javascript를 불러올때 <script> 요소를, CSS를 불러올땐 <link>요소를 사용하는데 이때 파일을 불러오는 시점에 따라 렌더링의 완료시점이 달라질 수 있다.
CSS 로딩
화면을 렌더링할때는 DOM트리와 CSSOM 트리가 필요한데, DOM트리는 HTML코드를 한줄한줄 읽으며 순차적으로 구성할 수 있지만, CSSOM트리는 CSS를 모두 해석해야 구성할 수 있다.
따라서 CSSOM트리를 가능한 빠르게 구성해 웹사이트의 레이아웃이 무너지지않도록 최상단에 배치하는것이 좋다.
<head>
<link href="style.css" rel="stylesheet" />
</head>Javascript 로딩
JavaScript는 DOM 트리와 CSSOM 트리를 동적으로 변경할 수 있다. HTML 코드 파싱 중에 Script요소를 만나는 순간 해당 스크립트가 실행되며, script 요소 이전까지 생성된 DOM을 수정하는 코드가 있는 경우에는 화면이 의도한 대로 표시되지 않게된다.
<body>
<div>...</div>
...
// JavsScript 파일은 body 요소가 닫히기 직전에 작성하는 것이 가장 좋습니다.
<script src="script.js" type="text/javascript"></script>
</body>또한 스크립트 실행이 완료될때까지 DOM트리 생성이 중단되므로 DOM트리에 영향을 주지 않기위해 Script요소는 HTML문서 최하단에 배치하는것이 좋다.
이미지 최적화
1. 스프라이트 이미지 사용
클라이언트에서 서버요청이 증가 할수록 로딩 시간은 늘어나게되는데 이를 해결하기위해 웹페이지를 로드하는데 필요한 요청수 자체를 줄이기위해 이미지 스프라이트 기법을 사용할 수 있다.
이미지 스프라이트기법은 하나의 이미지를 로드하고, 해당 이미지를 CSS의 Background-position 속성을 이용해 나눠서 보여줌으로써 필요한 로딩을 줄이는 기법이다.
2. 높은 압축률의 최신 이미지파일 사용
JPEG는 높은압축률을 가지는 손실압축 이미지포맷이다. PNG포맷과 함께 웹에서 가장 많이 사용되는 이미지 포맷이지만 10년도 전에 개발된 압축 알고리즘이기 때문에 최신 알고리즘을 적용한 WebP와같은 파일포맷에 비해 대용량이다
WebP는 PNG와 비교해 26% 용량이 감소되며 JPEG와 비교했을 땐 25-35% 더 감소된다.
<picture>
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="logo">
</picture>
하지만 비교적 최근에 등장한 이미지 포맷이기 때문에 JPEG 포맷처럼 모든 브라우저에서 호환되지 않는다는 단점이 있다. 이런 경우 위와같이 HTML의 picture태그를 이용해서 각 브라우저에 호환하도록 분기를 대체할 수 있다
'프론트엔드 > 기타' 카테고리의 다른 글
| [개발 프로세스] Github Action을 이용한 CI/CD - 작성중 (0) | 2022.10.12 |
|---|---|
| [개발 프로세스] 워터폴 vs 애자일 방법론 (0) | 2022.10.12 |
| [Redux] 리덕스의 기본! (0) | 2022.09.01 |
| [REST API] 잘 디자인된 API (0) | 2022.08.05 |
| [부트캠프] 프론트엔드 부트캠프, 첫날 (0) | 2022.06.23 |