웹 최적화란?
최고의 웹 성능을 만드는 최적화 조건을 갖추는 것
프론트엔드 최적화
- 스크립트를 병합하여 브라우저의 호출 개수를 줄임
- 스크립트 크기를 최소화해 바이트 자체를 줄임
- 스크립트를 gzip 등으로 압축하여 전달
- WebP 등으로 브라우저 이미지 형식을 최적화
- 이미지 손실, 무손실 압축
- Cache-Control 응답 헤더를 통해 브라우저 캐시를 충실히 사용
- 도메인 수를 줄여 DNS 조회를 최소화
- DNS 정보 미리 읽어오기
- CSS를 HTML 상단에, 자바스크립트를 HTML의 하단에 위치시키기
- 페이지 미리 읽어오기
- 타사 스크립트가 웹 성능을 방해하지 않도록 조정
백엔드 최적화
- DNS 응답이 빨라지도록 서버 증설
- DNS 응답을 빠르게 할 수 있도록 DNS 정보를 최대한 캐싱
- 웹 서버가 있는 데이터 센터와 네트워크 출력/대역폭 증설
- 웹 서버, 웹 어플리케이션 서버의 CPU/RAM 증설
- 프록시 서버를 설정하여 웹 콘텐츠 캐싱
- CDN을 사용해 인터넷상에 콘텐츠 캐싱
- 데이터베이스 정규화로 디스크 I/O 최적화
- 데이터베이스 캐싱으로 응답을 빠르게
- 로드 밸런싱을 통해 가장 성능이 좋은 웹 서버로 요청을 연결
- 웹 어플리케이션 로직을 가볍고 빠르게 개발
프로토콜 최적화
웹 콘텐츠를 더 빠르게 요청하고 응답하도록 프로토콜을 업그레이드하는 과정
브라우저
내비게이션 타이밍 API
참고