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

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

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

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

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

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

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

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

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

<link rel=‘stylesheet’ id=‘プラグイン識別子-css’ href=‘[CSSファイルURL]’ type=‘text/css’ media=‘[メディアクエリ]’ />

注目すべきは、idです。

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

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

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

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

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

functions.php

/* cancel_plugin_files関数で本来プラグインで読み込まれるはずだったCSSファイルの読み込みをキャンセル */
function cancel_plugin_files(){
	wp_dequeue_style(‘fontawesome’);
	wp_dequeue_style(‘shortcode’);
	wp_dequeue_style(‘animate’);
	wp_dequeue_style(‘wordpress-popular-posts-css’);
}
add_action( ‘wp_enqueue_scripts’, ‘cancel_plugin_files’, 9999);
add_action(‘wp_head’ , ‘cancel_plugin_files’, 9999);



/* 「wp_footer」が起動したときに自作の move_footer_plugin_files 関数を呼び出してフッター内でCSSファイルの読み込みをさせる */
function move_footer_plugin_files(){
	wp_enqueue_style(‘fontawesome’);
	wp_enqueue_style(‘shortcode’);
	wp_enqueue_style(‘animate’);
	wp_enqueue_style('wordpress-popular-posts-css');
}
add_action('wp_footer', 'move_footer_plugin_files');

本来プラグインで読み込まれるはずだった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をフッター側に移動させると、ページが表示された一瞬レイアウトが崩れたような状態から、綺麗なページに切り替わります。正直ちょっと気になります。

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

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

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