사용자 웹 페이지 로딩 속도 개선

1. 현상

메인 페이지에서 헤더와 풋터가 뜨고 바디가 뜨는데 그 간격이 커서 느리게 뜨는 듯 함. (간극이 한 1.2 ~ 1.7로 복불복..)

2. 목표

최소한의 소스 변경으로 간극을 줄여보자~

3. 분석

> 방법 : 웹 브라우저 개발자도구를 이용해서 분석 (크롬에 있는)

> css파일이 뜨고, 외부 스크립트(다음 맵, 구글 Analytics, 리타겟팅)와, 내부스크립트(jquery, requirejs, angularjs, 우리가 정의한 스크립트들)이 모두 한번에 다 로딩된 뒤 바디가 로딩됨.

4. 문제점

> 스크립트들이 너무 많아~ 99개(service 42개, 기본 library 16개, 내외부 library 41개)

> 스크립트들과 css파일들은 용량이 하나하나 작지만 각 파일에 공백이 차지하는 크기가 무시 못 하겠네~

> 압축을 하면 더 줄 겠네?

> 메인 페이지에서 쓰는 스크립트들 보다 더 많은 스크립트가 로딩되네~

> 이미지도 우리 웹서버에서 요청하네~

> 우리 스크립트들이 로딩되는 중간에 외부 스크립트들이 먼저 로딩되서 실행되네~

5. 이번 사용자 메인 페이지 로딩 속도 개선의 방향

> 공백을 줄이는 minify를 하자~

> 압축을 하자~

> 스크립트를 줄여보자~

6. 방법

> minify : requirejs에서 제공하는 r.js를 이용하여 줄임 (play!framework에서 지원하고 있음)

> 모든 자바스크립트들을 gzip으로 압축 (play!framework에서 지원함)

> 메인 페이지 로딩시 필요한 스크립트 개수를 줄임

>> 공통 library 중에 합칠 수 있는 건 합치기 (내외부 library 41개 -> 18개)

>> lazy loading 기법을 써서 페이지에 필요한 자바스크립트를 로딩하도록 수정

7. 결과

기존 대비 간극이 (1.05 ~ 1.2로 바뀌었음)

기대효과는 드라마틱하게 1초 이내로 떨어질 것으로 기대했으나…

8. 향후 과제

> 아직도 lazy loading을 적용해하는 것들이 있지만 소스 변경 범위가 커서 차츰차츰 적용하는 것으로

> 외부 스크립트들을 메인 서비스 가 뜬 뒤에 로딩하고 동작하도록~

> 이미지들을 파일 서버로~

9. Why Faster Websites Make More Money

Both Amazon and Walmart realized the missed opportunity here and discovered that just a 100 millisecond improvement to their page loading times translated into a 1% increase in sales.