- LCP (Largest Contentful Paint) : 로딩 성능 측정
- FID(First Input Delay, 최초 입력 지연) : 상호작용 측정.
- CLS(Cumulative Layout Shift, 누적 레이아웃 쉬프트) : 시각적 안정성 측정.
- Layout shift는 뒤늦게 로드되는 소스로 인하여 화면에서 봤을 때 UI가 밀리는 현상이다.
- js, html은 기본적 최적화는 webpack 에서 production 모드에 자동으로 적용된다.
- 리소스를 gzip으로 압축함으로써 파일 크기를 감소시킬 수 있다.
- 웹팩에서 미리 압축하는 방법과 nginx와 같은 웹서버에서 압축하는 방법이 있다.
- Content-Encoding (엔티티 헤더필드)
- 엔티티 헤더필트는 request 메시지와 response 메시지에 포함된 엔티티에 사용되는 헤더이다.
- 콘텐츠 갱신기간과 같은 엔티티에 관한 정보를 포함한다.
- Content-Encoding 헤더 필드는 서버가 엔티티 바디에 대해서 실시한 콘텐츠 인코딩 형식을 클라이언트에 전달한다.
- Accept-Encoding(리퀘스트 헤더 필드)
- 리퀘스트 헤더필드는 클라이언트 측에서 서버 측으로 송신된 리퀘스트 메시지에 사용되는 헤더이다.
- 리퀘스트의 부가적 정보와 클라이언트 정보, 리스폰스 콘텐츠에 관한 우선순위 등을 부가한다.
- Accept-Encoding 헤더 필드는 브라우저가 처리 할 수 있는 콘텐츠 인코딩과 콘텐츠 인코딩의 상대적 우선순위를 전달하기 위해 사용한다.
- 웹서버에서 클라이언트에 텍스트 데이터(Html,js,css)를 전달 할 때 텍스트 데이터를 gzip 등의 콘텐츠 인코딩을 통해 압축한 후 전송하면 속도가 빨라지고 트래픽량이 줄어든다!
- 서버에서 텍스트 데이터를 압축 후 전송하고, 클라이언트 브라우저가 압축을 풀어 사용한다.
- gzip은 파일 압축 및 압축 해제에 사용되는 파일 형식이다.
- 파일 크기를 더 작게 만들어 더 빠른 네트워크 전송을 가능하게 하는 Deflate 알고리즘을 기반으로 한다.
- 리액트에서 페이지별로 코드 스플릿팅을 하여, 해당 페이지에서 필요한 스크립트만 불러올 수 있다.
- React.lazy 를 사용하여 적용 할 수 있다.
- 브라우저의 http 캐시를 설정 할 수 있다.
- 이를 설정하려면 웹서버에서 보내주는 리소스 응답 헤더에 cache-control 헤더를 설정해야한다.
- 렌더링 최적화를 적용한다.
- 업데이트 되지 않는 컴포넌트 대해서는 메모이제이션을 통해서 새로 렌더링되지 않게 해줄 수 있다.
- position 이동 ->. Transform 으로 수정하기