포토앨범성능 개선 사례 공유

N드라이브 품으로포토앨범이 쏘~옥

하지만 두 개의 Full Ajax 서비스의통합으로 인한 개발 부담 증가게다가 빡빡한 일정...

(정싞 없이 달려) 윤곽이 보이는 듯허니 이제 벤치마킹을 해볼까?

QA담당자 왈“구형PC의 IE7에서는 상식적으로인갂이 사용할 수 없을 정도”

성능개선 작업 진행

1. CSS 튜닝2. 스크립트 병목지점 개선3. 지연 로딩

1. CSS 튜닝크롬 CSS Profiler를 사용,쓰이지 않거나 중복된셀렉터 제거

기존대비 32.3% 사이즈 절감프로파일링 성능은 28.5% 향상

구형 PC에서“사람이 사용 못할 수준의 성능”문제에 대해 파악했어요.

CSS Psuedo Selector

인터랙션 반응 속도 75% 개선

2. JS 병목지점 개선DynaTrace를 사용해Hotspot List 분석

초기 로딩 시$Document.clientSize()를여러 번 호출

각 모듈이 초기화 시“WINDOW_RESIZE”메시지를 전달

리사이즈 메시지 호출을 최소화도큐먼트 사이즈는 캐시해 쓰기

또한, 규모가 큰 템플릿의 경우,innerHTML로 세팅

기존대비 30% 병목지점 개선

3. Lazy Loading포토앨범 기능이 페이지 로드 시N드라이브와 함께 로드

포토앨범 아이콘을 클릭 했을때,지연 로딩하도록 변경

템플릿 지연 로딩

[개선 – 2.3초]

[기존 – 2.6초]

Dom / Event 개수 개선

[개선]

[기존]

스크립트 지연 로딩

[개선 – 1.8초]

[기존 – 2.3초]

기존 실 서비스와 비교?최종 25% 성능개선

[통합 후]

[통합전]

크롬 디버거,DynaTrace는 역시 명불허전

감사합니다