見出し画像

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

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

当然ページスピードが速いほど読者にとって快適になるし、GoogleもSEOの評価基準の1つだと言っているので速ければ速いほど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ファイルをフッターに移動させてあげましょう。

例えば次の3つの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」になります。


そしてこの3つのプラグイン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');

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

wp_enqueue_scripts
wp_head

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

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


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

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


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

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

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


プロフィール

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

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

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

この記事はお役に立てたでしょうか?もし活動を支援していただけるならサポートをお願いします m(__)m。

4
普段はFukuro-PressでWordPress術やブログ構築術を紹介しているブロガー。ブログ歴4年。ココナラ副業歴1年弱。今までネット副業(主にアドセンスとココナラ)で稼いできた経験メインに書いていく予定です。どうぞよろしく