【WordPress高速化】プラグインをフッター部で読み込ませる

【WordPress高速化】プラグインをフッター部で読み込ませる
トミー
ワードプレスで記事を書いていると、色々悩みになってるのが・・・、そうこ「ページ表示の高速化」ですよね。
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」=「プラグイン識別子」
例1)
<link rel=‘stylesheet’ id=‘va-social-buzz-css’ href=va-social-buzz/assets/css/style.min.css’ type=‘text/css’ media=‘all’/>

の場合、
ID:va-social-buzz-css
なので、「-css」を削除します。

プラグイン識別子:va-social-buzz となります。

補足情報
「プラグイン識別子」を把握することが最重要になります。
フッター部に移動させるためには「プラグイン識別子」を把握することが必須なのでぜひ覚えてください。
例2)
<link rel=‘stylesheet’ id=‘wordpress-popular-posts-css-css’ href=‘wordpress-popular-posts/public/css/wpp.css’ type=‘text/css’ media=‘all’/>

別の例で紹介します。
これは、ワードプレスでは人気のプラグインで人気記事をランキング表示してくれるプラグインです。
IDは「wordpress-popular-posts-css-css」。よく見ると「-css-css」となってますね。
少し混乱するかもしれませんが、公式どおりに考えて「wordpress-popular-posts-css-css」から「-css」だけ削除するだけです。

ID:wordpress-popular-posts-css-css
なので、「-css」を削除します。

プラグイン識別子:wordpress-popular-posts-css となります。
-cssを1つ削除すれば、プラグイン識別子が判明されます。

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

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

プラグインで有名な「jetpack」。
理由は分からないのですが、上記の方法ではCSSを移動することができませんでした。

僕の場合は、jetpackは管理画面のみしか使用しないので、functions.phpに下記ソースを書いて表側のみ削除して対応しました。

add_filter( ‘jetpack_implode_frontend_css’, ‘__return_false’ );

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

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

お問い合わせはこちら

 

 

【WordPress高速化】プラグインをフッター部で読み込ませる

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA