WordPressで作成・運営しているサイトのページ表示速度が遅い場合の改善方法をご説明します。
ページの表示速度を確認する方法
まず現状の速度がどのくらいなのか、おおよその目安を示してくれるサイトで確認してみましょう。
改善点を修正してからまた確認して速度が上がっていればOK。
もちろんWordPressで作られたサイト以外も測定できるので、普通のホームページを持っている方も試しに使ってみて下さい。
PageSpeed Insights
サイトの表示速度と修正点を判定してくれるGoogleのデベロッパーツール。
※WordPressのテーマを使用してサイトを作成している場合、テーマのPHPファイルの内容によってはPageSpeed Insightsでエラーが出て測定できないことがあります。
Lighthouse returned error: NO_FCP. ページを読み込む際のトレースの記録中にエラーが発生しました。もう一度 Lighthouse を実行してください。（NO_FCP）
特に最近妙にエラーが良く出るので（うちのサイトも普通に測定できる時もあればダメな時もあります）こうしたエラーが出た場合はエラー内容に従ってファイルを編集するか、一旦PageSpeed Insightsでの測定を諦めて下記のGTMatrixで測定してみてください。
GTMatrix
Googleとyahoo、それぞれの評価基準を基にした表示速度の評価を出してくれます。
どこが宜しくないかも教えてくれるので便利。
改善方法を試す前に
プラグインのインストールやPHPファイルの編集など、WordPressに何か変更を加える前にまずは現状のデータを保存することをお忘れなく！
エラーが起きて、自力で修正できなかった時にはバックアップファイルを使って元の状態に戻せるようにしておきましょう。
・ご参考に
▶【プラグイン】バックアップ保存用BackWPupのインストールと設定
▶【プラグイン】バックアップ保存用BackWPupの使い方（活用編）
画像を後から読み込むプラグイン・Lazy Loaderを使う
閲覧者がサイトにアクセスしてくれて、一番最初にブラウザ画面に表示される範囲をファーストビューと呼びます。
見ている人の目に最初に映る範囲、ということで、企業サイトでは特に、ファーストビューに大切なお知らせや問い合わせ電話番号、商品宣伝やサービス内容のアピールなどを載せていることが多いです。
例えば弊社サイトのTOPページのファーストビューは大体この辺り。
ファーストビューの表示が速いほど、閲覧している人は『おっ、見出しや要約がすぐ表示されて分かりやすい。このページをちゃんと読んでみようかな』と思ってくれるかもしれませんし、Googleなどの検索エンジンのロボットも『ファーストビューの表示速度が速くて良い感じ。プラスポイント！』と評価してくれるかもしれません。
このファーストビューや、その後に下にスクロールしてまた画面に表示される範囲において、できるだけ表示速度を上げるために、画像読込を制御するプラグインがあります。
ここでご紹介する画像読込制御のプラグイン・Lazy Loaderは画像の読込を後回しにするプラグインです。
ちょっとでもファーストビューの表示を速くして閲覧者さんのストレスを減らし、その後は下にスクロールするに従って画像を表示させます。
閲覧していない下部の関連画像や広告画像などは読み込まないためその分、本文部分の表示速度も上がります。
Lazy Loaderのインストール
WordPress管理画面のプラグイン【新規追加】⇒『Lazy Loader』を検索⇒【今すぐインストール】⇒【有効化】。
※注意点※
当ブログのように、画像を多く使って手順説明などを行っているサイトの場合は画像の読込を後回しにすると逆に閲覧者にとって不便になってしまいます。
そのため当ブログでは画像読込遅延のプラグインは入れていません。
インストールした後で実際の表示を確認してみて、やっぱりちょっと自分のサイトには合わないかな～と思われた場合はプラグインの削除を行ってください。
また、このプラグイン以外にも画像読込制御のプラグインはたくさんあるので、自サイトに合うものを見つけるために色々と試してみるのも良いかと思います。
Lazy Loaderの設定方法
管理画面の【設定】⇒【メディア】を開くとメディア設定画面の下部に『Lazy Loader』の設定項目が追加されています。
設定を変更したら、一番下の【保存】を忘れずにクリックしてください。
以下でチェックマークを入れているのは『とりあえず有効にしといた方が良さげ』と思う私のおすすめ項目です。
キャッシュ制御プラグインを使う
サイトの表示速度が遅い場合、原因の一つとして、これまでの投稿ページのキャッシュデータや、自動保存されている下書きのデータなどがどんどん溜まって読み込みに時間がかかっていることがあります。
キャッシュ制御のプラグインを利用して、不要なキャッシュデータを削除し、読み込むデータをすっきりさせることで表示速度を速くします。
【プラグイン】 キャッシュ制御 WP Fastest Cacheの設定と使い方
投稿記事などのページキャッシュや、CSS・JavaScriptのファイルキャッシュを削除できるプラグイン。
【プラグイン】WP-Optimizeでデータベース最適化＆高速化
データベース内のキャッシュを制御して最適化してくれるプラグイン。
WP Fastest CacheとWP-Optimizeはそれぞれ制御するキャッシュの内容が異なるため、同時にこの2つを入れても競合することはありません。
レンダリングに関する記述
PageSpeed Insightsなどのページ速度測定ツールで、問題点として
『レンダリングをブロックしている JavaScript/CSSの除外』
『レンダリングを妨げるリソースの除外』
といったレンダリングについての項目が表示される場合。
これは
headタグ内にあるJavaScriptやCSSファイルを読み込み終わったら
bodyタグにあるメインコンテンツを表示する（レンダリングする）ことになっているので、
JavaScriptやCSSファイルの読込が遅いとレンダリングも困るんだよねー
というような意味です。
そのため、head内で読み込んでいるJavaScriptやCSSファイルをfooterで読み込む（最後に回して、先にメインコンテンツを表示させる）ことによってページ表示速度を上げることができます。
WordPress管理画面の外観⇒テーマエディター⇒function.phpの末尾に以下のコードを追加します。
// ←このスラッシュ2本は『この行はメモ書きなので見なかったことにして』という線
// 実際に記述する時は削除して頂いて大丈夫です。
// ヘッダーから外したり、フッターに移動したりしますよ、という宣言
function move_footer(){
// ここから下はとりあえず書いとくといいやつ4つ
remove_action(‘wp_head’, ‘wp_print_scripts’);
remove_action(‘wp_head’, ‘wp_print_head_scripts’,9);
remove_action(‘wp_head’, ‘wp_enqueue_scripts’, 1);
remove_action(‘wp_head’, ‘wp_generator’ );//WordPressのバージョン等を表示（removeで表示しなくなる）
// ここから下は自分のWordPress環境によるので吟味してね。
// 普段自分がWordPress運営で使っていない、不要な項目は以下に記述したままで。
// 必要な機能である場合は以下からその機能に関する記述を削除してください。
remove_action(‘wp_head’, ‘wlwmanifest_link’ );//Microsoftのエディター
remove_action(‘wp_head’, ‘rsd_link’ );//Really Simple Discovery・外部ツールでWordPress管理
remove_action(‘wp_head’, ‘parent_post_rel_link’); // ページネーション＝ページ送り機能
remove_action(‘wp_head’, ‘feed_links’, 2 ); //RSSフィード
remove_action(‘wp_head’, ‘feed_links_extra’, 3 ); //RSSフィード
remove_action(‘wp_head’, ‘print_emoji_detection_script’, 7);//絵文字表示用スクリプト
remove_action(‘wp_print_styles’, ‘print_emoji_styles’);//絵文字表示用スクリプト// 一番上でヘッダーから外したやつをフッターに移動
add_action(‘wp_footer’, ‘wp_print_scripts’, 5);
add_action(‘wp_footer’, ‘wp_print_head_scripts’, 5);
add_action(‘wp_footer’, ‘wp_enqueue_scripts’, 5);
}
add_action(‘wp_enqueue_scripts’, ‘move_footer’);
