フロントエンドパフォーマンス向上ルール

社内勉強会の資料です。

Transcript

1.  Leading  Edge  Development  勉強会 フロントエンドパフォーマンス向上ルール
2. はじめに ▪Webサイト⾼高速化  /  パフォーマンス改善の重要性 【Aberdeen  Group  Report】 ・Amazonはページの反応が0.1秒遅くなると、売り上げが1%ダウンする。 ・Googleのページ反応が0.5秒遅くなると、アクセス数が20%ダウンする。 ・⼀一般的に表⽰示スピードが1秒遅くなると、  　PVは11%、コンバージョンは7%、顧客満⾜足度度は16%ダウンする。 【Jakob  Nielsen】  　３つの重要限界  　・⼼心理理的・感情的な違和感を感じないのは0.1秒まで  　・思考の流流れが妨げられないのは1秒まで  　・注意⼒力力を維持する限界の時間は10秒まで
3. はじめに ▪パフォーマンス改善の⼿手段 【改善箇所】 ・パフォーマンス改善をする際、バックエンドの最適化を⾏行行いがち  　例例）DBのインデックス設計、アプリケーションロジック、メモリ管理理の⾒見見直し  　⇒チャレンジブルではあるが、開発コストやリスクが⼤大きい。 【応答時間】 ・エンドユーザーに対する応答時間のうち、ほとんどがページ内のコンポーネントに費やされる。 パフォーマンス改善を実施する際、まずはフロントエンドの最適化から⾏行行うべき！ バックエンド 20%前後 フロントエンド 80%前後  　⇒フロントエンドの最適化を⾏行行ったほうが効果は⼤大きく、また、バックエンドに⽐比べて容易易。 ※バックエンド=HTMLドキュメントをWebサーバからブラウザへ取得してくるまでの時間
4. ▪３つの減らす Size ダウンロードサイズを減らす！ ダウンロード（ファイル）サイズを減らすことで、パフォーマンスを向上させる。 Request リクエスト回数を減らす！ HTTPリクエストの回数を減らすことで、パフォーマンスを向上させる。 Worry ⼼心理理的な負担を減らす！ 視覚的なフィードバックを与え、ユーザーの⼼心理理的な負担を減らすことで、 パフォーマンスを向上させる。 ３⼤大原則
5. ルール① ▪重複スクリプト&不不必要なリダイレクト撲滅 S R W 【基本】 ・重複ファイル（ロジック）をなくすことで、ファイルサイズ削減及び、  　外部ファイルの読み込み回数を減らす。 ・また、不不必要なリダイレクトをなくことで、HTTPリクエスト回数を減らす。 【⽅方法】 ・基本的にコードレビューを⾏行行うことを第⼀一とするが、  　JSLint等の解析ツールの導⼊入やビルドプロセスの改善を検討する。 【効果】 ・重複を排除した分だけ⾼高速化が⾒見見込まれる。  　特にリダイレクトに関しては、リダイレクト中は視覚的なフィードバックがないため、  　リダイレクトをなくすことで、ユーザーの⼼心理理的な負担も減少する。 【発展】 ・末尾スラッシュが⽋欠けている際に発⽣生するリダイレクトも排除する。
6. ▪JavaScriptを縮⼩小化する 【基本】 ・コードから不不要な⽂文字を除去することで、ファイルサイズを削減する。  　ひいては、ダウンロード時間の短縮に繋がる。jquery.min.js等が有名。 【⽅方法】 ・縮⼩小化ツールを利利⽤用する。 例例）JSMin,  YUI  Compressor   【発展】 ・難読化については、バグのリスクや保守コストの増加が考えられるため、基本的には推奨しない。 ・CSSの縮⼩小化については、JavaScriptよりも効果が⼤大きくない。（コメントや空⽩白⽂文字が少ないため） 【効果】 ・20%〜～30%程度度の⾼高速化が⾒見見込まれる。 ルール② S R W
7. ▪画像  /  CSS  /  JavaScriptを結合する 【基本】 ・画像、CSS、JavaScriptをそれぞれ１つ（ないしは最低限の数）のファイルにまとめる。  　これにより、HTTPリクエストを減らすことが出来る。 【⽅方法】 ・画像…CSSスプライトを利利⽤用する。 ・CSS  /  JavaScript…ひとつのファイルにまとめる。 【発展】 ・ファイルの結合については、ビルドプロセスを整備することも検討する。 【効果】 ・画像（CSSスプライト）…50%程度度の⾼高速化が⾒見見込まれる。 ・CSS  /  JavaScript（ファイル結合）…30%〜～40%程度度の⾼高速化⾒見見込まれる。 ルール③ S R W
8. ▪Expiresヘッダを設定する 【基本】 ・ブラウザのキャッシュ機能を利利⽤用、具体的にはExpires（Cache-‐‑‒Control）ヘッダを設定することで、  　HTTPリクエストを減らす。 【⽅方法】 ・Apacheのmod_̲expiresモジュールを利利⽤用する。  　※適⽤用するコンポーネントは画像、CSS、JavaScriptファイル等動的でないコンポーネント ・適⽤用したコンポーネントのファイル名にバージョン名を付加する。  　※テンプレート出⼒力力時にファイルのクエリにファイル更更新⽇日時を付加する。  　例例）<link  href="css/style.css?date=20140525"  rel="stylesheet”  /> 【発展】 ・HTTP1.1からCache-‐‑‒Controlヘッダが導⼊入された。 【効果】 ・50%程度度の⾼高速化が⾒見見込まれる。（２回⽬目以降降） ルール④ S R W
9. ▪CSSは先頭に置く 【基本】 ・CSSを先頭に置くことで、プログレッシブにレンダリングされる。  　これにより、真っ⽩白な画⾯面が表⽰示されるの防⽌止し、描画されているという視覚的なフィードバックを、  　与えることで、ユーザーのストレスを低減する。 【⽅方法】 ・CSSはlinkタグを使⽤用して、ドキュメントのheadタグ内に置く。 【発展】 ・@import規則は記述しない。 【効果】 ・全てのダウンロードが完了了するのは、CSSを最後に置いたほうが早いが、  　視覚的なフィードバックがあるため、体感速度度は先頭に置いたほうが早い。  　※最後にCSSを置くと、ブラウザはスタイルシートが変化した際にページ上の部品を再描画しなければいけないため、  　 　レンダリングを停⽌止してしまう。 ルール⑤ S R W
10. ▪JavaScriptは最後に置く 【基本】 ・JavaScriptを最後に置くことで、プログレッシブにレンダリングされる。 【⽅方法】 ・JavaScriptはドキュメントの最後に置く。  　（document.writeが含まれているスクリプト等⼀一番下で指定するのが難しい場合は先頭に置く。） 【発展】 ・DEFER属性を指定する。 【効果】 ・プログレッシブにレンダリングされるため、体感速度度が早い。  　また、並列列ダウンロード可能なコンポーネント数が増えるため、読み込みの速度度が向上する。  　※ひとつのホスト名に対する並列列ダウンロード数は2がデフォルトであり、最適であることが多いが、  　 　JavaScript読み込み時は並列列ダウンロードが中⽌止されてしまう。 S R W ルール⑥
11. ▪CSSとJavaScriptは外部ファイル化する 【基本】 ・CSSとJavaScriptを外部ファイルにすることで、キャッシュさせることが出来る。 【⽅方法】 ・CSSとJavaScriptを外部ファイルにまとめる。（＝インラインでHTMLドキュメントに記述しない） 【発展】 ・ホーム（インデックス）ページでは、インラインでCSSやJavaScriptを埋め込み、onloadイベントで ホームページが完全にロードされた後で、外部コンポーネントを動的にダウンロードすることで、インラ インと外部ファイルのキャッシュもメリットを享受させることも可能。 【効果】 ・単純な⽐比較ではインラインの⽅方がHTTPリクエストによるオーバーヘッドがないため、⾼高速だが、  　外部ファイル化することで、キャッシュを最⼤大限に活かすことが出来る。  　（キャッシュされた状態でのページビューが多ければ多いほど有効）  　※全て外部ファイル化している⽅方が保守しやすいという副次効果もある。 S R W ルール⑦
12. ▪分析ツール  /  参考⽂文献 【分析ツール】 ・YSlow（Chrome  /  Firefoxアドオン）…Webサイトパフォーマンス測定ツール ・Google  Developer  Console  /  Firebug…Webアプリケーションデバッグツール 【参考⽂文献】 ・『ハイパフォーマンスWebサイト  ―⾼高速サイトを実現する14のルール』  　（Steve  Souders  /オライリージャパン）   ・『ウェブ・ユーザビリティ―顧客を逃がさないサイトづくりの秘訣』  　（Jakob  Nielsen  /  エムディエヌコーポレーション） おわりに