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をさらに高速化するには

今紹介したスクリプトを移動・無効化する方法はWP高速化にまあまあ効果があります。

しかし、さらにWordPressを高速化したいなら次の方法もかなり有効です。（特に PHPのバージョンアップ と gzip圧縮の有効化 ）

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

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

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

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

fukuro-press.com

2020-01-25 17:11

設定方法も手順通りにやれば全く難しくないので是非お試しあれ

また、ページ表示速度というのは使用するレンタルサーバーにも左右されます。

私自身の経験から言えば、無料サーバーは極力使わない方がいいですね。次記事でも書いたみたいに無料サーバーでヒヤッとする体験をしたこともあります。

実際の体験談 : ブログ運営を無料サーバーでするリスクを痛感した２つの恐怖体験

なので長くブログを続けるならWordPressに特化したサーバーを選ぶ方が後々のブログ運営が楽になります。

ちなみに手ごろな価格で始めるなら　さくらサーバー　または　ロリポップ　、
速度重視なら　wpxサーバー　または　エックスサーバー　が最適です。

何が最適なのかはブログの運営規模で変わるので、そこは良く吟味してください。

まとめ

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

以上、レンダリングを妨げるスクリプトを削除・移動させる方法についてでした。