WordPress の設置先が HTTP/2 ウェブサーバーの注意点

前回、WordPress が稼働しているウェブサーバーを HTTP/2 に変更しました。

HTTP/2 環境では、ローカルブラウザと PageSpeed Insights のテスト結果から、JS（JavaScript）と CSS（Cascading Style Sheets）の連結は行わないほうが結果が良くなることが確認できました。これは主に HTTP/1.1 と HTTP/2 の仕様の違いが理由と推察しています。

HTTP/1.1 と HTTP/2 の違い

以下に仕様の違いと連結の必要有無をまとめました。

	HTTP1.1	HTTP/2
コネクション数と挙動	同時6～8接続程度まで	1つの接続で無制限に並列処理
オーバーヘッドインパクト	リクエストごとに負荷がかかる	ヘッダー圧縮により低い
連結の必要性	必須（リクエスト数低減のため）	不要（並列で送信可能）

HTTP/2 のメリット

HTTP/2 環境における JS/CSS を連結しない運用上のメリットもあります。

連結していない場合、キャッシュ機能が最大の効果を発揮します。ブラウザの再読み込みの際、修正がある小さなファイルだけが再ダウンロードされるため、キャッシュ機能を有効にしている WordPress では、より高速化が期待できます。
連結していない場合、重要な CSS だけを先に読み込ませる機能の「制御」が細かく可能になります。連結してしまうと1つの巨大な CSS ファイルをダウンロードさせるため、ブラウザは解析を待たされてしまいます。
JS（JavaScript）を連結して巨大な1つのファイルにまとめると、ブラウザのメインスレッドが解析に占有され、ページ表示がフリーズするような挙動になることがあります。連結しなければこのような挙動の発生を低減できます。

そのため、著名な高速化プラグインである Autoptimize や WP-Optimize などの「JS/CSS の連結（merging）」機能は OFF を推奨します。但し、以下の機能は継続して利用する価値があります。

JS/CSS の最適化（不要な改行や空白を削る）【理由】ファイル数に限らず送信量を減らすために有効です。
圧縮（Gzipなど）【理由】圧縮して小さいサイズでファイルを送信するために有効です。

最後に、そうは言っても、デスクトップとモバイル（スマホ）の読み込み遅延の最大の要素は「画像のサイズ」です。特にモバイル（スマホ）では表示性能の結果にとても大きく影響します。
画像は分割して送信されませんので、画像は1KB でもサイズを小さくすることは、HTTP/1.1 と HTTP/2 のどちらでも鉄則ですので、ご注意ください。