wp:wp_enqueue_styleでレンダリングするcssをfooter()にフックさせるにはどうすればいいでしょうか？

Question

function my_script() {
  wp_enqueue_style('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css', array(), null, 'all');
  wp_enqueue_style('style', get_stylesheet_uri(), null, 'all');
}
add_action('wp_enqueue_scripts','my_script');

上記で表示するcssを高速化のためにページ下部に表示したいです。

どのように変更するべきでしょうか？

Answer 1

CSSを下部に設置すると

1. head要素内CSSの解析
2. DOMツリー構築
3. レンダリング
4. body閉じタグ直前のCSS読み込み
5. レンダリング(再)

と無駄が発生し高速化にならないばかりでなく、FOUC(Flash of Unstyled Content)という後のCSS適用前の状態が一瞬表示されチラついて見えるリスクも出ます。

高速化したいのであれば、

• 複数CSSを統合(HTTPリクエストを減らす) & 圧縮
• もっと軽いCSSフレームワークを選ぶ

が有効だと考えます。

Comments

[makoto-n]

解説をくださりありがとうございます！
納得しました。