웹사이트 퍼포먼스 증가시키기 | iueditor
TRANSCRIPT
![Page 1: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/1.jpg)
웹 사이트 퍼포먼스 증가시키기JDLab, IUEditor Team
S, IUEditor 리드 프로그래머
![Page 2: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/2.jpg)
![Page 3: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/3.jpg)
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
![Page 4: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/4.jpg)
Script• Remove Render-Blocking JavaScript• https://developers.google.com/speed/docs/insights/BlockingJS#
InlineJS• CSS 를 JS 보다 앞라인에 위치하게 함 .• Script 의 경우 HTML 5 에서 옵션 제공• None • Async• Defer
![Page 5: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/5.jpg)
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
![Page 6: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/6.jpg)
raw / defer
![Page 7: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/7.jpg)
<script>
<script defer> CSS file 은 JS 파일보다 먼저 선언
![Page 8: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/8.jpg)
Critical rendering path : 조금씩 그리기
![Page 9: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/9.jpg)
웹 개발을 세 배 빠르게 해주는 IUEditor 는다음 회사에서 사용하고 있습니다 .
![Page 10: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/10.jpg)
광고 하나 넣고
• IUEditor 2.0
• 그냥 쓰세요 . www.iueditor.org
• 용도 : 웹 사이트 개발 / 이메일용 웹 개발 편집 / TV GUI 개발
![Page 11: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/11.jpg)
Server - caching• Meta data 추가• Cache-control, Expires• Etag : validation token
• Last-Modified or ETag headers
![Page 12: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/12.jpg)
Server - compression
4/6 files gzip
![Page 13: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/13.jpg)
이미지 최적화 ( 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
![Page 14: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/14.jpg)
Image : img 태그에는 width/height 를 반드시 넣기
![Page 15: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/15.jpg)
압축 / 캐쉬 사용 – cloud front- CloudFront encoding 설정- 각 파일에 meta tag 설정
- CloudFront meta tag 설정- 각 파일에 meta tag 설정
![Page 16: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/16.jpg)
javascript 문제 찾기다음 버전에 defer 를 옵션으로 추가 혹은 옵션 변경없이 defer 로 변경 예정
jQuery 에 의존성이 있다면 defer 처리를 하거나 jQuery check routine 을 넣어야함
![Page 17: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/17.jpg)
css : GZIP 과 파일 압축한개의 파일로 합칠예정
- page Speed 제안 -> cssfile 을 한번에 보내주는 옵션이 있음
- Gzip 으로 압축
![Page 18: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/18.jpg)
image : Image Size 삽입
Image size 가 있는것이 렌더링 속도에 도움
![Page 19: 웹사이트 퍼포먼스 증가시키기 | IUEditor](https://reader036.vdocuments.site/reader036/viewer/2022082213/58f2c4061a28abc12e8b4583/html5/thumbnails/19.jpg)
IUEditor 2.1• http://www.iueditor.org/ : PageSpeed 89 점• 2.1 에 퍼포먼스 / 워드프레스 기능 확대 예정• Gmail 형 HTML 편집 기능 Experimental 로 오픈• Django Static URL 을 Template 에 삽입 예정