💡 최적화 Optimization
허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정이고, 수익과 관련되는 분야에서는 이익을 최대로 내는 과정이다.
알고리즘에서는 메모리를 조금이라도 덜 소모하거나 연산 횟수가 한 번이라도 더 적은 코드가 더 효율적이고 최적화된 코드이다.
웹 개발에서는 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것이다.
최적화를 했을때
이탈률 감소,전환율 증가,수익 증대 ,사용자 경험(UX) 향상 효과가있다.
✅ 최적화 방법
html코드
html 에서 DOM 트리를 깊지않게 만들어 복잡도가 커지지 않도록 한다.
style을 줄때는 개별요소에 적용하지말고 css파일을 따로 만들어 한번에 리플로우 되도록한다.
// 수정 전
<div>
<ol>
<li> 첫 번째 </li>
<li> 두 번째 </li>
<li> 세 번째 </li>
</ol>
</div>
// 수정 후 : 불필요한 div 요소 제거
<ol>
<li> 첫 번째 </li>
<li> 두 번째 </li>
<li> 세 번째 </li>
</ol>이미지 최적화
JPEG 또는 PNG 형식 이미지는 용량을 많이 차지한다. 새롭게 등장한 이미지 포맷인 WebP 또는 AVIF를 사용하여 용량을 더욱 감소시킬 수 있다. 단, 크롬, 오페라 , 파이어폭스만 지원한다.
<picture>
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="logo">
</picture>source 태그를 추가하여 webp 옵션을 설정하면 자동으로 변환시켜주고 지원하지않는 브라우저의경우 소스 태그가 무시된채 이미지가 렌더링된다.
🌴 JS Tree Shaking
나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것을 의미한다. 애플리케이션의 규모가 커지면서 코드의 양이 방대해지고, 다양한 라이브러리를 가져다 사용하게 되면 불필요한 코드를 그대로 가져가는 경우가 생각보다 많다.
트리쉐이킹 하는방법
필요한 모듈만 import 하기
리액트 같은 라이브러리를 사용할때 import React 를 하면 사용하지않는 함수도 불러와 낭비가 발생한다.
사용하려는 것만 불러오도록하자
import {useCallback} from "react";Babelrc 파일 설정
Babel은 자바스크립트 문법이 구형 브라우저에서도 호환이 가능하도록 ES5 문법으로 변환하는 라이브러리
S5문법은 import를 지원하지 않기 때문에 commonJS 문법의 require로 변경시키는데, require는 export 되는 모든 모듈을 불러온다.
{
“presets”: [
[
“@babel/preset-env”,
{
"modules": false
}
]
]
}🔌 Lighthouse
구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴이다.
개발자도구에서 Lighthouse 탭 에서 Analyze page load 클릭하면 사용 가능하다.
클릭후 로딩시간을 기다리면 결과가 나온다. 구글을 실행했는데 메인 페이지는 완벽에 가까울 정도로 최적화가 잘 이루어져있다.
Performance : 웹 성능을 측정한다. 화면에 표시되는시간, 불안정한 요소 확인 등.
Accessibility : 웹 접근성 최적화
Best Practices : 웹 표준 최적화
SEO : 웹 페이지가 검색 엔진 최적화
PWA (Progressive Web App) : 해당 웹 사이트가 모바일 애플리케이션으로도 잘 작동하는지 확인
📌 OPPORTUNITIES
인스타그램 페이지를 lighthouse를 돌렸다
6가지 키워드가 표시됬고 이를 분석했다.
Serve images in next-gen formats , Reduce unused JavaScript
딱봐도 좋지않은 빨간 두 키워드를 알아봤다.
Serve images in next-gen formats
mage formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.
WebP 및 AVIF와 같은 이미지 형식은 종종 PNG 또는 JPEG보다 더 나은 압축을 제공하므로 다운로드가 더 빠르고 데이터 소비가 적습니다.
이 경고의 최적화 방법으로는 기존 png 형식에 소스태그를 추가하고 webp 옵션을 설정하여 압축하여 파일 크기를 줄인다.
- AVIF 및 WebP는 이전 JPEG 및 PNG 형식에 비해 압축 및 품질 특성이 우수한 이미지 형식이다.
- AVIF는 Chrome, Firefox 및 Opera에서 지원되며 동일한 품질 설정의 다른 형식에 비해 작은 파일 크기를 제공한다.
<picture>
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="logo">
</picture>Reduce unused JavaScript
Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity.
사용하지 않는 JavaScript를 줄이고 네트워크 활동에 사용되는 바이트를 줄이는 데 필요할 때까지 스크립트 로드를 연기합니다.
해결방안
개발자도구 의 Coverage 탭 에서는 사용하지 않는 코드를 한 줄씩 분석할 수 있다.
Usage visualization (사용시각화) 탭의 빨간색 부분이 사용하지않는 js코드이다.
코드분활과 리팩토링을 통하여 사용하지 않는 코드를 제거한다.
