1. 속도 체크 방법
1) Pingdom 유료 툴 : 5개 국가 (Eastern US, Western Us, Europe, Eastern Asia, Australia)
2) chrome 개발자도구의 네트워크탭 + Touch VPN 무료 툴 : Unite States, Russian Federation, Canada, France, Germany, Netherlands, Unite Kingdom)
2. 이슈
1) 모바일 접속 시 3~40초 대
2) pingdom 유럽 체크 시 3~40초대 pingdom grade D 67점
3. 현황
1) 개편이 여러번 됐으며, 개발자가 자주 바뀌면서 소스가 지저분함
2) 반응형 웹으로 모바일과 PC 버전이 한 소스파일에 등록되어있음
3) 보이지 않는 부분(PC접속시 mobile 버전, mobile 접속시 PC버전)까지 중복 resource를 가져옴
4) 서버가 국내에 위치(IDC가 따로 존재함)
5) 서버 구조
6) page size가 큰편이며, resources 자체가 많음
4. 대응 내역
1) 1차 대응(네트워크 이슈가 크다고 판단)
2) 2차 대응(메인 개편 후 적용)
$(function(){
$("img.lazy").lazyload({
threshold: 500,
effect : "fadeIn"
});
});
<img class="lazy" data-original="../../img.png" alt="" />
3) 3차 대응
-
파일 사이즈를 감소시키기 위한 대응
-
리소스를 감소 시키기위한 대응
기존 jsp 화면단 소스
<link rel="stylesheet" href="/css/common.css" type="text/css" />
기존 common.css 내부 소스
@charset 'utf-8';
@import url(css/css1.css);
@import url(css/css2.css);
@import url(css/css3.css);
개선한 jsp 화면단 소스
<link rel="stylesheet" href="/css/css1.css" type="text/css" />
<link rel="stylesheet" href="/css/css2.css" type="text/css" />
<link rel="stylesheet" href="/css/css3.css" type="text/css" />
-
javascript 파일 정리
-
안쓰는 javascript 정리 : 리소스 개수는 크게 줄진 않았으며, 속도를 조금 줄여줌
-
비동기 처리가 가능한 javscript 정리 : 2차 대응때 했던 호출순서에 연관없는 javascript 비동기 처리를 늘림
-
javascript 순서 정리
prioriry(우선순위)를 Highest 수준으로 설정
웹브라우저가 HTML 문서를 해석할 때 <script> 태그를 만나면 그 안에 있는 javascript 의 처리가 끝날 때 까지 다른 HTML의 해석을 멈추기 때문에 body 태그 하단에 배치
prioriry(우선순위)를 Mideum 수준으로 설정
prioriry(우선순위)를 Low 수준으로 설정
<script defer type="text/javascript" src="/js/egovframework//common/common.js" ></script>
#top{background:url(../../img/category.png) no-repeat 0 0; text-indent:-99999px; display: inline-block; width:60px; height:50px;}
.top_img1{background-position:0px 0px !important;}
.top_img2{background-position: -60px 0px !important;}
.top_img3{background-position: -120px 0px !important;}
.top_img4{background-position: -180px 0px !important;}
.top_img5{background-position: -240px 0px !important;}
.top_img6{background-position: -300px 0px !important;}
.top_img7{background-position: -360px 0px !important;}
.top_img8{background-position:0px -50px !important;}
.top_img9{background-position: -60px -50px !important;}
.top_img10{background-position: -120px -50px !important;}
.top_img11{background-position: -180px -50px !important;}
.top_img12{background-position: -240px -50px !important;}
.top_img13{background-position: -300px -50px !important;}
.top_img14{background-position: -360px -50px !important;}
<span class="top_img${idx.count }" id="top"></span>
5. 결과
1) 3~40초대에 육박하는 load time을 최소 12초 까지 줄어들었음
2) pingdom grade가 67점 에서 71점으로 올랐으며, D등급에서 C등급으로 상승
3) 페이지 사이즈 : 747.64KB , Requests 수 : 90
6. 마무리
1) 진행한 작업 순서
-
이미지 파일 경량화
-
쿼리확인
-
컨텐츠 줄이기
-
하이브리드앱을 웹뷰로 전환
-
lazyloading 적용
-
http로 request하는 이미지들에 대해 https로 수정
-
javascript중 비동기 처리가 가능 한 부분을 비동기처리
-
이미지 파일 재경량화
-
css 파일 merge
-
css 파일 분리(한 css 파일에 import된 css JSP 화면단으로 분리)
-
덜쓰는 css 파일 merge 후 삭제
-
안쓰는 css 파일 삭제
-
덜쓰는 javscript 파일 merge 후 삭제
-
안쓰는 javascript 삭제
-
DOMContentload 단계에 영향이 있는 script를 <head> 태그 내부로 이동
-
load 단계에 영향이 있는 script를 <body> 태그 내부 제일 마지막 부분으로 이동
-
초기 랜더링에 영향이 없는 script는 defer attribute를 추가
-
메인 페이지에 종속성이 없는 script(광고삽입 코드 등..) async 처리
-
모바일 컨텐츠 줄이기
-
이미지 파일이 위치한 DNS 서버 prefetch 적용
-
css sprite 기법 적용