-
파일 사이즈를 감소시키기 위한 대응
-
이미지 파일 경량화 : 성과가 잘 나타났고 가장 대응하기 쉬웠음 (https://imagecompressor.com/ko/)
-
쿼리 확인 : 메인 페이지였기 때문에 복잡한 쿼리가 없어 확인 후 수정하지 않음
-
리소스를 감소 시키기위한 대응
-
컨텐츠 정비 : 성과가 잘 나타났으나, 감소시키는데 한계가 있으며, 개발공수가 들어감
-
css나 javscript 소스를 정리하는 방법에 대해서 고민을 했지만 공수가 많이 들고, 공통으로 쓰는게 있어서 불가능하다고 판단
-
모바일 대응
-
하이브리드 앱이였던 서비스를 모바일 웹뷰로 전환 : 속도에 대한 성과가 거의 없었으며, 비용이 많이 나갔음
-
속도 관련 컨설팅 업체 미팅(결국 컨설팅을 받지 않음)
-
Meta****
-
부하테스트를 해본 후 솔루션을 제공할 수 있다고 함
-
네트워크 구간의 테스트는 힘들며 테스트를 한다해도 해결 방안이 없다는 의견
-
****Korea
-
내부 보안 장비에 대한 이슈 테스트(느려지는 구간 파악 후 서버의 설정을 바꾸는 의견제시)
-
TTFB(브라우져가 요청 후 첫 바이트를 수신할때 까지의 시간)테스트 : 쿼리 성능 및 웹서버 성능에 대한 이슈 검토
-
정적인 컨텐츠를 웹서버에서 분리 하는것 권장(IDC 영역)
-
사용자 접속 지역에 따라 가장 가까운 캐싱 서버를 이용하도록 권장(비용이 들어감)
-
동적캐싱(홀사이트 캐싱) 권장 (개발공수가 들어감)
-
통신사에 라우팅 구간에 대한 검토를 요청(비협조적)
-
리소스를 감소 시키기위한 대응
-
lazy loading 적용
-
JSP 화면단 <head>태그에 jquery.lazyload.min.js 임포트
-
공통으로 사용하는 javascript에 lazyloading 설정
-
JSP 화면단에서 img 태그의 class 추가 및 src 대신 data-original로 변경
-
이슈 사항 : img 태그를 감싸고있는 상위 element의 속성이 style= "display:none;" 에 대한 부분을 컨트롤 하지 못함
-
http로 request하는 이미지들에 대해 https로 수정
-
서비스가 ssl이 적용이 되어있어 소스 내부에 있는 이미지들을 http로 request 할 경우 https로 재 request를 하여 두번 호출하는 경우가 생김
-
javascript중 비동기 처리가 가능 한 부분을 비동기처리
-
호출 순서에 연관이 없는 javscript에 대해 비동기 처리
-
파일 사이즈를 감소시키기 위한 대응
-
이미지 파일 경량화 : 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)
-
안쓰는 css 정리 및 css 파일 하나로 merge
-
23개의 css파일을 → 4개로 줄임(리소스개수가 확 줄었고, pingdom grade도 증가했으며, 속도를 극적으로 줄여줌)
-
javascript 파일 정리
-
안쓰는 javascript 정리 : 리소스 개수는 크게 줄진 않았으며, 속도를 조금 줄여줌
-
비동기 처리가 가능한 javscript 정리 : 2차 대응때 했던 호출순서에 연관없는 javascript 비동기 처리를 늘림
-
javascript 순서 정리
-
DOMContentload 단계에 영향이 있는 script를 <head> 태그 내부로 이동
-
load 단계에 영향이 있는 script를 <body> 태그 내부 제일 마지막 부분으로 이동
-
초기 랜더링에 영향이 없는 script는 defer attribute를 추가
-
메인 페이지에 종속성이 없는 script(광고삽입 코드 등..) async 처리
-
모바일 컨텐츠 줄이기
-
호출하는 이미지 갯수를 감소시킴(속도에 영향이 거의 없었음)
-
네트워크 연결 관련 설정 추가
-
이미지 파일이 위치한 DNS 서버 prefetch 적용 (이미지 서버에서 모든 이미지마다 이미지서버의 dns lookup을 하는데 그 시간을 단축)
-
JSP 화면단 <head>태그에 미리 dns 서버의 정보를 심어둠
-
css sprite 기법 적용
-
같은 사이즈의 연속되는 심볼 이미지 파일을 하나의 png 파일로 묶은 후 이미지 경량화 및 css 수정
-
css 파일
-
JSP 화면단
-
이미지 파일 경량화
-
쿼리확인
-
컨텐츠 줄이기
-
하이브리드앱을 웹뷰로 전환
-
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 기법 적용
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 |