성능 최적화 강의

성능의 종류

1. 로딩 성능

2. 렌더링 성능

Lighthouse

• Opportunities: 로딩 성능과 연관. 리소스의 관점.

• Diagnotics: 렌더링 성능과 연관. 페이지의 실행 관점.

이미지 사이즈 최적화

• 실제 화면에 렌더링되는 사이즈의 2배 크기로 가져오는 것이 좋다. (최신 디스플레이를 고려)
예: 120 x 120이라면, 240 x 240 크기로 가져온다.

CDN

• Content Delivery Network
• 물리적 거리의 한계를 극복하기 위해 사용자와 가까운 곳에 컨텐츠 서버를 두는 기술
• 예: 미국에 있는 서버를 한국으로 복사해 둠

Image CDN

• Image 제공에 특화된 CDN

• 이미지를 사용자에게 보내기 전, 사이즈나 확장자 등을 가공한다.

• imgIX 등

• 대부분의 서비스 회사에서는 자체 이미지 CDN을 구축해서 사용하는 편이다. 클라우드 서비스(S3나 CloudFront 등)을 사용하기도 한다.

 

img 태그의 속성들 (반응형 관련)

• srcset: 각각 다른 환경에서 사용될 이미지 소스를 명시

• sizes: 서로 다른 페이지 레이아웃에 대한 이미지 소스의 크기를 명시

<img srcset="/examples/images/people_960.jpg 960w,
             /examples/images/people_575.jpg 575w"
     sizes="(min-width: 960px) 50vw,
            (min-width: 575px) 75vw,
            100vw"
     src="/examples/images/people_575.jpg" alt="people">

고화질의 이미지 로드 Tip

• 가능하면 PNG 대신 JPG 또는 WEBP로 압축하기

• 이미지 로드 전후에 Layout Shift가 발생하지 않도록 영역 잡아두기

• 이미지 로딩에 대한 UX 적용 (스켈레톤, 로더 등)

Bottlenect 코드

• performance 탭을 분석해서 Bottlenect 코드를 찾아라

• Main 탭 확인하기

• 오래 걸리는 함수가 존재한다

• 효율성 개선하기, 작업하는 양 줄이기

• substring

• replace와 정규표현식의 조합 []

• replace는 원본 문자열을 바꾸지 않는다.

Code Splitting

• Webpack-Bundle-Analyzer cra-bundle-analyzer (라이브러리) 웹팩이 번들링한 파일을 시각적으로 분석해서 보여준다.

• 어떤 모듈이 특정 페이지에서만 사용된다면, 그 페이지에서만 로드하기. 페이지의 로딩 속도를 개선할 수 있다. 페이지 별로 또는 모듈 별로.

• 불필요한 코드 또는 중복되는 코드 없이 적절한 사이즈의 코드를 적절한 타이밍에 로드하는 것.

• 리액트 공식 문서: 코드 분할 Suspense와 lazy 활용

텍스트 압축

• 서버로부터 텍스트를 받을 때 압축해서 받아라. CSS, JS 파일 등 Content-Encoding: GZIP 또는 Deflate

• 서버에서 해줘야 한다. 클라이언트에서는 압축을 해제해서 사용한다.

• 모든 파일을 압축했다 풀면 오히려 성능이 악화될 수 있다. 파일의 크기가 큰 경우에만 압축한다.

• 텍스트 압축 방법 자체는 아주 간단한다.

기타

• 개발 환경과 배포 환경은 성능에 차이가 있다. 성능 측정은 배포 환경에서 하는 것이 필요하다. 배포 환경이 성능이 더 좋은 편이다.

• package-lock.json 사용하고 있는 모듈들의 하위 디펜던시를 보여준다.