ワードプレスで記事を書いていると、色々悩みになってるのが・・・、そうこ「ページ表示の高速化」ですよね。
GoogleもSEOの評価基準の1つだと謳っています。早いは、正義なんですねー！

ワードプレスでブログを構築すると、色々と便利なプラグインを導入するかと思います。
しかし、このプラグインが原因で表示速度に影響するのも事実。
影響の原因は、ページ表示した際にccsやjsがヘッダー部にあることが一つの原因になります。
ヘッダー部にあるとcssとjsの読み込みが完了してから、HTMLソースの読み込みとなるためページ表示速度が遅くなります。

今回は、HTMLソースを読み込んだ後にcssを読み込むように改修する方法について記述させていただきます。
これだけでも、グーグルスピードインサイトの評価は上りますので、少しでも参考になれば幸いです。

ヘッダーのプラグインCSSをフッターで読み込ませる方法

結論：</body>タグの直前で読み込む

対応方法は、いたってシンプルです。</body>タグの直前に読み込むだけです。
対応方法は、これだけですが問題は、どのプラグインのcssとjsを使用しているか洗い出す必要があります。

プラグインが読み込んでいるCSSファイルを調べる

どのプラグインがどのようなCSSファイルをヘッダーで読み込んだいるのか調べてみます。

WordPressではプラグインがCSSファイルを読み込みするとき、一定の形式があります。それは下記のような形式になります。

注目すべきは、idです。

「プラグイン識別子-css」となってますが、「プラグイン識別子-css」から「-css」削除した「プラグイン識別子」がその名のとおり、「プラグイン識別子」となります。

プラグインCSSをフッターに移動させる方法について

プラグイン識別子を把握できましたので、次はいよいよプラグインCSSをフッター部に移動させます。
移動方法については、「functions.php」に記載します。

1. cancel_plugin_files関数で、元々読み込まれたプラグインCSSをキャンセル。
2. move_footer_plugin_files関数で、フッター内でCSSファイルを読み込みさせます。

では、サンプルソースを見ながら説明させていただきます。

functions.php

本来プラグインで読み込まれるはずだったCSSファイルの読み込みをキャンセル

cancel_plugin_files独自関数を作ります。
ここで、wp_dequeue_styleを使用し、出力用のキューに入っているスタイルシートを取り除きます。
あとは、add_actionを使用して独自関数を登録させます。

フッター内でCSSファイルの読み込みをさせる

move_footer_plugin_files独自関数を作ります。
あとは、add_actionを使用してアクション（move_footer_plugin_files）をフックさせ、wp_enqueue_styleを使用しCSSをフッターに読み込みさせます。

これで、作業完了になります。
編集したfunctions.phpをサーバーにアップロードしましょう。
その際、必ずfunctions.phpのバックアップをとってからアップロードしてください。

実際に試して見ると分かるかと思いますが、レイアウトを司るCSSをフッター側に移動させると、ページが表示された一瞬レイアウトが崩れたような状態から、綺麗なページに切り替わります。正直ちょっと気になります。

ですが、現状表示速度を優先させると致し方ないですね・・・。
これはブログを書く人に委ねるところになりますが、デザインを優先させるのか速さを優先させるか、どちらかを選択することになりますね。

様々な制作経験を生かし、あなたの良きパートナーになります。

カケルデザインは様々な業種・業界のサイト制作させていただいております。
その業務で得た経験を生かし、お客様に合わせた最良の提案・デザインを提供いたします。
お気軽にお問い合わせください。