Mobile Web _ HTML5 Performance Optimization

Data

Mobile Web _ HTML5 Performance Optimization

RAKU 2012. 3. 14. 16:22

http://velocityconf.com/velocity2011/public/schedule/detail/19976

1. Rediret를 피해라.

2. 간단해야 한다.

현재 xhtml은 무겁다.
18kb, 180dom elements, 145 has class definition, 80% ahs multiple calss defenition

현재 css도 무겁다.
-> HTML5 tag를 최대한 활용 하라.
-> xhtml 대신 <!DOCTYPE html>
-> div 대신 article, section, nav 등 inline속성 적극 활용.
-> class 대신 ->header, footer 사용.

3. WPO 테크닉을 알아라!

gzip 사용, 캐시활용잘하기,
css는 맨위에 위치,
script는 가능한 맨 밑에,
dns 룩업 감소 시키기,
script, css 크기 최소화

but script, css 외부화는 모바일에 적합하지 않다.(인라인화 시켜라)

4. IMAGE 사용 최소화 하라.

img 대신 css3를 최대한 활용

5. Javascript를 파싱하지 마라. 꼭 필요할때만 파싱 하라.

6. Framwork는 잊어라!

jQuery는 무겁다. jQuery Mobile도 마찬가지다.

7. Application cache 사용.

User specific하게 Local storage도 사용하라

8.만약 다른 페이지에서도 사용할 resource라면 inline 하는게 더 빠르다.

외부로 빼거나, Local storage를 사용

9. onclick() 보단 ontouch를 사용하라.

10. Ajax를 사용하라.

HTML5에선 Ajax 보다 더 나은 방법을 제시한다.
server-sent event, web socket