【WordPress高速化】ヘッダーのプラグインCSSをフッターで読み込ませるには【PHP】

※ これは別noteアカ（@fukuro_press）からの移転記事です。

WordPressでサイトやブログを運営していて悩むことと言えばページの表示速度ですよね。

当然ページスピードが速いほど読者にとって快適になるし、GoogleもSEOの評価基準の１つだと言っているので速ければ速いほどGoodです。

ただWordPressだとプラグインが勝手にヘッダーでスクリプトやCSSを読み込んでしまうのが厄介なんですよね。

ヘッダーでCSSやJSファイルを読み込んでしまうとその分だけ時間がかかるのでプラグインを入れれば入れるほど読み込み速度はどんどん遅くなります。

ならどうすればいいかというと単純な話でヘッダーにあるものをフッター(bodyタグの最後あたり)で読み込めばいいだけです。

簡単なPHPコードでそれは実現できるので、ここではその方法について紹介します。

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

まずPHPコードを書く前にどのプラグインがどのようなCSSファイルをヘッダーで読み込んだいるのか調べましょう。

WordPressではプラグインがlinkタグを使ってCSSファイルを読み込みするとき、一定の形式があり、それは次のような形式です。

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

とりあえずid属性を見てください。

ここは「プラグイン識別子」 + 「-css」という形式のIDになっています。これがCSSファイルを後読みするときに必要になるIDです。

例えば「Fancy Box」というプラグインの場合、ID属性は次のような値になっていました。

fancybox-css

この場合、プラグイン識別子は「fancybox」になります。

ただしプラグイン名が必ず識別子になるわけでもありません。

例えば人気記事を表示するのによく使われるプラグイン「
WordPress Popular Posts」の場合はID属性は次のようになっています。

wordpress-popular-posts-css-css

この場合「-css」の前にさらに「-css」がついていてややこしいですが、プラグイン識別子は「wordpress-popular-posts-css」になります。

とりあえずプラグイン識別子を適当なページのソースを開いて探してみてください。ほとんどの場合はプラグイン名と同じだと思うので探しやすいと思います。

プラグインCSSをフッターに移動させるPHPコード

では今調べたプラグイン識別子を使ってCSSファイルをフッターに移動させてあげましょう。

例えば次の３つのlinkタグでプラグインCSSが読み込まれているとします。

<link rel='stylesheet' id='addtoany-css' ...以下略... />
<link rel='stylesheet' id='fancybox-css' ...以下略... />
<link rel='stylesheet' id='wordpress-popular-posts-css-css' ...以下略... />

この場合、プラグイン識別子はそれぞれ「addtoany」、「fancybox」、「wordpress-popular-posts-css」になります。

そしてこの３つのプラグインCSSをヘッダー読み込みを中止してフッターで読み込ませるにはテーマの「functions.php」に次のPHPコードを追加します。

function my_dequeue_plugin_files(){
  wp_dequeue_style('addtoany');
  wp_dequeue_style('fancybox');
  wp_dequeue_style('wordpress-popular-posts-css');
}
add_action( 'wp_enqueue_scripts', 'my_dequeue_plugin_files', 9999);
add_action('wp_head', 'my_dequeue_plugin_files', 9999);

function my_enqueue_plugin_files(){
  wp_enqueue_style('addtoany');
  wp_enqueue_style('fancybox');
  wp_enqueue_style('wordpress-popular-posts-css');
}
add_action('wp_footer', 'my_enqueue_plugin_files');

このコードの仕組みとしてはまず次の２つのアクションフックが起動したときに自作のmy_dequeue_plugin_files関数で本来プラグインで読み込まれるはずだったCSSファイルの読み込みをキャンセルしています。

・wp_enqueue_scripts
・wp_head

そして代わりに「wp_footer」が起動したときに自作のmy_enqueue_plugin_files関数を呼び出してフッター内でCSSファイルの読み込みをさせています。

この例では３つですが、フッターで読み込みたいプラグインCSSファイルがあればいくらでも追加できます。

フッターで読み込んでいるので読み込み時にデザインが少し崩れるかもしれませんが、そこは速さを優先するかデザインを優先するかといったところですね。

それとPHPファイルを編集するのでエラーがあると当然サイトが壊れます。必ずfunctions.phpのバックアップをとってから編集するようにしましょう。

以上がプラグインCSSをフッターで読み込む方法です。

私のサイトで試してみたら体感的には少しだけ(？)速くなったような感じがします。劇的に速くなるわけではないですが、少しくらいは効果があると思います。

WordPressはテーマやらプラグインでただでさえ読み込み速度が遅くなるので、ある程度スクリプトが書けるならこういう小さなことからコツコツと改善していくのがいいかもしれませんね。

プロフィール

Fukuro Pressでビジネスに役立つWordPress術やサイト構築術を配信しています。Twitterアカウント⇒フク郎@Fukuro-Press

これまでのノートにイイね付けてくれた方ありがとうございます！