速い！CSS

このスライドは、2016/12/02に開催されたweb制作勉強会、DIST.13にて発表したスライドを加筆修正したものです。

Transcript

1. 速い！CSS 2016-17 Winter Edition idw.jp 五⼗嵐 武志
2. ご案内 このスライドは、2016/12/02に開催されたweb制作勉強会、 DIST.13にて発表したスライドを加筆修正したものです。
3. whoami 五⼗嵐 武志 Web開発者 ★ HTML5 / CSS3 ★ WordPress（やりすぎて飽きてる） ★ Cloud Computing（AWS他） デザイナー ★ UX / ユーザー中⼼設計（UCD）      takeshi81
4. まとめ 1.CSSを軽くする 2.CSSの配信を最適化する 3.真にCSSの⾏く⼿を阻むもの
5. CSSを軽くする コンセプト：「考え込まない」 CDNで配信されているフレームワークは⼗分軽量です。 例: Bootstrap v4.0.0-alpha.5.min.css = 20.3KB
6. CSSを軽くする 「カスタマイズで要素の上書きが多くなったら？」 フレームワークのプリプロセッサ（Sass他）で変数に適切な値 を⼊れ、コンパイルすることで重複を避けることが出来ます。 例:
 yarn add bootstrap@4.0.0-alpha.5 --dev
 or
 npm install bootstrap@4.0.0-alpha.5 --save-dev
7. CSSを軽くする 「カスタマイズで要素の上書きが多くなったら？」 例:
 // style.scss
 
 $enable-rounded: false;
 // 他にあれば書き⾜す
 
 // bootstrap.scssのパスを指定して読み込む
 @import “node_modules/bootstrap/scss/bootstrap”;
8. CSSを軽くする 「考え込まない」 ★ CDNで配信されているフレームワークは⼗分軽量です ★ カスタマイズが増えるなら、フレームワークのプリプロセッ サ（Sass, LESS etc.）と仲良く付き合いましょう
9. CSSの配信を最適化する コンセプト：「考え込まない」 ★ なるべくファイル数（HTTPリクエスト）を少なく、まとめる ★ AMP⚡的考え⽅ = HTMLのHEADセクションにインラインで ⼊れるのも⼀つの解法 ★ 最終的解決 = オブジェクトストレージ（Amazon S3 etc.）の静的webホスティング
10. CSSの配信を最適化する HTTP/2 を導⼊可能な場合 ★ なるべくファイル数（HTTPリクエスト）を少なく、まとめる ★ AMP⚡ 的考え⽅ = HTMLのHEADセクションにインラインで⼊れるのも⼀つの解法 ★ 最終的解決 = オブジェクトストレージ（Amazon S3 etc.）の静的webホスティング
 リクエストをまとめたり、ホストを分けたり、 インラインCSSを使わなくても⼤丈夫です。 これらの諸問題はすべて HTTP/2 で解決します。
11. 真にCSSの⾏く⼿を阻むもの JavaScript 可能であれば、HTMLのbody要素終了直前に読み込みます。
12. 真にCSSの⾏く⼿を阻むもの 可能であれば、HTMLのbody要素終了直前に読み込みます。 例： </footer>
 <script src=“https://code.jquery.com/jquery-3.1.1.min.js" integrity=“sha256- hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
 <script>window.jQuery || document.write('<script src=“node_modules/jquery/ dist/jquery.min.js”><\/script>’)</script>
 <script>
 window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
 ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
 </script>
 <script src="https://www.google-analytics.com/analytics.js" async defer></ script>
 </body>
 </html>
13. まとめ 1.CSSを軽くする • 考え込まない = CDNで配信されているフレームワークは⼗分軽量です • カスタマイズが増えるなら、プリプロセッサ（Sass, LESS etc.）と仲良く付き合う 2.CSSの配信を最適化する • 考え込まない = なるべくファイル数を少なく、まとめる • AMP⚡ 的考え⽅ = HTMLに埋め込むのも⼿ • 最終的解決 = オブジェクトストレージ（Amazon S3 etc.）の静的webホスティング 3.真にCSSの⾏く⼿を阻むもの • JavaScript