블로그 서비스 최적화
최적화 기법
- 이미지 사이즈 최적화
- 코드 분할
- 텍스트 압축
- 병목 코드 압축화
크롬 개발자 도구의 Network 패널
현재 웹 페이지에서 발생하는 모든 네트워크 트래픽을 상세하게 알려줌
크롬 개발자 도구의 Performance 패널
웹 페이지가 로드될 때 어떤 자바스크립트 코드가 느린지 확인 가능
크롬 개발자 도구의 Lighthouse 패널
웹사이트의 성능을 측정하고 개선 방향을 제시해 주는 자동화 툴
webpack-bundle-analyze
번들링된 파일이 어떤 코드, 어떤 라이브러리를 담고 있는지 확인 가능
Lighthouse
- Mode
- Navigation : 기본 값으로, 초기 페이지 로딩 시 발생하는 성능 문제 분석
- Timespan : 사용자가 정의한 시간 동안 발생한 성능 문제 분석
- Snapshot : 현재 상태의 성능 문제 분석
- Categories
- Performance : 웹 페이지의 로딩 과정에서 발생하는 성능 문제 분석
- Accessbility : 서비스의 사용자 접근성 문제 분석
- Best practices : 웹사이트의 보안 측면과 웹 개발의 최신 표준에 중점을 두고 분석
- SEO : 검색 엔진에서 얼마나 잘 크롤링 되고 검색 결과에 표시되는 분석
- Progressive Web App : 서비스 워커와 오르파인 동작 등, PWA와 관련된 문제를 분석
- PWA : 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱