第3回 Creators MeetUpで使用したスライドです。

1. 高速化はじめの一歩
第3回 Creators MeetUp
中根 悠樹

2. プロフィール
氏名：中根 悠樹
Twitter：ユウキ @yuki_naka
職業：フロントエンドエンジニア
Y u k i N a k a n e
※Twitterのアイコンは
イメージです。
現実とは異なります。

3. CodePlus
http://code-plus.jp

4. 本日の内容
•高速化について
•HTTPリクエストを減らそう！
•画像を軽くしよう！

5. 高速化について

6. 何故、高速化する必要があるのか？

7. 速い方がいいに決まっているから

8. お腹が減ってたらすぐにご飯が食べたいのと一緒

9. まずは自分のサイトを知ろう

10. • Pingdom Tools
• loads in
• GT metrix
• Page Speed Insights
• YSlow
計測ツール
などなど

11. うわっ…私のサイト、
遅すぎ…？

12. パフォーマンスを改善しよう

13. どこから始めるか？

14. まずはリクエストを減らすことから

15. HTTPリクエストを減らそう！

16. CSSやJavaScript

17. <link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet” href="../reset.css">
<link rel="stylesheet" href="../css/top.css">
<link rel="stylesheet” href="../jquery.slider.css">
<link rel="stylesheet” href="../hoge.css">
CSS 読み込むファイルが多い

18. <link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet” href="../reset.css">
<link rel="stylesheet" href="../css/top.css">
<link rel="stylesheet” href="../jquery.slider.css">
<link rel="stylesheet” href="../hoge.css">
なるべく一つに！(もちろんJavaScriptも)
<link rel="stylesheet" href="../css/style.css">

19. 背景画像
background-image

20. CSS Sprite
複数の画像をまとめて一枚の画像とし
て作成し、background-position
を指定して個別に表示させることによ
りリクエストを減らす。

21. スプライトの作成
• Sass + Compass
• Fireworks CS6
• SpriteMe
• SpriteMachine などなど

22. Data URI Scheme (base64)
画像を文字列に変換

23. .bg { background:url(data:image/png;base64,xxxxxx xxxxxx==); }
.bg { background:url( hoge.png ); }
リクエストは0！(※但し、容量は約1.3倍に)

24. Data URI Schemeの作成
通常、画像を更新するたびに手動で
エンコードしなければいけないが、
Compassがエンコードを行ってく
れるため。
Sass+Compass 一択！
※追記
Emmetでも比較的に楽にbase64エン
コードを行えます。

25. 画像を軽くしよう！
軽量化ツールとSVG

26. JPEG
• JPEG mini
• JPEG Minimizer

27. PNG
• Image Optim(Mac Only)
• imageAlpha(Mac Only)
• PNG Minimizer
• Tiny Png
• Smush.It

28. SVG (Scalable Vector Graphics)
XMLによって記述されるベクターイメージ言語
ベクターデータとして扱えるので、
スマートフォンサイト製作時等に役立つ。
XML(文章)で作成されているので全体的に軽い。
※画像が複雑なものはパスの記述が増えるので
かえって重くなる可能性がある。

29. SVG対象ブラウザ

30. PC
Internet Explorer 9 以上
スマートフォン
iOSはすべてOK
Androidは3.0∼(またお前か)

31. SVGのフォールバック

32. Modernizr
http://modernizr.com/

33. SVGeezy
http://benhowdle.im/svgeezy/

34. 他にもやれることはたくさんありますが

35. まずはできるとこからやっていきましょう

36. ご清聴ありがとうございました