서비스 해외 접속 시 속도관련이슈 대응 내역

2020. 2. 4. 15:23

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차 대응(네트워크 이슈가 크다고 판단)

파일 사이즈를 감소시키기 위한 대응

이미지 파일 경량화 : 성과가 잘 나타났고 가장 대응하기 쉬웠음 (https://imagecompressor.com/ko/)
쿼리 확인 : 메인 페이지였기 때문에 복잡한 쿼리가 없어 확인 후 수정하지 않음

리소스를 감소 시키기위한 대응

컨텐츠 정비 : 성과가 잘 나타났으나, 감소시키는데 한계가 있으며, 개발공수가 들어감
css나 javscript 소스를 정리하는 방법에 대해서 고민을 했지만 공수가 많이 들고, 공통으로 쓰는게 있어서 불가능하다고 판단

모바일 대응

하이브리드 앱이였던 서비스를 모바일 웹뷰로 전환 : 속도에 대한 성과가 거의 없었으며, 비용이 많이 나갔음

속도 관련 컨설팅 업체 미팅(결국 컨설팅을 받지 않음)

Meta****

부하테스트를 해본 후 솔루션을 제공할 수 있다고 함
네트워크 구간의 테스트는 힘들며 테스트를 한다해도 해결 방안이 없다는 의견

****Korea

내부 보안 장비에 대한 이슈 테스트(느려지는 구간 파악 후 서버의 설정을 바꾸는 의견제시)
TTFB(브라우져가 요청 후 첫 바이트를 수신할때 까지의 시간)테스트 : 쿼리 성능 및 웹서버 성능에 대한 이슈 검토
정적인 컨텐츠를 웹서버에서 분리 하는것 권장(IDC 영역)
사용자 접속 지역에 따라 가장 가까운 캐싱 서버를 이용하도록 권장(비용이 들어감)
동적캐싱(홀사이트 캐싱) 권장 (개발공수가 들어감)
통신사에 라우팅 구간에 대한 검토를 요청(비협조적)

2) 2차 대응(메인 개편 후 적용)

리소스를 감소 시키기위한 대응

lazy loading 적용

JSP 화면단 <head>태그에 jquery.lazyload.min.js 임포트
공통으로 사용하는 javascript에 lazyloading 설정

$(function(){

$("img.lazy").lazyload({

threshold: 500,

effect : "fadeIn"

});

JSP 화면단에서 img 태그의 class 추가 및 src 대신 data-original로 변경

이슈 사항 : img 태그를 감싸고있는 상위 element의 속성이 style= "display:none;" 에 대한 부분을 컨트롤 하지 못함

http로 request하는 이미지들에 대해 https로 수정

서비스가 ssl이 적용이 되어있어 소스 내부에 있는 이미지들을 http로 request 할 경우 https로 재 request를 하여 두번 호출하는 경우가 생김

javascript중 비동기 처리가 가능 한 부분을 비동기처리

호출 순서에 연관이 없는 javscript에 대해 비동기 처리

3) 3차 대응

파일 사이즈를 감소시키기 위한 대응

이미지 파일 경량화 : 1차 대응 때와는 다르게 성과가 없었음 (https://imagecompressor.com/ko/)
컨텐츠를 줄일 수 없는 상황이였으며, 리소스를 감소시킬 수 있는 방안에 대해 모색하여야 했음

리소스를 감소 시키기위한 대응

사용하는 css와 javscript 소스를 판단하는 방법을 찾음

chrome의 개발자도구 → ctrl + shift + p >show coverage 입력 coverage탭에서 ● 버튼 클릭
사용중/미사용중인 javascript와 css가 표시됨(소스단위로 까지 볼수 있음)

css 파일 정리

css 분리 : 한 css 파일에 import 하는 방식이 페이지 속도에 영향을 줄 가능성이 있음 (http://egloos.zum.com/seye2/v/2319809)

기존 jsp 화면단 소스

기존 common.css 내부 소스

@charset 'utf-8';

@import url(css/css1.css);

@import url(css/css2.css);

@import url(css/css3.css);

개선한 jsp 화면단 소스

안쓰는 css 정리 및 css 파일 하나로 merge

23개의 css파일을 → 4개로 줄임(리소스개수가 확 줄었고, pingdom grade도 증가했으며, 속도를 극적으로 줄여줌)

javascript 파일 정리

안쓰는 javascript 정리 : 리소스 개수는 크게 줄진 않았으며, 속도를 조금 줄여줌
비동기 처리가 가능한 javscript 정리 : 2차 대응때 했던 호출순서에 연관없는 javascript 비동기 처리를 늘림
javascript 순서 정리

DOMContentload 단계에 영향이 있는 script를 <head> 태그 내부로 이동

prioriry(우선순위)를 Highest 수준으로 설정

load 단계에 영향이 있는 script를 <body> 태그 내부 제일 마지막 부분으로 이동

웹브라우저가 HTML 문서를 해석할 때 <script> 태그를 만나면 그 안에 있는 javascript 의 처리가 끝날 때 까지 다른 HTML의 해석을 멈추기 때문에 body 태그 하단에 배치

prioriry(우선순위)를 Mideum 수준으로 설정

초기 랜더링에 영향이 없는 script는 defer attribute를 추가

prioriry(우선순위)를 Low 수준으로 설정

메인 페이지에 종속성이 없는 script(광고삽입 코드 등..) async 처리

모바일 컨텐츠 줄이기

호출하는 이미지 갯수를 감소시킴(속도에 영향이 거의 없었음)

네트워크 연결 관련 설정 추가

이미지 파일이 위치한 DNS 서버 prefetch 적용 (이미지 서버에서 모든 이미지마다 이미지서버의 dns lookup을 하는데 그 시간을 단축)
JSP 화면단 <head>태그에 미리 dns 서버의 정보를 심어둠

css sprite 기법 적용

같은 사이즈의 연속되는 심볼 이미지 파일을 하나의 png 파일로 묶은 후 이미지 경량화 및 css 수정

css 파일

#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;}

JSP 화면단

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 기법 적용

2) 네트워크 이슈는 배제할수 없으나 소스상에서 줄일 수 있는 부분은 최대한 줄여보는것을 추천

7. 추가 대응

jstl 태그 c:if 또는 c:forEach 등의 사용으로 무분별한 개행처리가 되어 메인 페이지의 소스를 3만줄 이상 road함

개행처리에 대해 소스 수정

속도 이슈에 긍정적인 효과가 꽤 컸음

'개발의 흔적 > etcetera' 카테고리의 다른 글

메일 서버의 특정 도메인 스팸 처리 이슈 (0)	2024.02.23
구글 메일 서버의 메일 수신 시 도메인 인증(SPF, DKIM, DMARC) gmail로 메일이 발송이 안되는 이슈 (0)	2024.02.23
[오류] org.springframework.restdocs.snippet.SnippetException: The following parts of the payload were not documented: (0)	2023.09.01
HTTP 에러 코드 (0)	2018.06.22
톰켓 인코딩 문제 (한글깨짐) (0)	2016.01.21

개발자, 일상의 흔적

서비스 해외 접속 시 속도관련이슈 대응 내역

'개발의 흔적 > etcetera' 카테고리의 다른 글

+ Recent posts

티스토리툴바