진단 기준
1. Lazy loading 적용
- 스크롤 없이 볼 수 있는 콘텐츠에 이미지가 우선적으로 적용되도록 Lazy loading이 적절히 적용되었는가?
2. 렌더링 차단 리소스 제어
- 스크롤 없이 볼 수 있는 콘텐츠에 영향을 미치는 css, javascript 파일이 먼저 로드 되도록 하였는가?
3. HTML 코드 검토
- 사용하지 않는 Html 태그가 있는지 확인 하였는가?
4. CSS 코드검토
- 불필요한 CSS 파일이 포함되어 있는지 확인하였는가? CSS 파일 내 스타일 시트에서 사용하지 않는 Style 규칙을 제거하였는가?
5. 자바스크립트 코드 검토
- 화면과 관계 없는 불필요한 JavaScript 파일이나 함수가 포함되어 있지 않는지 확인하였는가?
6. 자바스크립트축소
- JavaScript 파일을 축소하여 페이로드 크기와 스크립트 구문 분석 시간이 줄어들도록 하였는가?
7. 이미지사이즈크기
- 이미지 파일이 실제 화면 요소의 크기에 적합한 가로X세로 사이즈로 만들어졌는가?
8. 최적화 이미지 생성
- 이미지는 화질에 큰 영향을 주지 않는 범위에서 최적화한 이미지로 생성하였는가?
9. 이미지파일 적합성
- PC와 모바일용으로 분리된 이미지가 각각의 용도로 정확히 사용되었는가?
10. 이미지 Sprites 적용 (Photoshop으로 만든 정육면체 설계도 같이 생긴 이미지를 의미하는 건가?)
- 경량 이미지를 합쳐서 Http request요청을 감소하도록 하였는가?
11. Merge file
- CSS파일과 javascript 파일을 너무 나누어 Http request를 과도하게 요청하게 하지는 않는가?
12. Reflow & Repaint 감소
- 동적으로 요소를 그리거나(Reflow 발생) 요소의 크기를 변경하는 작업(Repaint 발생)을 최소화하였는가?
13. CSS Selector 지정
- CSS 선택자가 적절히 선언되어 있는가?
(브라우저는 제일 오른쪽 선택자를 기준으로 왼쪽으로 일치하는지 탐색, 적절한 class나 ID를 부여하여 불필요한 코드량을 감소시켜야함)
14. DOM Caching 적용
- Node 접근이 반복될 경우 접근을 최소화하기 위해 DOM Caching을 사용하였는가?
(예) var el = document.getElementById(‘id’);
15. 반복스타일 반영
- 요소 스타일 설정과 설정 정보를 동시에 가져오는 반복 구문이 없는가?
(예) for( var i=0;.... ) { object[i].style.left = object[i].offsetLeft + 10 + ‘px’; }
16. 네비게이션 확인
- 적절한 네비게이션이 구현 되어 있는가? 모든 네비게이션에 대한 고객 검토를 받았는가?
17. 뒤로가기 확인
- App의 Device back key와 Web의 뒤로가기 동작에 대한 고려가 되었는가?
초기로딩 튜닝
1. 초기 다운로드 사이즈 축소 - 불필요한 소스 삭제( html, js, css ) - 파일 압축(Minify)- 적절한 이미지 활용
2. 캐쉬 활용 - gzip 적용 (서버사이드적용)
3. CDN 활용 (해외에서도 사용할 경우)
4. 상황에 맞는 이미지 이용
5. 브라우저의 개발도구 중 Network 항목으로 모니터링 가능
DOM 구성 / 화면 Render 관련 성능 튜닝
1. Tag 내 Inner style 사용 지양
2. 불필요한 Css 요소 제거
3. 동적 DOM 생성 지양
4. 위치와 화면사이즈에 영향을 미치는 요소가 발생하는 경우 브라우저는 전체화면을 다시 그림 (repaint)
5. 브라우저별로 DOM 구성방식과 Render 방식이다름
6. 브라우저의 개발도구 중 Performance항목으로 모니터링 가능
개발 주의사항
1. 시간이 오래 걸리는 작업은 비동기 방식 처리 이용
2. 화면내 Node(DOM) 접근 최소화, 가능한 호출을 최소화하도록 한다.
(Ex) 여러번 사용하는 Node는 변수에 할당, 반복 호출 Object Property에 대한 변수 할당
3. 불필요한 변수 선언 제거
4. 최초 로딩에 필요한 javascript 파일만 미리 선언, 화면 오픈시 최대한 대기 시간을 줄이기 위해 당장 필요하지 않은 js파일은 뒤에서inclued시킨다.
5. 객체/ 배열 선언 시 new 제거 (생성자 방식은 불필요한 동작을 야기시킨다)
(ex) BAD: arr = new Array(); obj = new Object();
(ex) GOOD : arr = []; obj = {};
6. 배열 등록은 직접 대입 방식
(ex) BAD : arr.push(i)
(ex) GOOD : arr[i] = value
7. For 구문 사용시 반복 횟수 미리 구하기
(ex) BAD : for( var i=0; i< arr.length; i++ )
(ex) GOOD : for( var i=0, len = arr.length; i<len; i++ )
8. 반복 구문 내 선언 피하기( var, function 는 사전에 선언하여 호출하도록 한다.)
(ex) BAD : for ( ){ var a =“” ... }
9. 반복문 내 append 피하기
10. 객체 호출 시 방식 이용하기
(ex) BAD : aaa[“param”]
(ex) GOOD : aaa.param
11. 적절한 메모리 관리 (GC가 일어날 때 브라우저는 속도 감소)
성능 최적화
화면 컨텐츠는 일반적으로 브라우저가 처리하는 순서대로 화면에 표출됨.
모바일에서는 사용자 입장의 컨텐츠 조회시간으로 속도를 체감함.
모바일에서는 체감 속도를 높일 수 있는 순서대로 개발 필요
Lazy Loading 적용 권고함
이미지 사이즈를 최적화하여 데이터낭비와 Painting시 자원불필요한 작업을 줄여야 함
최근댓글