압축
- gzip 압축(70% 작아짐)
- 아니면 brotli 압축 사용
이미지포맷
- Jpeg, png 보다는 webp를 사용
- gif이미지도 webp나 mp4로 변환
- 영상을 압축하는 오픈소스도 확인 AOMedia Video 1(AV1)
http 버전
- http v1
- 요청시 한번에 파일을 1~6개만 가져올 수 있음
- 차례로 웹페이지 구성파일을 요청하게 됨
- http v2
- 1개의 tcp연결로 수 많은 파일들을 가져올 수 있음
- 예전에는 이미지 파일 몇 개를 하나의 파일로 묶어서 보냈었다면 이제는 그럴 필요가 없어짐
- http v3
- tcp 말고 udp로 전송
- tcp 특유의 Blocking 문제가 없어짐 TCP Socket - Blocking / Non-Blocking
- 모바일 환경에서도 매우 빠르게 연결됨(유저 IP가 변경되어도 연결유지)
티니핑
- 지연시간 줄이기 -> CDN(Content Delivery Network)
DB 안쓰기
- 병목현상 발생(지연발생원인)
- 데이터 입출력 횟수 증가
- 테이블이 lock이 걸리는 경우
- 대응방안?
- scale up
- scale out
- 아니면 캐싱을 사용
- 메모리 데이터베이스(redis)
번들링
- 필요한 코드만 골라냄
캐시컨트롤
- 캐싱을 몇일 동안 할지(서버설정)
- cache-control: max-age=3600
마지막 수정일
- Last-Modified: 2024.1.1
- 캐싱기간이 지난경우 서버에 Last-Modified 정보를 제공
- 서버에서는 변동내용이 있을 경우 새 파일을 전송
- 또는 304 응답을 보냄(수정된게없음)
14KB
- 웹페이지 크기를 14KB이하로 줄이면 1회 수신만에 로드 가능
prefetch
- 프리페치는 사용자가 가까운 미래에 탐색할 가능성이 '있는' 페이지에 대해 백그라운드에서 리소스를 추론적으로 가져오는 방식을 의미
- Next.js에는 prefetch 기능이 내장되어 있는데, 어떤 페이지로 이동하는 링크에 커서를 올린 순간 해당 페이지를 미리 가져오는 기능
- 프리페치 (Prefetch)