5分で詰め込む フロントエンド最適化
?Download as PPTX, PDF?
2 likes?3,784 views
第2回 teratail Meetup "集まっtail"でのLTです。 フロントエンドの高速化を図る手法をいくつかご紹介しています。
5分で詰め込む フロントエンド最適化
- 5. どうしてフロントエンド？
- 12. 贬罢惭尝5でマークアップ
- 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. 省略可能タグを彻底
- 17. minify
- 18. ?無駄なスペース?改行コード?コメントを全て消してお く →Google Closure Compiler →YUI Compressor ?プラグイン?ライブラリも必ずminifyされたものを使う ?フレームワークなどを使用しているのであれば、View出 力の際に処理を加える minifyをしよう
- 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. リクエストを减らす
- 26. ベストアンサーに选ばれた回答
- 27. ?一般的にはリクエストは少ないほうが良い ?外部ファイル化はケースバイケース。 →保守性を重視する場合は外部ファイル化 →アクセス数が多いサイトはインラインに記述する場合も ある ベストアンサー
- 28. 诲苍蝉-辫谤别蹿别迟肠丑を使う
- 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. いかがでしたでしょうか
- 32. ご清聴ありがとうございま した
Editor's Notes
- 結局これなんですよね。 案件や環境に依存してしまう。あとお金！ そもそも実際に動いてるサイトに対してサーバとかを触ってしまうのはリスクが大きいですよね。
- ハイパフォーマンスWebサイというオライリーの本にも書いてあります。 Webでの待ち時間の8割がフロントエンドに費やされているという話があります。
- 勘違いされがちなのですが、実はHTML5以前でも省略できます。 liタグとかoptionタグとかは効果絶大です。
- 一番手っ取り早いのはインラインでJSやCSSを書いてしまうことです でも弊害があります。
- じゃあこれって結局どうすればいいのかと リクエストは減らせばいい？外部ファイル化
- 肠诲苍箩蝉.肠辞尘や骋辞辞驳濒别のヘルプページなどでも使われていたりします。
- headの上部にひたすら羅列することで効果を発揮します。 ここで指定するドメインは何でも良いです。 画像でもCSSでもJSでも、外部に読みに行っているものを指定すると効果的です。 これ、ウォーターフローが結構面白くなるのでお見せしたかったのですが、 ウォータフローをキャプチャするサイトが障害で取れなかったのでお見せできませんでした。。
- フロントエンドの最適化は検証されて、データのある手法が他にもたくさんあるので、非常に奥が深いです。 色々試してみてください。