커지고 있는 웹 애플리케이션에서 성능은 점점 더 중요한 요소가 되고 있습니다. 사용자와의 접점에서 긴밀한 상호작용을 요구하는 프런트엔드, 보다 빠르게 로딩되고 부드럽게 구동되어야 하는 웹 애플리케이션을 만들기 위해 노력하는 분들과 함께 이야기를 나눕니다.
목차
1. 로딩 최적화 방법
2. PWA 케이스 소개
3. 렌더링 최적화 방법
대상
- 프런트엔드 성능 개선을 시작하고 싶은 개발자
- 느린 웹 페이지를 빠르게 만드는 데 관심 있는 프런트엔드 개발자
- 로딩/렌더링 최적화에 대한 힌트를 얻고 싶은 개발자
44. 44 / 73
PWA 사례: BookMyShow
인도 티케팅 회사
https://developers.google.com/web/showcase/2017/bookmyshow
항목 값
월 방문자 5천 만명
앱 사이즈 440KB로 감소
로딩 타임 2.94초 미만
전환율 80% 증가
45. 45 / 73
PWA 사례: MakeMyTrip
인도 여행 회사
https://developers.google.com/web/showcase/2017/make-my-trip
항목 값
월 방문자 8백 만명
로딩 속도 38% 개선
고객 세션 160% 증가
이탈율 20% 감소
46. 46 / 73
브라우저 기준 최적화
• Navigation Timing, Critical Rendering Path
• DOMContentLoaded(JS, CSS), 빠른 로딩 프로그레스바
로딩 최적화 정리
사용자 기준 최적화
• First Meaningful Paint
• 서버사이드 렌더링, 프리 렌더러
PWA 사례로 본 로딩 성능 개선 효과
• BookMyShow, MakeMyTrip