WordPressでレンダリングを妨げるjavascriptを削除・移動させるには

PageSpeed Insightsでページの表示速度を測った時、「レンダリングをブロックしている JavaScript/CSSを除去する」という改善案が表示されたことがありませんか？

恐らくWordPressを使ってサイトを運営しているならこの提案を一度は目にしているはずです。そしてこの項目が中々解消されずスコアが改善されず困っている人もいるかもしれません。

「レンダリングをブロックするJavaScript/CSSを除去」と聞くと難しそうな感じがしますが、確かにこの部分を改善するのは決まった方法がなく改善がとても難しいです。

ただWordPressを使っているならお決まりで読まれるスクリプトがあるのでその読み込み位置を変えることで少しはこの問題が解消することがあります。

そこでここではレンダリングをブロックするスクリプトの読み込み位置を変える方法について紹介します。

「レンダリングをブロック」の意味

PageSpeed Insightsはページの表示速度を0~100でスコア化して表示してくれるとても便利なツールです。

そしてこのツールはスコア化するだけでなく改善案も提案してくれるのですが、次のような「レンダリングをブロックしている・・(略)・・除去する」という提案を見かけることは多いと思います。

これはページを開いたときにサイトを表示するのに余計なjavascriptファイルやCSSファイルを読み込むのをやめればもっと表示速度が速くなるよという意味の提案です。

つまりファーストビューで読み込む必要のないファイルは最初に読み込む必要はなくページ全体の表示が終わった後に読み込めばいいのです。

ではページを開いたときに最初に読み込まれてしまうjavascriptやCSSとは何かというとWordPressでは次のようなファイルやコードのことを指します。

• jQuery
• WordPress共通のjavascript
• テーマで使われるJS・CSSファイル
• プラグインで使われるJS・CSSファイル
• 独自に定義したJS・CSSファイル
• どの他インライン化されたJS・CSSコード

この内テーマやプラグインで使われているものは後読みすることもできますが、デザインが崩れたり機能しなくなるリスクがあるので上級者向けです。

なのでここではテーマやプラグインに関係なく機能するjQueryやWordPress共通で使われJavaScriptを後読みする方法について紹介します。

スクリプトをフッターに移動させる方法

ではjQueryなどのスクリプトをヘッダー部分ではなくフッター部分(サイトの最後当たり)で読み込ませる方法について紹介します。

その手順は次の通り

まずメニューから「外観」ー＞「テーマの編集」を開きます。

テーマの編集画面が開くのでそこで今使っているテーマの「functions.php」というファイルを探して開いてください。

そしてfunctions.phpを開いたらファイルの最後に次のコードを追加します。

// ヘッダーで読み込まれるスクリプトをフッターに移動
function my_init_action() {
  remove_action('wp_head','wp_print_head_scripts',9);
  add_action('wp_footer','wp_print_head_scripts',5);
	
  remove_action('wp_head', 'print_emoji_detection_script', 7);
  remove_action('admin_print_scripts', 'print_emoji_detection_script');
  remove_action('wp_print_styles', 'print_emoji_styles' );

  remove_action( 'wp_head', 'wp_generator' );
  remove_action( 'wp_head', 'wlwmanifest_link' );
  remove_action( 'wp_head', 'rsd_link' );
  remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 );
}
add_action('init','my_init_action');

このコードを追加したら「ファイルを更新」ボタンを押して内容を保存してください。

コードについては詳しくは解説しませんが、このコードでスクリプトの読み込みを次のように制御しています。

• jQueryの読み込み位置をヘッダーからフッターへ変更(３～４行目)
• 絵文字を画像にするスクリプト・スタイルを無効化(６～８行目)
• WordPressの余計なスクリプトを停止(１０～１３行目)

他にも読み込み位置を変えたり、停止させることができるスクリプトはありますが影響を少なくするために変更は最低限だけにしています。

これでjQueryの読み込みがフッターで行われ不必要なスクリプトも実行されないので大幅に速度が改善することはないですが少しだけ表示速度も改善されると思います。

WordPressをさらに高速化するには

ここで紹介したスクリプトをフッターに移動または無効化する方法は劇的ではないもののそこそこ効果はあると思います。

しかしさらにWordPressを高速化するならこれ以外に次の方法を試すのもおすすめ

• 高スペックなサーバーへの乗り換え
• PHPのバージョンアップ
• gzip圧縮の有効化
• ブラウザのキャッシュの活用
• 記事内に使われる画像の圧縮
• 余計なプラグインを停止させる

もし「表示速度が遅すぎて困る！」という場合は最低限上で挙げたことを試してみれば必ず効果があるはずです。

これらの詳しいやり方については次の記事でもまとめて紹介しました。

WordPress高速化のために最低限すべき６つのこと【2019年最新】

一言でWordPress高速化と言っても様々な方法があって何をすればいいか分からない方も多いと思います。そこでここではWordPress高速化のために"最低限"しておいた方がいい６つのテクニックについて紹介していきます。

fukuro-press.com

2019-01-14 14:45

設定方法も手順通りにやれば全く難しくなく誰でもできることばかりなので是非お試しを！

まとめ

WordPressではjQueryなどのスクリプトがヘッダーで読み込まれるのでそれをフッターで後読みすれば少しは速度改善が見込めると思います。

他にも余計なスクリプトの読み込み位置を変えたり読み込ませない方法もありますが、それほど速度改善にはならないので最低限ここで紹介したことだけしておけば問題ないと思います。

以上レンダリングをブロックするスクリプトの読み込み位置を変える方法についてでした。