ショートカット
TTFB(Time to First Byte)
TTFBは’最初のバイトまでの時間’、つまりブラウザがリクエストした後にウェブサーバで最初の情報を受信するまでブラウザが待機する時間です。
TTFB短縮のコツ
- TTFBが長くなる最も一般的な理由は動的コンテンツの生成です。ブラウザが静的ファイルをリクエストするとサーバはファイルにすぐレスポンスできますが、動的ファイルをリクエストするとサーバはブラウザにレスポンスする前にファイルをビルドしなければなりません。従ってこれを解決する良い方法はキャッシュを使用することです。キャッシュはブラウザが呼び出しされなくてもページを予めビルドして HTMLをブラウザに準備させます。
- ウェブサーバの構成を変更することによってTTFB時間を短縮できます。
- 光ケーブルのスピードを向上させると改善できます。
- ウェブサイトトラヒックが増加する場合、スピードが遅くなることがあり、ウェブサーバを増やしてトラヒックを分散させる方法などを検討できます。
サーバレスポンス時間(Server Response Time)
サーバレスポンス時間はウェブサーバがブラウザのリクエストにレスポンスするのにかかる時間です。ウェブページが最適化されていてもサーバのレスポンス時間が遅い場合はページが遅く表示されます。
一般的に理想的だと考えるServer Response Timeは200ms未満です。
サーバレスポンス時間短縮のコツ
- ウェブページ別にCSS, JavaScript などのリソースをリクエストする数を減らす方法を考えてみてください。
- リソースのMerge: CSSまたはJavaScriptを複数の異なるファイルに分離せず、一つのファイルに合わせると性能を向上させることができます。
- Image LazyLoading: 今すぐ必要ではないイメージは後でリクエストして画面の表示を遅延させる方法で性能を向上させることができます。
- 場合によってCSSとJavaScriptを外部ファイルに置かないでHTMLファイル自体にインラインすると追加の呼び出しが必要ありません。
- keep aliveが 有効化されていないとリソースのダウンロードに時間がかかることがあります。
- リソースのファイルサイズを減らす方法を考えてください。
- 余計に大きいイメージのサイズを縮小するとリソースの容量が著しく減ってダウンロード時間を短縮することができます。
- 実際のイメージの表現とは関連のないメタ情報が存在する場合、メタ情報を除去します。
- HTTP Gzip 圧縮技術を使用して、全てのリクエストに対してContent-Encoding:gzipヘッダーを追加してサイズを減らすことができます。
- HTTPページの注釈と空白を除去するのもリソースのサイズ縮小につながります。
- ウェブサーバソフトウェアを変更したり、より上手に構成してサーバレスポンス時間を短縮できます。
DOMプロセシング
ブラウザが HTMLをパースして解釈するのにかかる時間、つまりDOM Loadingを始めて準備が完了するまでかかる時間です。
スピード向上のコツ
- 巨大なページはパースするのに時間が長くかかります。HTMLページに最適化するところがあるか確認する必要があります。
ページレンダリング(Page Rendering)
ブラウザがHTMLを表現してJavaScriptを実行しながらページを構成する下位イメージをローディングするのにかかる時間です。大規模なリソースをダウンロードして JavaScriptを実行するとウェブで相当な時間がかかることがあります。
スピード向上のコツ
- リソースがHTMLページ内のどこに位置するかによってレンダリング性能が異なることがあります。
- headには必ずレイアウト構成に必要なCSSファイルのみ入れます。headの仕事が多いとユーザーは空いたページ状態で長く待たなければなりません。
- JavaScriptはbodyタグを閉じる直前に入れます。bodyタグ内でscriptを途中で入れると全体のレンダリングがしばらく中断されます。
関連情報へショートカット
以下のガイドから関連情報を確認できます。
