Upload
jd-yang
View
1.858
Download
2
Embed Size (px)
Citation preview
웹 사이트 퍼포먼스 증가시키기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 에 삽입 예정