HTTP/2 サーバープッシュの実験

HTTP/2のサーバープッシュがうまく行かなくて難儀したけどようやく解決したのでメモ

WordPressでは毎回 index.php が呼び出されるってのに気付かんかったのよw
.htaccess ファイルに次のように書くと上手く行った。

<Files index.php>
Header add Link "</wp-includes/css/dist/block-library/style.min.css>;rel=preload;as=style"
Header add Link "</wp-content/plugins/contact-form-7/includes/css/styles.css>;rel=preload;as=style"
Header add Link "</wp-content/plugins/responsive-lightbox/assets/fancybox/jquery.fancybox.min.css>;rel=preload;as=style"
Header add Link "</wp-content/themes/sparkling/assets/css/bootstrap.min.css>;rel=preload;as=style"
Header add Link "</wp-content/themes/sparkling/style.css>;rel=preload;as=style"
Header add Link "</wp-content/themes/sparkling/assets/css/fontawesome-all.min.css>;rel=preload;as=style"
Header add Link "</wp-content/themes/sparkling_child/style.css>;rel=preload;as=style"
</Files>
Chromeの開発ツールで見るとこうなる

cloudflareでも上手く動いているし、オリジンサーバーのさくらインターネットでも効いてるようなんだけど、CSSを読み込むhtmlにクエリ文字列?が付いているせいでせっかくプッシュされたモノを再度取りに行くような挙動があるのかなんなのか細かいところまで検証してないのでプッシュ実験だけしてとりあえず満足。

そのうちクエリ文字列を削除してもう一度挑戦してみます。

ヘッダーや背景イメージのサイズがそこそこあるようなサイトだと効果が大きいかもね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.