5分で詰め込む フロントエンド最適化
TRANSCRIPT
最適化はここまでしないと気が済まない
5分で詰め込むフロントエンド最適化手法
泰昌平 (@stai0823)
自己紹介 泰 昌平
ファンチーム株式会社 Web エンジニアダーツとバイクが好き最近は CakePHP と Phalcon をやっていますフロントの javascript が大好物
今日はフロントエンドを高速化するテクニックについてお話しします。
どうしてフロントエンド？
・サーバのスペックを上げる・高速な言語に変える・高速なフレームワークに変える
高速化する方法はいくらでもある。
案件や環境に依存してしまう！
1.バックエンドの最適化よりも 高速化が期待できる
2.比較的少ない工数で高速化が図れる3.モバイルでの表示速度を大幅に改善できる
フロントエンドの最適化を知っていると
実際にやった事を紹介していきます
・ HTML ５を使用する・省略可能タグは必ず省略・ minify する・レンダリングブロックの回避・リクエストの削減・ dns プリフェッチ機能・ gzip 圧縮・ CDN を利用する
具体的になにをやったか
・ HTML ５を使用する・省略可能タグは必ず省略・ minify する・レンダリングブロックの回避・リクエストの削減・ dns プリフェッチ機能・ gzip 圧縮・ CDN を利用する
具体的になにをやったか
＿人人人人人人＿ ＞ 5 分の限界 ＜
￣ Y^Y^Y^Y^Y^Y^￣
HTML5でマークアップ
もはやド定番ですが、最適化の観点でいうと
・省略可能な属性が追加・以前よりもタグをシンプルに記述できる
HTML5でマークアップ ※ ここは軽く流していきます
<!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">
省略可能タグを徹底
<html>,</html>,<head>,</head>,<body>,</body>,</li>,</dt>,</dd>,</p>,</option>,</thead>,<tbody>,</tr>,</td>,</th> などなど。。
結構いっぱい省略できる
minify
・無駄なスペース・改行コード・コメントを全て消しておく→Google Closure Compiler→YUI Compressor・プラグイン・ライブラリも必ず minify されたものを使う・フレームワークなどを使用しているのであれば、 View出力の際に処理を加える
minifyをしよう
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の場合
リクエストを減らす
HTML にインラインで記述する！
JSや CSSへのリクエストを最小限に！
→HTML のファイルサイズが増大→ ソースが混在し、管理が難しくなる→ キャッシュが使えなくなる
・リクエストを減らす？・外部ファイル化してキャッシュする？
どっちがベスト？
疑問に思ったらteratail！
https://teratail.com/questions/15358
・外部ファイル化はキャッシュされるため速くなる
・ただし、初回はガッツリ読み込みに行くので遅くなる
Q.JS の外部ファイル化は本当に速い？
ベストアンサーに選ばれた回答
・一般的にはリクエストは少ないほうが良い・外部ファイル化はケースバイケース。→ 保守性を重視する場合は外部ファイル化→ アクセス数が多いサイトはインラインに記述する場合もある
ベストアンサー
dns-prefetchを使う
DNSプリフェッチ・ DNS の名前解決を事前に行うよう強制できる
・ HEAD タグの上部に prefetch 用のタグを埋め込む
・実質、外部のリソースを読みに行っている箇所全てに有効
<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>
書き方
いかがでしたでしょうか
ご清聴ありがとうございました