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

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

恐らくWordPressを使っているなら、この提案を一度は目にしているはずです。そしてこの項目が改善されず困っている人もいるかもしれません。

「レンダリングをブロックするJavaScript/CSSを除去」は改善が難しいです。

でもWordPressを使っているなら、プラグイン・テーマのJavaScript読み込み位置を変えることでこの問題が解消することがあります。

そこで、「レンダリングをブロック」を解決する方法 をまとめました。

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

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

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

これはページ表示速度について javascript・CSSファイルの読み込み位置を工夫すればもっと速くなるよ という意味の提案です。

つまりファーストビューで必要のないファイル。

それらは ページ表示が終わった後に読み込めばいい だけです。

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

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

これらJavaScriptファイルはページ表示後に後読みも可能なんです。

その具体的な対策を２パートに分けて紹介していきます。

対策１．jQueryなどのスクリプトをフッターに移動

まずは１つめの対策から。

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の読み込みがフッターで行われ、不必要なスクリプトも実行されません。大幅ではないものの少しだけ表示速度も改善されるはずです。

対策２．JavaScript読込のscriptタグにdeferを付ける

２つ目はもっと効果的な対策です。

普通はページ表示前に色々なJavaScriptが読み込まれるのですが、scriptタグに defer="defer"を付けること で高速読込 できます。

↓ defer属性について超分かりやすい記事。

参考記事 : <script> タグに async / defer を付けた場合のタイミング

ここでは説明を省き、WPで defer="defer" を付ける方法だけ紹介します。

そのやり方は次の２ステップ。

１．各JavaScriptの登録ハンドル名を調べる

まず大前提として・・・

• プラグインから読込されるJSファイル
• テーマから読み込みされるJSファイル
• WordPressで読込される必須JSファイル

これらには 固有のハンドル名 が付いてます。

※ 例 : jQuery なら "jquery" がハンドル名

このハンドル名がdefer属性付与に必須なので、
次のようなPHPスクリプトでハンドル名を調べてください。

/// 全登録スクリプトのハンドル名を調べる
function my_inspect_scripts() {
	if (!is_user_logged_in()) { return; }
	global $wp_scripts;
	$handles = array();
	foreach ( $wp_scripts->queue as $handle ) {
		array_push($handles, $handle);
	}
	echo implode(' , ', $handles);
}
add_action( 'wp_print_scripts', 'my_inspect_scripts' );

テーマの functions.php に追加すればOK

自分の環境では、こういう出力になりました。

jquery , comment-reply , simplicity-js , simplicity-child-js , pt-cv-content-views-script , cookie-law-info-script , drawit-iframe-js , ts_fab_js , toc-front , wpp-js , wpdreams-ajaxsearchlite , q2w3_fixed_widget , jquery-fancybox , jquery-easing , lazysizes , lazysizes-unveilhooks , lazysizes-aspectratio , prism-script , wp-embed , wp_rp_edit_related_posts_js , quicktags_drawit

各ハンドル名がコンマで区切られてますよね？

これらがプラグイン・テーマのJSハンドル名です。

あと調べ終わったら、追加コードは消してください。

２．各プラグインのJS読込にdefer="defer"を付与

ここからが肝心な所。

調べたハンドル名を使い、各プラグイン・テーマのJavaScriptファイル読込scriptタグに対して defer="defer" を付与していきます。

そのためのコード例が次です。

/// 特定プラグインのscriptタグにdefer="defer"を追加
add_filter('script_loader_tag', 'my_add_defer_to_script', 10, 2);
function my_add_defer_to_script($tag, $handle) {
	$scripts_to_defer = array(
		'wpdreams-ajaxsearchlite',
		'cookie-law-info-script',
		'pt-cv-content-views-script',
		'drawit-iframe-js',
		'toc-front'
		/// ハンドル名が続く...
	);
	foreach($scripts_to_defer as $defer_script) {
		if ($defer_script === $handle) {
			return str_replace(
				' src', ' defer="defer" src', $tag);
		}
	}
	return $tag;
}

ハイライトした部分に注目！

ココは先ほど調べたハンドル名に置き換えてください。

これでかなりの速度改善が期待できるはず。
当ブログもこの対策で表示速度が大幅アップしました。

※ ただしPHPコードの追加は慎重に・・・

もし不安なら次サービスで相談も受け付けてます。

WordPressのトラブル解決相談始めました！

WordPressが真っ白になった、デザインが崩れた・・・そんなWordPressのトラブル解決相談ができるサービスをココナラで始めました！もしWPのブログ運営で困った時は是非ご利用ください。お得な割引情報もお知らせ・・・

fukuro-press.com

2020-12-11 16:19

ちなみに作業代行のご依頼もＯＫ。

いつでもお気軽に何でもご相談ください。

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

今紹介した方法はWP高速化にかなり効果があります。

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

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

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

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

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

fukuro-press.com

2021-01-04 08:21

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

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

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

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

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

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

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

まとめ

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

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