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の読み込み位置をヘッダーからフッターへ変更(3~4行目)
- 絵文字を画像にするスクリプト・スタイルを無効化(6~8行目)
- WordPressの余計なスクリプトを停止(10~13行目)
他にも読み込み位置を変えたり、停止させることができるスクリプトはありますが影響を少なくするために変更は最低限だけにしています。
これでjQueryの読み込みがフッターで行われ、不必要なスクリプトも実行されません。大幅ではないものの少しだけ表示速度も改善されるはずです。
WordPressをさらに高速化するには
今紹介したスクリプトを移動・無効化する方法はWP高速化にまあまあ効果があります。
しかし、さらにWordPressを高速化したいなら次の方法もかなり有効です。(特に PHPのバージョンアップ と gzip圧縮の有効化 )
これらの詳しいやり方については次の記事でもまとめて紹介しました。
設定方法も手順通りにやれば全く難しくないので是非お試しあれ
また、ページ表示速度というのは使用するレンタルサーバーにも左右されます。
私自身の経験から言えば、無料サーバーは極力使わない方がいいですね。次記事でも書いたみたいに無料サーバーでヒヤッとする体験をしたこともあります。
実際の体験談 : ブログ運営を無料サーバーでするリスクを痛感した2つの恐怖体験
なので長くブログを続けるならWordPressに特化したサーバーを選ぶ方が後々のブログ運営が楽になります。
ちなみに手ごろな価格で始めるなら さくらサーバー または ロリポップ 、
速度重視なら wpxサーバー または エックスサーバー が最適です。
何が最適なのかはブログの運営規模で変わるので、そこは良く吟味してください。
まとめ
WordPressではjQueryなどのスクリプトがヘッダーで読み込まれるのでそれをフッターで後読みすれば少しは速度改善が見込めると思います。
以上、レンダリングを妨げるスクリプトを削除・移動させる方法についてでした。
フク郎
最新記事 by フク郎 (全て見る)
- Windowsでマウスカーソル付きでスクショを取る裏ワザ - 11月 21, 2019
- ココナラ初出品で2件購入&1万円稼ぐまでにしたこと - 11月 12, 2019
- ブログ収益化が難しい理由…脱アドセンスのためのマネタイズ方法 - 10月 29, 2019