웹 사이트 혹은 애플리케이션에서 가장 코스트가 높은 것은 물론 서버와 요청을 주고 받을 때이다. 무엇을 하던 내부에서 처리하는 작업보다는 외부와 통신하는 작업이 비용이 높다. 서버에 대한 리소스 요청을 최적화하는 작업은 프론트엔드 성능 측면에서도 중요하지만 서버 측의 부담을 감소시켜줄 수 있다는 점에서도 신경써줘야 하는 부분이다. 리소스 요청을 최적화하는 방법에는 두 가지가 있다. 하나는 요청하는 리소스의 크기를 줄이는 것이고 하나는 리소스 요청 횟수 자체를 줄이는 것이다.
1. 리소스 용량 줄이기
(1) 트리 쉐이킹 : 트리 쉐이킹은 외부 모듈을 import할 때 필요한 기능만을 가져오는 것을 의미한다.
(2) 불필요한 코드 제거하기 (ex. 주석)
(3) Minify, Uglify 등을 통해 번들링 과정에서 파일 용량을 최소화한다.
(4) CSS를 작성할 때 공통 스타일은 클래스로 추출해내자.
(5) 환경에 따라 적합한 품질의 미디어 파일을 가져온다. (예를 들어서 모바일 화면에서는 상대적으로 낮은 퀄리티의 이미지를, 데스크탑 화면에서는 높은 퀄리티의 이미지를 요청한다.)
(6) 이미지 파일 최적화를 수행한다.
- 원본이 애니메이션이 아니라면(정적 이미지) GIF를 PNG로 변환
- 애니메이션 이미지의 경우 video element를 사용하면 압축률을 높일 수 있다.
- GIF와 PNG 모두 픽셀이 불투명하다면 알파 채널을 삭제한다.
- GIF와 PNG는 무손실 형식이기 때문에 압축해도 시각적으로 변화가 없지만 JPEG는 손실 형식이기 때문에 압축시 시각적 손실이 일어날 수 있다. 대신 압축 효과는 JPEG가 더 뛰어나다.
2. 리소스 요청 횟수 줄이기
(1) 이미지 스프라이트 : 이미지가 여러 개 사용되는 웹 서비스에서 각 이미지를 따로 서버에 요청하는 것이 아니라 여러 이미지를 하나의 이미지 파일로 합친 후 한 번의 요청 작업으로 그를 가져오는 방법을 말한다. 가져온 이미지는 background-position 속성을 통해 필요한 부분만 활용한다. (관련 링크)
(2) 이미지 지연 로딩 : 커머스와 같이 여러 컨텐츠를 제공해야 하는 웹 서비스에서 한 번에 모든 이미지 파일을 로드하는 것은 매우 비효율적이다. Intersection Observer API를 통해 화면에 보이지 않는 이미지들은 요청하지 않고 실제로 필요한, 화면에 보여지는 이미지만을 로딩하는 lazy-loading 기법을 구현할 수 있다.
(3) 모듈 번들러로 css, js 파일을 번들링한다.
(4) 웹캐시를 통해 정적 자원의 요청 횟수 최소화한다.
'잡다한 교훈' 카테고리의 다른 글
| [Network] 웹 캐시로 트래픽 부담 줄이기 (0) | 2022.04.20 |
|---|---|
| PWA (Progessive Web APP) (0) | 2022.04.18 |
| [React] Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering. (React Video Problems) (0) | 2022.04.17 |
| [@testing-library] TypeError : (0 , _reactTestRenderer.act) is not a function (0) | 2022.04.15 |
| [Heroku] Heroku 배포 이후 request.session이 제대로 저장되지 않을 때 (0) | 2022.04.08 |