웹 페이지 로드 최적화
(1) 브라우저 상에서 최적화
- HTML, CSS 파싱할 때, js를 만나게 되면 파싱을 중단하고, js 파일을 파싱한 후에 마저 진행 됨 (블록 차단 리소스)
# 방지하려면?
- CSS의 경우 <head> 태그 안에 import 해야 하며, <script> 태그로 실행되는 js는 <body> 맨 하단에 위치
- CSS의 경우 media 속성으로 어떤 단말기 유형인지에 따라 해당 CSS를 적용할지를 명시하면 불필요한 블로킹 방지 가능
- JS의 경우 defer, async 속성을 사용하여 비동기로 다운로드 하도록 명시
- link 요소의 rel 속성의 preload 사용하여 css 먼저 로드
- <noscript>는 JS 사용이 불가능해도 style 로드할 수 있게 함
(2) 리소스 용량 최적화
- 리소스 용량을 줄임으로써, 리소스 다운로드 시간 최적화
# js 최적화
- 트리 쉐이킹: 외부 모듈에서 필요한 기능만을 import 하는 것
- tab 사이즈는 2 spaces 권장
- 압축으로 용량 최소화
# css 최적화
- 간결한 셀렉터 사용
- 공통 스타일은 class로 정의하여 사용
# 이미지, 미디어, 폰트 최적화
- 이미지의 경우 png보다 jpg, jpeg의 크기가 더 작으므로 사용
- 애니메이션이 적용된 경우 gif보다 video 태그로 mp4 파일 사용
- 폰트는 preload 속성 권장
- 이미지 스프라이트: 각각의 이미지 파일을 서버로 요청하는 것보다 이미지를 하나로 묶어
한 번의 리소스 요청을 통해 가져와 background-position 속성으로 원하는 부분만
표시하는 기법
- 이미지 지연로딩: 사용자 화면에 보이는 이미지만 요청하고, 사용자가 스크롤을 내려
다른 이미지가 보여야 할 때 이미지를 요청
# 모듈 번들러로 css, js 번들링
- webpack 같은 모듈 번들러로 여러개의 js 파일을 하나의 파일로 번들링
웹 페이지 렌더링 최적화
- 레이아웃 과정은 각 요소들의 화면 상 실제 위치를 계산하는 작업이기 때문에 비용이 큼
- 따라서 레이아웃을 최대한 빠르고 적게 발생시켜야 함
# 상위 DOM 요소보다 하위 DOM 요소 사용
- 상위 DOM 요소를 변경하면 하위 DOM 요소에도 영향을 미치기 쉬우므로, 가급적 하위 DOM 요소를 변경
# display: none 속성 활용
- display 속성이 none인 경우에는 렌더링 트리에 포함되지 않음
# 애니메이션 요소는 position을 고정
- 애니메이션이 걸린 요소는 다른 요소에 영향을 미칠 수 있으므로 position을 absolute나 fixed로 고정
'FrontEnd' 카테고리의 다른 글
| React.js - useEffect 훅 (1) | 2023.10.29 |
|---|---|
| NestJS - Query Params로 배열 받기(DTO 사용) (0) | 2023.08.10 |
| NextJS - 클라이언트 사이드에서 쿠키 저장 (0) | 2023.08.06 |
| Sass(Scss) (0) | 2023.01.06 |
| React Native (0) | 2023.01.06 |