[Front-end] HTML5를 활용한 성능 개선

성능이란 무엇인가?

*The RAIL Performance Model

RAIL.png

오늘은 Loading에 대해서만 이야기 합니다.

*로딩 과정의 이해

loading.png

*Connect/Request/Response [자원 요청에 대한 과정]

rr.png

-Stalled : Browser waiting
-TTFB : Server Time

*Waterfall Chart

waterfall


 

*Front End 성능 개선이란?
== Waterfall Chart를 어떻게 개선할 것인가?

1.요청수 최소화 하기
== Waterfall Chart의 높이 줄이기

자원의 Merge
   1. JS, CSS의 Merge : Grunt, gulp와 같은 자동화 퉆을 이용한 자동 merge
2. IMAGE의 Merge[CSS Sprite]

sprite

불필요한 자원의 제거

자원의 재사용( Cache) < LocalStorage 이용 : 클라이언트의 Database를 이용하여 Request수를 줄인다.
_!브라우저 캐쉬를 사용하면 안되는가? : 안된다! 왜냐하면, 브라우저 캐시는 제한이 있다. 제한을 초과한 경우, 기존 캐싱 자원이 삭제된다. 또한 LocalStorage는 빠르다. 예를 들어, 스마트 폰의 경우 최대 5배까지 Native Cacher 보다 빠르다.

local.png

_ JS,CSS의 LocalStorage를 이용한 캐싱 : 자주 변경이 되지 않는 파일에 대해서는 LocalStorage를 이용해 확실하게 캐싱되도록 처리
_ LocalStorage Flow Chart

flowchart
_ LocalStorage 캐싱을 지원하는 오픈 소스 : basket.js

초기 로딩 속도에 필요 없는 자원 나중에 로딩

 

2. 요청 크기 최소화 하기
== Waterfall Chart의 폭 줄이기
== HTTP Request 양 줄이기

자원의 크기를 최소화
_1. Minify와 Obfuscation : 주석제거,공백제거 / 변수명 난독화 , Grunt, gulp와 같은 자동화 툴을 이용한 HTML, CSS minified와 JS minified, obfuscation
_2. 이미지 크기 줄이기 : 이미지의 크기를 결정하는 요인[포맷 / 사이즈] 줄이기
_2-1. 이미지 포맷 기준

imageformat
_2-2. 이미지 사이즈 산출 = Pixel 수(width * height) * 표현할 수 있는 컬러 수
_! 고해상도 (레티나) 대응을 위해, 실제 표현하는 사이즈보다 2배 이상으로 사이즈 조정
_3. HTML5를 이용한 반응형 이미지

srcsstpicture

HTTP Request Header 줄이기

Gzip compress

 

3. 렌더링 줄이기
== Waterfall Chart 간격 줄이기

-브라우저 렌더링 과정 : TTFB[Time To First Bytes] 이후, 병렬로 렌더링 한다.

rendering

-자원의 위치에 따른 렌더링
HTML.png_A : head 안의 모든 자원 로딩 후 body 파싱. First Paint Time을 결정한다.
_B : 병렬 렌더링 불가 : 스크립트는 다양한 작업을 수행하는 코드로 이루어져 있고, DOM을 변경하는 작업들이 포함되어 있을 수 있기 때문에, 블록 된다.
b1
_! HTML5를 이용한 스크립트 로딩
_B-1. defer를 이용 : HTML 파싱이 완료된 이후에, 스크립트를 실행
defer

_B-2. async를 이용 : 스크립트를 실행할 때만, HTML 파싱이 중단
async = false일 경우, 순서 보장 (기본값은 true)async
_B-3. defer와 async의 적절한 사용 : DOM 제어와 관련이 있는 스크립트는 defer / DOM 제어와 관련이 없고, 의존성이 없는 스크립트는 async
da
_C : body 렌더링이 완료된 이후

-적절한 자원의 위치 선정
_1. 시각적으로 빠른 화면을 제공하기 위해, head에는 레이아웃 구성에 꼭 필요한 CSS FILE만 넣는다.
_2. body 태그 안에는 CSS나 Script를 넣지 않는다.
_! 전체 렌더링이 잠시 중단된다.
_3. Script는 body 태그 닫기 전에 넣는다.

 

4. 결론
*Front End 성능 개선이란?
==Waterfall Chart를 어떻게 개선할 것인가?

conclusion.png

 


 

출처: HTML5를 활용한 Front-End 성능 개선

회사의 홈페이지를 만들다가 고해상도의 이미지들 때문에 로딩하는 시간이 길어졌다. 앞으로를 위해서도 해결방법을 알아야 할 것 같아서 찾던 중에 이 자료를 공부하게 되었다. 이제 2개월.  공부에는 끝이 없다는 사실을 다시금 깨닫는다.

지금 당장 적용할 수 있는 건 Image를 sprite 형식으로 쪼개서 사용하는 방법.
규모가 큰 프로젝트 일 경우 css/js를 minimize 할 것.
적용하기 위해 더 공부가 필요한 부분은 LocalStorage,  캐싱, 파싱 …

Advertisements