Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

5分で詰め込む フロントエンド最適化

3,184 views

Published on

第2回 teratail Meetup "集まっtail"でのLTです。
フロントエンドの高速化を図る手法をいくつかご紹介しています。

Published in: Technology
  • Be the first to comment

5分で詰め込む フロントエンド最適化

  1. 1. 最適化はここまでしないと気が済ま ない
  2. 2. 5分で詰め込む フロントエンド最適化手法 泰昌平 (@stai0823)
  3. 3. 自己紹介 泰 昌平 ファンチーム株式会社 Webエンジニア ダーツとバイクが好き 最近はCakePHPとPhalconをやっています フロントのjavascriptが大好物
  4. 4. 今日はフロントエンドを高速化する テクニックについてお話しします。
  5. 5. どうしてフロントエンド?
  6. 6. ・サーバのスペックを上げる ・高速な言語に変える ・高速なフレームワークに変える 高速化する方法はいくらでもある。
  7. 7. 案件や環境に依存してしまう!
  8. 8. 1.バックエンドの最適化よりも 高速化が期待できる 1.比較的少ない工数で高速化が図れる 2.モバイルでの表示速度を大幅に改善できる フロントエンドの最適化を知っている と
  9. 9. 実際にやった事を紹介していきます
  10. 10. ・HTML5を使用する ・省略可能タグは必ず省略 ・minifyする ・レンダリングブロックの回避 ・リクエストの削減 ・dnsプリフェッチ機能 ・gzip圧縮 ・CDNを利用する 具体的になにをやったか
  11. 11. ・HTML5を使用する ・省略可能タグは必ず省略 ・minifyする ・レンダリングブロックの回避 ・リクエストの削減 ・dnsプリフェッチ機能 ・gzip圧縮 ・CDNを利用する 具体的になにをやったか _人人人人人人_ > 5分の限界 <  ̄Y^Y^Y^Y^Y^Y^ ̄
  12. 12. HTML5でマークアップ
  13. 13. もはやド定番ですが、最適化の観点でいうと ・省略可能な属性が追加 ・以前よりもタグをシンプルに記述できる HTML5でマークアップ ※ここは軽く流していきます
  14. 14. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <script type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="style.css"> 例えば・・ <!DOCTYPE html> <script></script> <link rel="stylesheet" href="style.css">
  15. 15. 省略可能タグを徹底
  16. 16. <html>,</html>,<head>,</head>,<body>, </body>,</li>,</dt>,</dd>,</p>,</option>, </thead>,<tbody>,</tr>,</td>,</th> などなど。。 結構いっぱい省略できる
  17. 17. minify
  18. 18. ・無駄なスペース・改行コード・コメントを全て消してお く →Google Closure Compiler →YUI Compressor ・プラグイン・ライブラリも必ずminifyされたものを使う ・フレームワークなどを使用しているのであれば、View出 力の際に処理を加える minifyをしよう
  19. 19. class AppHelper extends Helper { public function afterLayout($layoutFile) { parent::afterLayout($layoutFile); if($this->_View) { //出力するソースのタブ・スペース・改行を削除する $this->_View->output = str_replace(array("¥n", "¥t", ' '), '', $this->_View->output); } } } CakePHPの場合
  20. 20. リクエストを減らす
  21. 21. HTMLにインラインで記述する! JSやCSSへのリクエストを最小限に! →HTMLのファイルサイズが増大 →ソースが混在し、管理が難しくなる →キャッシュが使えなくなる
  22. 22. ・リクエストを減らす? ・外部ファイル化してキャッシュす る? どっちがベス ト?
  23. 23. 疑問に思ったら teratail!
  24. 24. https://teratail.com/questions/15358
  25. 25. ・外部ファイル化はキャッシュされるため速くなる ・ただし、初回はガッツリ読み込みに行くので遅くなる Q.JSの外部ファイル化は本当に速い?
  26. 26. ベストアンサーに選ばれた回答
  27. 27. ・一般的にはリクエストは少ないほうが良い ・外部ファイル化はケースバイケース。 →保守性を重視する場合は外部ファイル化 →アクセス数が多いサイトはインラインに記述する場合も ある ベストアンサー
  28. 28. dns-prefetchを使う
  29. 29. DNSプリフェッチ ・DNSの名前解決を事前に行うよう強制できる ・HEADタグの上部にprefetch用のタグを埋め込む ・実質、外部のリソースを読みに行っている箇所全てに有 効
  30. 30. <head> <meta charset=”UTF-8”> <!-- 出来る限りheadの上部に配置する --> <link rel="dns-prefetch" href="//www.google-analytics.com"> <link rel="dns-prefetch" href="//www.googletagmanager.com"> <title>DNSプリフェッチ</title> </head> 書き方
  31. 31. いかがでしたでしょうか
  32. 32. ご清聴ありがとうございま した

×