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

最適化はここまでしないと気が済まない

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”>  <link rel="dns-prefetch" href="//www.google-analytics.com"> <link
rel="dns-prefetch" href="//www.googletagmanager.com"> <title>DNSプリフェッチ</title> </head> 書き方

いかがでしたでしょうか

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

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

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

泰昌平@ShoheiTai

More Decks by 泰昌平@ShoheiTai

Other Decks in Programming

Featured

Transcript

最適化はここまでしないと気が済まない