サイトの表示速度を改善する｜プラグインを入れる前に見る3か所
「表示速度が遅いと言われたが、プラグインを入れるべきか判断がつかない」と迷っていませんか？
高速化の記事はプラグインの導入手順ばかりですが、入れるほど読み込むファイルが増えて重くなります。
この記事では、速度と順位の関係、プラグインを入れる前に見る3か所、点数と実測値の違い、プラグインなしで直せる範囲までを解説します。
何を直せばよいかを、測ってから決められるようになります。
表示速度を上げても順位は大きく動かない
最初に前提を書きます。表示速度は検索の評価に使われますが、単独で順位を大きく動かす要素ではありません。
検索の評価に使われる範囲は限られる
Googleが評価に使うのはCore Web Vitalsの3指標です。表示の速さ、操作への反応、要素のずれにくさ。
これらは基準を満たしているかどうかで見られます。基準内であれば、そこからさらに速くしても評価の上積みはほとんどありません。
Googleも、内容の質のほうが影響が大きいと明言しています。速度は同程度の記事が並んだときに差が出る程度のものです。
それでも直す理由は離脱にある
順位が動かなくても、遅ければ読者は待ちません。開いた瞬間に白い画面が続けば、戻るボタンを押されます。
直す理由は検索エンジンのためではなく、来た人に読んでもらうためです。目的が違えば、どこまで直すかの判断も変わります。
とくにスマートフォンからの流入では影響が大きくなります。通信の遅い環境で開いた場合、数秒の差が離脱につながります。
点数を目標にしない
PageSpeed Insightsには0から100の点数が出ます。多くの記事が「50点以上を目指そう」と書きますが、この点数はCore Web Vitalsの3指標とは別物です。
複数の項目を合成した値なので、3指標がすべて良好でも点数が低いことがあります。逆も起こります。点数を100に近づける作業は、際限なく続けられます。
90点を95点にする作業と、記事を1本増やす作業。多くの場合、後者のほうが流入につながります。3指標が良好に収まった時点で切り上げてください。
表示速度でプラグインを入れる前に見る3か所
高速化のプラグインを入れる前に、確認する場所があります。多くの場合、ここを直すだけで足ります。
画像の形式と寸法
最も効くのがここです。PNGやJPEGのまま載せている画像をWebPに変換するだけで、容量が大きく下がります。
当サイトでは、アイキャッチを1,777KBのPNGから72KBのWebPに変換しました。見た目はほとんど変わらず、容量だけが1割以下になっています。
あわせて、幅と高さが書かれているかを確認します。書かれていないと、読み込みが終わるまで場所が確保されず、下の要素が押し下げられます。
読み込んでいるファイルの数
ページのソースを開くか、開発者ツールのネットワークのタブを見ます。読み込まれているCSSとJavaScriptの一覧が出ます。
使っていない機能のファイルが混ざっていないか確認してください。フォームのプラグインが、フォームのない記事ページでも読み込まれている。調べてみると、この状態はよくあります。
確認の手順は、F12で開発者ツールを開き、ネットワークのタブを選んでページを再読み込みするだけです。読み込まれた順に一覧で並びます。
ファイル名にプラグインの名前が入っていることが多いので、どの機能のものかは判別できます。使っていないものが並んでいれば、そこが削れる余地です。
サーバーの応答時間
ブラウザがリクエストを送ってから、最初のデータが返るまでの時間です。ここが長ければ、画像をどれだけ軽くしても始まりません。
切り分けの方法があります。「test」とだけ書いた1行のHTMLファイルをサーバーに置き、そのURLを開いて応答時間を測ります。数十ミリ秒で返れば正常です。
この1行のファイルすら遅いなら、原因はサーバー側です。テーマやプラグインをいくら見ても改善しません。
目安は、この1行のファイルが200ミリ秒を超えるかどうかです。200msを超えるようなら、サーバー側に余裕がありません。プランの変更か移転の検討に入ります。
確認が終わったら、置いたファイルは削除してください。残しておいても実害はありませんが、不要なファイルは管理の対象を増やします。
SELF CHECK
3か所を見て、どこに問題がありましたか。
診断結果
最初に手を付ける場所です
無料の変換ツールでWebPにするだけで、容量が1割以下になることがあります。当サイトでは1,777KBのPNGが72KBになりました。
あわせて幅と高さが書かれているかも確認します。この2つで、多くのサイトは体感が変わります。
診断結果
プラグインを整理します
使っていないプラグインを停止し、消せるものは削除します。停止しただけでは読み込みが残る場合があります。
特定のページでしか使わないものは、そのページだけで読み込む設定にできないかを確認してください。フォームや予約機能が該当します。
診断結果
サーバー側の問題です
テーマやプラグインを見ても改善しません。画像を軽くしても、その前の段階で待たされています。
PHPのバージョンが古くないか、共用プランで同居しているサイトの負荷を受けていないかを確認します。200ミリ秒を大きく超えるなら、プランの変更か移転を検討します。
診断結果
実測値を確認してください
3か所に問題がないなら、そもそも直す必要がない可能性があります。PageSpeed Insightsの実測値で、3指標が良好かを見ます。
良好なら作業は不要です。点数が低くても気にする必要はありません。その時間は記事を書くほうに使ってください。
表示速度の実測値と点数は別物
PageSpeed Insightsには2種類の数字が出ます。この違いを理解しないと、直す必要のない箇所を直すことになります。
点数は測るたびに変わる
点数は、測定用の環境で1回だけ読み込んだ結果です。回線の状態や測るタイミングで数値が変わります。
同じページを続けて2回測っても、同じ点数にはなりません。10点以上動くこともあります。そのため、細かい上下を追いかける意味はありません。
判断に使うのは実測値
画面の上のほうに「実際のユーザーの環境で評価する」という欄があります。ここに出るのが実測値です。
直近28日間に実際にそのページを開いた利用者から集めたデータで、3指標が良好・改善が必要・不良のどれかで表示されます。
判断に使うのはこちらです。点数が40点でも、3指標がすべて良好なら手を入れる必要はありません。
逆に、点数が90点でも実測値が不良なら直す必要があります。測定用の環境は回線も端末も良い条件なので、実際の利用者の体験とは離れます。
どこを見れば出るか
PageSpeed InsightsとSearch Consoleの2か所で見られます。ページ単位で見るなら前者、サイト全体の傾向を見るなら後者です。
実測値が表示されない場合、集計に必要な件数が集まっていません。アクセスの少ないサイトではよくあります。その段階では参考値を目安に、明らかな問題だけ直します。
Search Consoleでは「ウェブに関する主な指標」を開きます。モバイルとPCそれぞれで、良好・改善が必要・不良の3区分に分かれた件数が表示されます。不良のURLがあれば、そのグループから対象のページを確認します。
ページ単位で細かく見るならPageSpeed Insights、どのページ群に問題があるかを探すならSearch Console。使い分けます。
プラグインで表示速度が改善する範囲、しない範囲
高速化のプラグインが有効な場面もあります。ただし入れれば速くなるものではありません。
キャッシュが効く場面
アクセスのたびにデータベースへ問い合わせている処理を、結果だけ保存して使い回す仕組みです。訪問者が多いサイトでは効果があります。
ただし、レンタルサーバー側がすでにキャッシュの機能を持っていることがあります。入れる前に、サーバーの管理画面を確認してください。二重に効かせると、更新が反映されない不具合が起きます。
逆に、月に数百人程度のアクセスなら、キャッシュを入れても体感は変わりません。効くのは同時にアクセスが集中する場面です。
プラグインが原因になる場面
プラグインは1つ増えるごとに、専用のJavaScriptとCSSが読み込まれます。使っていないページでも読み込まれることが多い。
高速化のために入れたプラグインが、それ自体の読み込みで相殺されている。この状態は珍しくありません。
当サイトはプラグインを6本すべて削除し、フロント側で読み込むプラグインのファイルを0本にしました。削った代わりに、必要な機能はテーマの中に書いています。
入れる前に測っておく
プラグインを入れる前と後で、同じページを測ります。数値が改善していなければ、外します。
入れっぱなしにして「効いているはず」と考えるのが最も危険です。測っていない施策は、やっていないのと変わりません。
測るときは、シークレットウィンドウを使ってください。ログイン中の管理画面用のスクリプトが読み込まれると、実際の利用者の状態と違うものを測ることになります。
プラグインなしで表示速度を直せる4つ
4つとも、テーマの編集だけで完結します。無料の変換ツールがあれば、追加のプラグインは要りません。
画像をWebPに変換する
無料の変換ツールで済みます。PNGやJPEGを読み込ませて、WebPで書き出すだけです。
変換したら、WordPressのメディアライブラリに入れ直します。既存の画像を差し替える場合は、ファイル名を変えてください。同名だとブラウザのキャッシュで古い画像が残り続けます。
変換の目安は、1枚あたり200KB以下です。アイキャッチのように画面いっぱいに表示する画像でも、この範囲に収まります。
写真を多く載せるサイトでは、この作業だけで体感が変わります。10枚の画像が各1MBなら、合計10MBを読み込んでいることになります。
寸法を書く
本文に挿入した画像には、WordPressが幅と高さを自動で書き込みます。入っていない場合は、画像を最適化するプラグインが取り除いている可能性があります。
テーマのファイルに直接書いた画像は自動では入りません。ヘッダーのロゴ、トップページの装飾画像が該当します。対象は数枚なので、一度入れれば済みます。
確認は簡単です。記事のページを開き、右クリックからページのソースを表示します。画像のタグを探し、widthとheightが書かれているかを見ます。書かれていなければ、原因はそこです。
使っていない機能を消す
WordPressは標準でいくつかの機能を読み込みます。絵文字の変換用スクリプト、埋め込み用のスクリプト、REST APIのリンク情報など。
使っていなければ、テーマの設定ファイルで読み込みを止められます。1つあたりは小さくても、積み上がると差になります。
ただし、消す前にどの機能かを確認してください。絵文字のスクリプトを止めると、記事内の絵文字が環境によって表示されなくなることがあります。
埋め込みを見直す
YouTubeの動画、Googleマップ、SNSの投稿。これらは外部のファイルを読み込むため、自サイトの改善だけでは速くなりません。
本当に必要なページだけに置きます。トップページに地図を埋め込んでいる場合、それが問い合わせにつながっているかを確認してください。
どうしても必要なら、遅延して読み込む形にします。画面に入ったときだけ読み込む設定にすれば、最初の表示には影響しません。ただし、最初の画面にある要素には使えません。
まとめ
速度を上げても順位は大きく動きません。直す理由は、来た人に読んでもらうためです。
プラグインを入れる前に、画像、ファイルの数、サーバーの応答時間を順に見ます。多くの場合、ここを直すだけで足ります。
まずPageSpeed Insightsを開き、実測値の3指標を見るところから始まります。すべて良好なら、点数がいくつでも作業は不要です。その時間は記事を書くほうに使ってください。
