リソース読み込みでサイトパフォーマンス改善方法

• 読む込むリソースの大きさと数を減らす
• レンダリングをブロックする読み込み
• ブラウザとサーバー間の遅延を減らす
• ブラウザのキャッシュを活用する

具体的な方法

HTML/CSS/JavaScriptを最小化する

不要な空白などのバイト列を削除する

適切な画像形式を選択する

画像ファイルの最適化する

不要なデータの削減やデータの整理、現職などで画像容量を削減する。

CSSのimportを避ける

外部CSSを読み込みする@importが利用できる。
HTTPリクエストを減らすという原則に反するだけでなく、レンダリングエンジンはstyle.cssをHTTTPで取得し、パースしてから初めて@import文を解釈でしゅおくす。
@import文で指定したCSSファイルは、並列で取得されるのは出なく、一旦@import文を記述したCSSファイルが取得・読み込まれることを待つ必要がある。

JavaScriptの同期的な読み込みを避けて、非同期にする

JavaScriptの読み込みによってブロックしたいくない場合には、defer属性、もしくはasync属性を用いる。

defer属性

script要素で外部ジャヴァsc李ptファイルを宣言する際に、defer属性があるとそのJavaScriptファイルの読み込みが非同期になる。
src属性で指定したJavaScriptファイルのダウンロードは即座におこ慣れるが、ドキュメントのパースもそのまま並行して進む。そして、取得したJavaScriptファイルはDOMツリーが構築されたから初めて実行される。
実行されるタイミングは、ドキュメントのパースが終わった時。

async属性

宣言した外部JavaScriptファイルの読み込みがドキュメントのパースをブロックしないようになる、ダウンロードもドキュメントのパースと並行して即座に進む。
だが、読み込んだJavaScriptの実行タイミングと実行順に保証がない。

JavaScriptでscript要素を非同期で読み込む

JavaScriptから動的にscript要素を生成してDOMツリーに追加する。

デバイスピクセル比ごとに読み込む画像を切り替える

srcset属性を使う

CSSのメディアクエリを適切に指定する

ブラウザはレンダリングする前にCSSの取得と読むこみを待つ。
CSSを読み込まずにコンテンツをレンダリングすると、スタイルがついていないコンテンツが一瞬表示され、CSSが読み込まれるとレンダリングが更新されて本来のコンテンツが表示される（＝FOUC）
FOUCはウェブページがチラついて表示される。

ブラウザはできるだけcっsファイルの読み込みを回避しようとする。
link要素のmedia属性を適切に指定することで、CSSの読み込みがレンダリングをブロックしないようになる。

CSSスプライトを使って複数の画像をまとめる

リソースを事前読み込みしておく

• DNSプリフェッチ
• リソースのプリフェッチ
• コネクションの接続
• プリレンダリング

DNSプリフェッチ

<link rel="dns-prefetch" href="http://sample.com">

と書くと、href属性に指定したドメインの名前解決をバックグラインドで処理してくれる。
名前解決されたドメインのIPアドレスはブラウザのキャッシュに格納される、

リソースのプリフェッチ

<link rel="prefetch" href="./image.png">

と書くと、リソースを事前読み込みできる。事前読み込みされたリソースはブラウザのキャッシュ内に格納される。

コネクションの接続

<link rel="preconnect" href="http://sample.com">

指定したドメインへの接続のみ予め行う。

プリレンダリング

<link rel="preheader" href="//sample.com/index.html">

HTMLファイル内に含まれているリソースも全て取得し、レンダリングの処理までバックグラウンドで行ってくれる。

Gzip圧縮を有効にする

HTTP/1.1はHTTPレスポンスのコンテンツを圧縮して配信できる。

CDNを用いてリソースを配信

ドメインシャーディング

ブラウザは、ドキュメントに紐づいている複数のリソースをHTTPを通じて取得する際には、TCP/IP接続をマルチスレッドで並列で持つことでリソースを効率よく取得しようとする。
そこで、リソースを配信するドメインを複数用意することで同時接続数を増やすテクニック＝ドメインシャーディングをします。

リダイレクトしない

ブラウザのキャッシュを活用する

• Expireヘッダー
• Cache-Controlヘッダー
• Last-Modifiedヘッダー
• ETagヘッダー といったHTTPヘッダーを設定する。

Expireヘッダー

一度リソースの取得を行うと期限が切れるまで自動的にブラウザ内部にキャッシュされる
＝＞強いキャッシュ

Cache-Controlヘッダーの設定

キャッシュを一度有効にすることでブラウザにキャッシュが存在する場合にはそのリソースへのHTTPリクエストは送信されないようになる。

Cache-ControlヘッダーがExpireヘッダーより優先される。

Last-Modifiedヘッダー

URLのリソースが最後に変更されたのが、いつなのかを設定する。
有効になると条件つきGETリクエストをすることでHTTPレスポンスが小さくできる。

ETagヘッダー

HTTPリクエストで取得するURLのリソースのバージョンを表現する。
有効になると条件つきGETリクエストをすることでHTTPレスポンスが小さくできる。

ETagヘッダーがLast-Modifiedヘッダーより優先される。

Service Workerの利用

JavaScriptからキャッシュの制御を柔軟に行うことができる。

HTTP/2の利用

特徴
- バイナリ化したプロトコル
- HTTP/1.1のセマンティクスの再利用
- リクエストのレスポンスの多重化
- HTTPヘッダーの圧縮
- サーバープッシュ

参考資料

Webフロントエンド ハイパフォーマンス チューニング