웹 사이트 퍼포먼스 증가시키기JDLab, IUEditor Team

S, IUEditor 리드 프로그래머

Site 분석하는 도구들• Google PageSpeed Insight• https://developers.google.com/speed/pagespeed/insights/

• GtMetrics• https://gtmetrix.com/

• Pingdom• https://tools.pingdom.com/

• Etc.• https://www.iispeed.com/pagespeed/test

Script• Remove Render-Blocking JavaScript• https://developers.google.com/speed/docs/insights/BlockingJS#

InlineJS• CSS 를 JS 보다 앞라인에 위치하게 함 .• Script 의 경우 HTML 5 에서 옵션 제공• None • Async• Defer

Script async / defer• <script>

• <script async>

• <script defer>

• Defer 는 Execution Order 가 명확함 . 속도는 Async 가 가장 빠름 .• 자세한 것은 ?

http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

Guarantee excution order

raw / defer

<script>

<script defer> CSS file 은 JS 파일보다 먼저 선언

Critical rendering path : 조금씩 그리기

웹 개발을 세 배 빠르게 해주는 IUEditor 는다음 회사에서 사용하고 있습니다 .

광고 하나 넣고

• IUEditor 2.0

• 그냥 쓰세요 . www.iueditor.org

• 용도 : 웹 사이트 개발 / 이메일용 웹 개발 편집 / TV GUI 개발

Server - caching• Meta data 추가• Cache-control, Expires• Etag : validation token

•  Last-Modified or ETag headers

Server - compression

4/6 files gzip

이미지 최적화 ( size, compression, 파일 포맷 )

• Ref : https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization#image-optimization-checklist

Tool Description

gifsicle create and optimize GIF images

jpegtran optimize JPEG images

optipng lossless PNG optimization

pngquant lossy PNG optimization

Image : img 태그에는 width/height 를 반드시 넣기

압축 / 캐쉬 사용 – cloud front- CloudFront encoding 설정- 각 파일에 meta tag 설정

- CloudFront meta tag 설정- 각 파일에 meta tag 설정

javascript 문제 찾기다음 버전에 defer 를 옵션으로 추가 혹은 옵션 변경없이 defer 로 변경 예정

jQuery 에 의존성이 있다면 defer 처리를 하거나 jQuery check routine 을 넣어야함

css : GZIP 과 파일 압축한개의 파일로 합칠예정

- page Speed 제안 -> cssfile 을 한번에 보내주는 옵션이 있음

- Gzip 으로 압축

image : Image Size 삽입

Image size 가 있는것이 렌더링 속도에 도움

IUEditor 2.1• http://www.iueditor.org/ : PageSpeed 89 점• 2.1 에 퍼포먼스 / 워드프레스 기능 확대 예정• Gmail 형 HTML 편집 기능 Experimental 로 오픈• Django Static URL 을 Template 에 삽입 예정