주어진 조건으로 최대 효율을 내는 것
가능한 적은 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것
주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것
웹 사이트의 성능 최적화를 통해 페이지 로딩 속도를 줄이면, 사용자의 이탈률을 효과적으로 줄일 수 있음
DOM 트리는 깊을 수록, 자식 요소가 많을 수록 복잡도가 커지고 DOM 트리가 변경되었을 때 계산해야 하는 것이 많아짐
인라인 스타일로 코드를 작성하면 스타일 속성을 중복으로 작성하게 되는 경우가 발생, 불필요한 코드 중복은 가독성을 떨어트리고 파일 크기를 증가
CSS 파일을 따로 작성했을 땐 단 한 번의 리플로우만 발생시키는 것과 달리 인라인 스타일은 리플로우를 계속해서 발생, 렌더링 완료 시점이 늦어짐.
// 복잡한 셀렉터 예
.main .container .box { ... }
// 가능한 한 갈결하게 작성
.box { ... }
JavaScript 파일을 불러오는 <script>
, CSS 파일을 불러오는 <link>
등의 요소를 사용할 때, 파일을 불러오는 위치가 어디인가에 따라 렌더링 완료 시점이 달라짐
CSSOM 트리는 CSS 코드를 모두 해석해야 구성할 수 있으므로 CSSOM 트리는 HTML 문서의 최상단에 배치
HTML 코드 파싱 중 <script>
요소를 만나면 해당 스크립트가 실행, 스크리븥 요소 이전까지 생성된 DOM 까지만 접근 가능.
스크리트 실행이 완료되기 전까지 DOM 트리 생성이 중단.
따라서 JavaScript 파일은 DOM 트리 생성이 완료되는 시점인 HTML 문서 최하단에 배치하는 것이 좋음
여러 개의 이미지를 모아 하나의 스프라이트 이미지를 만들고 CSS의 background-positon
속성을 사용, 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법
해당 방법을 사용하면 네트워크 로딩 시간을 줄일 수 있으며 관리가 용이함
아이콘 사용이 많을 때는 아이콘 폰트를 사용하여 용량을 줄일 수 있음
<head>
요소에 넣어 사용JPEG 또는 PNG 대신 WebP 또는 AVIF를 사용, 용량을 감소
<picture>
태그를 사용해 보완 가능, 각 브라우저의 호환에 맞도록 분기 대체<picture>
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="logo">
</picture>
콘텐츠를 좀 더 빠르고 효율적으로 제공하기 위해 설계, 유저가 가까운 곳에 위치한 데이터 센터(서버)의 데이터를 가져오는 방식.
캐시 : 다운로드 받은 데이터나 값을 복사해 두는 임시 장소
캐시 검증 헤더
캐시에 저장된 데이터와 서버의 데이터가 동일한지 확인하기 위한 정보를 담은 응답 헤더
Last-Modified : 데이터가 마지막으로 수정된 시점을 의미하는 응답 헤더. 조건부 요청 헤더인 If-Modified-Since 와 묶어 사용
Etag : 데이터의 버전을 의미하는 응답 헤더. 조건부 요청 헤더인 If-None-Match 와 묶어 사용.
조건부 요청 헤더
캐시의 데이터와 서버의 데이터가 동일하다면 재사용하게 해달라는 의미의 요청 헤더
If-Modified-Since : 캐시된 리소스의 Last-Modified 값 이후에 서버 리소스가 수정되었는지 확인, 수정되지 않았다면 캐시된 리소스를 사용
If-None-Match : 캐시된 리소스의 ETag 값과 현재 서버 리소스의 ETag 값이 같은지 확인, 같으면 캐시된 리소스를 사용
불필요한 코드 제거를 의미
{
“presets”: [
[
“@babel/preset-env”,
{
"modules": false
}
]
]
}
{
"name": "tree-shaking",
"version": "1.0.0",
"sideEffects": false
}
// 특정 파일에서는 발생하지 않을 것임을 알릴 때
{
"name": "tree-shaking",
"version": "1.0.0",
"sideEffects": ["./src/components/NoSideEffect.js"]
}
사이트를 검사하여 성능 측정을 할 수 있는 도구
다양한 지표를 이용, 성능 검사 뿐 아니라 개선책도 제공
npm install -g lighthouse
lighthouse <url>
** 모든 옵션 보기 lighthouse --help
Serve images in next-gen formats
Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more.
(WebP 및 AVIF와 같은 이미지 형식은 종종 PNG 또는 JPEG보다 더 나은 압축 기능을 제공하므로 다운로드 속도가 빨라지고 데이터 사용량이 줄어듭니다.)
Reduce unused JavaScript
Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity.
(사용되지 않는 JavaScript를 줄이고 네트워크 작업에 사용되는 바이트를 줄이기 위해 필요할 때까지 스크립트 로드를 연기합니다.)
** React의 경우 SPA이기 때문에, 최초 로딩 시간이 길어짐 > 당장 사용하지 않는 코드를 읽어옴. 코드 스플리트를 적용하면 해당 부분을 해결하고 성능을 향상할 수 있음.
Reduce unused CSS
Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity.
(스타일시트에서 사용되지 않는 규칙을 줄이고 상위 내용에 사용되지 않는 CSS를 연기하여 네트워크 활동에 의해 소비되는 바이트를 줄입니다.)
Efficiently encode images
Optimized images load faster and consume less cellular data.
( 최적화된 이미지는 더 빨리 로드되고 셀룰러 데이터를 덜 소비합니다. )
Eliminate render-blocking resources
Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.
(리소스가 페이지의 첫 번째 그림판을 차단하고 있습니다. 중요한 JS/CSS를 인라인으로 제공하고 중요하지 않은 모든 JS/스타일을 연기하는 것을 고려합니다.)
Avoid an excessive DOM size
A large DOM will increase memory usage, cause longer style calculations, and produce costly layout reflows.
(DOM이 크면 메모리 사용량이 증가하고 스타일 계산이 길어지며 비용이 많이 드는 레이아웃 리플로우가 생성됩니다.)