サイトの表示速度を改善する｜プラグインを入れる前に見る3か所
「表示速度が遅いと言われた。高速化のプラグインを入れるべき？」と迷っていませんか？
高速化の記事はプラグインの導入手順が中心なので、ほかに打つ手がないように感じるのも無理はありません。
この記事では、プラグインの前に見る3か所、点数と実測値の違い、直せる範囲を解説します。
サイトの速度を気にしている方が、何を直すかを測ってから決められるようになります。
表示速度を上げても、順位は大きく動かない
最初に前提を押さえておきます。表示速度は検索の評価に使われますが、単独で順位を大きく動かす要素ではありません。
Google検索は、最も関連性の高い内容を表示するよう設計されています。ページの体験が平均を下回っていても、その方針は変わりません。速さより先に、内容が検索の意図に合っているかが問われます。そのうえで、速度をどこまで直すかを決めてください。
検索で使われるのは、Core Web Vitals
Googleが検索の評価に使う速度の指標は、Core Web Vitalsの3つです。表示の速さ、操作への反応、要素のずれにくさを測ります。
役に立つ内容が多数並ぶ場面では、ページの体験の良さが順位に効いてきます。つまり、速度は内容が同程度のときの差として効くものです。基準を満たしたあとは、それ以上の上積みを期待しすぎないでください。
それでも直すのは、読む人が待たないから
順位が動かなくても、遅いページは読まれる前に閉じられます。開いた瞬間に白い画面が続けば、戻るボタンを押されてしまいます。
直す理由は、検索エンジンのためではなく、来た人に読んでもらうためです。とくにスマホで通信の遅い環境から開かれると、差が大きく出ます。目的がはっきりすれば、どこまで直すかの判断もしやすくなります。
点数を目標にしない
PageSpeed Insightsには、0から100の点数が出ます。この点数は、Core Web Vitalsの判定とは別物です。
Googleも、SEOのためだけに満点を狙うのは、有効な時間の使い方ではないとしています。3つの指標が良好に収まったら、そこで切り上げてください。点数を上げる作業より、記事を1本増やすほうが流入につながることも多いものです。
表示速度で、プラグインを入れる前に見る3か所
高速化のプラグインを入れる前に、確かめる場所があります。多くの場合、ここを直すだけで足ります。
プラグインはそれ自体がファイルを読み込むので、入れるほど重くなる面も否定できません。原因が分からないまま入れると、かえって遅くなることさえあります。まずは次の3か所を、上から順に見てください。どれも、プラグインを入れずに確かめられます。
① 画像の形式と寸法
最も効きやすいのが、画像です。PNGやJPEGのまま載せている画像をWebPに変換するだけで、容量が大きく下がります。
当サイトの図解は、1枚あたり40KBから110KBほどのWebPで載せています。あわせて、画像に幅と高さが書かれているかも確かめてください。書かれていないと、読み込みが終わるまで場所が空かず、下の要素が押し下げられます。
② 読み込んでいるファイルの数
F12で開発者ツールを開き、ネットワークのタブを選んでページを読み込み直します。読み込まれたファイルが、順に一覧で並びます。
使っていない機能のファイルが混ざっていないかを見てください。フォームのプラグインが、フォームのない記事でも読み込まれている例はよくあります。ファイル名にプラグインの名前が入っていることが多いので、どの機能のものかは見分けられます。
当サイトも、入れていたプラグイン6本をすべて削除しました。いまは、テーマのファイルのほかに読み込むものはありません。必要な機能は、テーマの側で用意しています。
③ サーバーの応答時間
ブラウザがページを求めてから、最初のデータが返るまでの時間です。ここが長ければ、画像をどれだけ軽くしても全体は速くなりません。
切り分けには、1行だけ書いたHTMLファイルをサーバーに置いて開く方法があります。そのファイルすら遅いなら、原因はサーバーの側です。テーマやプラグインを見ても改善しないので、サーバーの設定や契約を見直してください。
表示速度の点数と実測値は、別物
PageSpeed Insightsには、2種類の数字が出ます。この違いを知らないと、直す必要のない箇所に手を入れることになります。
上の欄は実際の利用者から集めた実測値で、下の欄は機械で1回だけ測った参考値です。点数は、下の参考値から計算されています。判断に使うのは、上の実測値のほうです。点数が低いだけで、慌てる必要はありません。
点数は、測るたびに変わる
点数は、測定用の環境で1回だけ読み込んだ結果をもとにしています。いくつかの指標に重みを付けた加重平均です。
Chromeの解説では、点数が揺れる原因の多くは測るときの条件の違いです。広告の出し分けや、回線の状態などが挙げられています。同じページを続けて測っても、同じ点数になるとは限りません。細かい上下を追いかける意味は、ほとんどありません。
判断に使うのは、実測値
画面の上のほうにある実測値の欄には、直近28日間に実際の利用者から集めたデータが出ます。3つの指標が、良好、改善が必要、不良のどれかで示されます。
点数が40点でも、3つの指標がすべて良好なら手を入れる必要はありません。逆に、点数が高くても実測値が不良なら直す必要があります。測定用の環境は、実際の利用者の体験とは条件が違うからです。
サイト全体はSearch Consoleで見る
サイト全体の傾向を見るなら、Search Consoleが向いています。開くのは、ウェブに関する主な指標のレポートです。
モバイルとPCに分かれて、似たページのグループごとに評価が出ます。不良のグループがあれば、その代表のページから確かめてください。アクセスの少ないサイトで実測値が出ない場合は、明らかな問題だけを参考値で直せば十分です。
プラグインで速くなる範囲、ならない範囲
高速化のプラグインが役に立つ場面もあります。ただし、入れれば速くなるというものではありません。
効く場面と、かえって原因になる場面があります。どちらに当たるかは、サイトの規模やサーバーの機能によって変わります。入れたら必ず前後で測り、数字で効果を確かめるようにしてください。測らずに入れたままにするのが、一番の失敗です。
キャッシュが効く場面
キャッシュは、アクセスのたびに組み立てていたページを、結果だけ保存して使い回す仕組みです。訪れる人が多いサイトでは、効果が出やすくなります。
ただし、レンタルサーバーの側がすでにキャッシュの機能を持っていることもあります。入れる前に、サーバーの管理画面を確かめてください。二重に効かせると、更新が反映されないといった不具合の原因になります。
プラグインが原因になる場面
プラグインは、1つ増えるごとに専用のJavaScriptやCSSが読み込まれることがあります。使っていないページでも、読み込まれる場合は少なくありません。
高速化のために入れたプラグインが、それ自体の読み込みで効果を打ち消していることもあります。当サイトはプラグインを使わず、必要な機能はテーマの中に書いています。記事のページで読み込むのは、CSSが2つとJavaScriptが1つだけです。
入れる前と後で、同じページを測る
プラグインを入れる前と後で、同じページを同じ条件で測ります。数値が良くなっていなければ、外してください。
入れたままにして、効いていると思い込むのが一番危険です。測るときは、管理画面にログインしていないシークレットウィンドウを使ってください。ログイン中は管理用のファイルも読み込まれ、利用者と違う状態を測ることになります。
プラグインなしで表示速度を直せる4つ
プラグインを入れなくても、直せることは意外と多くあります。必要なのは、無料の画像の変換ツールと、テーマを編集する手間だけです。難しい作業は含まれていません。
どれも一度済ませれば、その後は手がかかりません。効果の大きい順に並べているので、上から順に試してください。数値は、1つ直すごとに測り直すと効果が分かります。
① 画像をWebPに変換する
無料の変換ツールにPNGやJPEGを読み込ませて、WebPで書き出すだけです。見た目はほとんど変わらず、容量が下がります。
変換したら、メディアライブラリに入れ直します。既存の画像を差し替える場合は、ファイル名を変えてください。同じ名前だと、古い画像が残り続けることがあります。写真の多いサイトほど、この作業だけで体感が変わります。
② 画像に寸法を書く
本文に入れた画像には、WordPressが幅と高さを自動で補います。入っていない場合は、画像を最適化するプラグインが取り除いていることがあります。
テーマのファイルに直接書いた画像には、自動では入りません。ヘッダーのロゴや、トップページの画像が当てはまります。対象は数枚なので、一度書けば済みます。ページのソースを開き、画像のタグに幅と高さがあるかを見てください。
③ 使っていない標準の機能を止める
WordPressは、標準でいくつかの機能のファイルを読み込みます。絵文字を表示するためのスクリプトや、埋め込み用の仕組みなどです。
使っていなければ、テーマの設定ファイルで読み込みを止められます。1つは小さくても、積み上がると差になります。ただし、止める前に何のための機能かを確かめてください。当サイトでは、絵文字のスクリプトを読み込んでいません。
④ 外部の埋め込みを見直す
動画や地図、SNSの投稿の埋め込みは、外部のファイルを読み込みます。自分のサイトをいくら軽くしても、ここは速くなりません。
本当に必要なページだけに置いてください。トップページに地図を埋め込んでいるなら、それが問い合わせにつながっているかを考えます。必要な場合は、画面に入ったときに読み込む指定にすると、最初の表示への影響を抑えられます。
表示速度の改善に関するよくある質問
PageSpeed Insightsの点数は、何点を目指せばいいですか
点数そのものを目標にする必要はありません。見るべきなのは、上の欄の実測値で、3つの指標が良好かどうかです。
点数は測るたびに変わり、実際の利用者の体験とも条件が違います。3つの指標が良好なら、点数が低くても手を入れなくて構いません。空いた時間は、内容を良くするほうに使ってください。点数は、改善の手がかりを探す道具として使うのが向いています。
スマホだけ遅いのはなぜですか
スマホは、PCより処理の性能が低く、回線も遅い場面が多いためです。同じページでも、スマホのほうが時間がかかります。
PageSpeed Insightsのモバイルの参考値は、遅い端末と回線を想定して測られます。PCで問題がなくても、スマホで不良になるのは珍しくありません。画像の大きさと、JavaScriptの量から見直してください。
レンタルサーバーを変えれば、速くなりますか
原因がサーバーの応答なら、速くなります。原因が画像やファイルの数なら、変えても大きくは変わりません。
1行だけのHTMLファイルを置いて開き、それすら遅いなら、サーバーを疑ってください。移転の前に、管理画面のキャッシュや、PHPのバージョンの設定を確かめる価値もあります。移転は手間がかかるので、切り分けてから決めるのが安全です。
直したのに、実測値が変わらないのはなぜですか
実測値は直近28日間の集計なので、直した直後には反映されません。古いデータが入れ替わるまで、数週間かかります。
その間は、PageSpeed Insightsの参考値や開発者ツールで効果を確かめてください。手元で速くなっていれば、あとは集計が追いつくのを待つだけです。Search Consoleで修正の確認を始めておくと、結果を追いやすくなります。
高速化のプラグインは、入れないほうがいいですか
一律に入れないほうがいい、とは言えません。訪れる人が多く、サーバーにキャッシュの機能がない場合は、効くこともあります。
大事なのは、原因を確かめてから入れることと、入れた前後で測ることです。効果がなければ、外してください。プラグインが増えるほど、更新や不具合の確認にかかる手間も増える点を忘れないでください。
まとめ
表示速度を上げても、順位は大きく動きません。直す理由は、来た人に待たずに読んでもらうためです。
プラグインを入れる前に、画像、ファイルの数、サーバーの応答時間を順に見てください。判断には点数ではなく実測値を使い、3つの指標が良好ならそこで切り上げます。
まずはPageSpeed Insightsを開き、上の欄の実測値を確かめてください。