[FE 성능 최적화 스터디] - 첫 번째 미팅

2023년 7월 11일 화요일

 

1장 블로그 서비스 최적화

- Lighthouse 툴을 이용한 페이지 검사

- 이미지 사이즈 최적화

- 병목 코드 최적화

- 코드 분할 & 지연 로딩

- 텍스트 압축

 

위 개념에 대해 살펴봤습니다.

 

책을 읽으면서 중간 중간 짚어보면 좋을 포인트와 키워드들을 가지고 이야기를 나눴습니다.

 

이미지 사이즈 최적화에서는 intrinsic (실제 사이즈)하게 그대로 렌더링하면 안되고

 

레티나 디스플레이를 고려하여 render size의 2배 정도로 하면 적당합니다.

 

그리고 병목 코드 최적화에서는 무분별한 반복문 사용을 자제하고 정규 표현식 이용,

 

코드 분할 & 지연 로딩에서는 React의 lazy와 Suspense를 이용한 dynamic import,

 

텍스트 압축에서는 API 서버로부터 response header에 Content-Encoding을 gzip 같은 압축 포맷이나

 

빌드 시 옵션을 설정할 수 있습니다.

 

여러 이야기를 하면서 서로 주고받다 보니 재밌었습니다.

 

다음 주도 기대됩니다!