質問: ``` 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を**高速化のためにページ下部に表示**したいです。 どのように変更するべきでしょうか?
回答: CSSを下部に設置すると 1. head要素内CSSの解析 2. DOMツリー構築 3. レンダリング 4. body閉じタグ直前のCSS読み込み 5. レンダリング(再) と無駄が発生し高速化にならないばかりでなく、FOUC(Flash of Unstyled Content)という後のCSS適用前の状態が一瞬表示されチラついて見えるリスクも出ます。 高速化したいのであれば、 * 複数CSSを統合(HTTPリクエストを減らす) & 圧縮 * もっと軽いCSSフレームワークを選ぶ が有効だと考えます。