ブログの表示速度改善法【3ステップでスコア20→88】初心者向け

タイトルその他

ブロガーのみなさん、こんにちは。突然ですが、以下のことで悩んでいませんか?

  • 自分のブログの表示速度、遅い…。
  • 直帰率や離脱率が高いのはサイトスピードが遅いのが原因?
  • 「PageSpeed Insights」のスコアが悪い…orz
  • 表示速度が遅いと、SEOにもアドセンスにも不利って聞きました。
  • モバイルの表示速度が壊滅的数字だ。

結論からいうと、サイトが表示されるまで3秒以上かかると大半のユーザーは離脱してしまいます。

せっかく丹精込めて書いた記事が1文字も読まれずに離脱されるのは悲しいですよね…!

ここでは、「初心者向け」「すぐに実践できる」方法を3ステップにまとめて順番に解説していきます!

ヤマハタ
ヤマハタ

私はこのカンタンな3ステップでスコアが20から88にまで改善されました!

すべて実践すれば、私のように高スコアも夢ではありません。

スポンサーリンク

その1 「Google PageSpeed Insights」で現状を知る

PageSpeed Insightsスコア
PageSpeed Insightsスコア改善

まず、はじめのステップはあなたのブログの現状を知ることからはじめましょう!

PageSpeed Insights(ページスピードインサイト)はGoogleが無料で提供している「サイトの表示速度を測定・評価する分析ツール」です。

使い方も簡単で、多くのサイト運営者が利用しており、Googleが運営しているという事で初心者でも安心して利用できます。

スコアを既に把握している方はその2「使用していない JavaScript の削減」の対策まで飛ばしてお読みください。

Google PageSpeed Insights スコアの調べ方

PageSpeed Insights
PageSpeed Insights

スコアの調べ方はとっても簡単です。

PageSpeed Insights(ページスピードインサイト)にアクセスします。

上記の「ウェブページのURLを入力」のところに診断したいページのURLをコピペして「分析」をクリックするだけです。

しばらく待つと下記のような画面が表示されます。

サイトパフォーマンス
サイトパフォーマンス

今回診断したのは、検索上位をとれているこの記事です↓↓↓
【2022夏】三田市の祭り・花火・プール・イベント情報まとめ|さんだらいふ

文字数約5000字、写真も比較的多めに使っていて、ユーザーがよく見てくれるページです。
※ちなみに公開翌日に検索1位を取れた記事でもあります。

改善後のこちらのページのスコアは88。サイト表示までにかかる時間は2.6秒ということです。

そして初心者の方は「トップページ」と「一番アクセスがあるページ」の2ページを診断することをオススメします。

余裕のある方は主力の複数ページも診断しましょう!

ヤマハタ
ヤマハタ

トップページが速くても、一番読まれている記事が遅いと離脱率は改善されませんよね。逆もまた同じです!

サイトが表示されるまでが3秒未満、スコア40点後半以上を目指します。

サイトパフォーマンスのスコアに関してはモバイルで40点後半以上を目指します

デスクトップは高スコアを取りやすく、近年はモバイルからの訪問が大半を占めているのが理由です。

ここでいう「スコア」とは順位そのものの事です。

100点なら上位1%、50点なら世界全体のサイトのちょうど半分より優れているという認識です。

そして、海外のIPアドレスから計測されるため日本という時点で少しスコアは下がります。

日本のサイトでは40点が中央値と言われていますので、人並みのサイトスピードを目指すのであれば40点後半あれば十分という結果になります。

また、SEO的にも40点台がキープできていれば不利になる事は少ないといわれています。

・極端に表示速度の遅いページは検索順位を落とす。
※スコア40点以下、表示速度3秒以上であればSEO的に不利な評価をつけられしまう可能性があること。直帰率と離脱率の上昇からSEOでマイナスになってしまう。

・コンテンツの質が同程度であれば、スコアをもとに順位を決める
※大前提はコンテンツの質であり、同程度の品質の記事であればスコアが優れているページを上位に表示する。
つまり、コンテンツの質が大前提で、表示速度などは二の次という考え方で良さそうです。

ヤマハタ
ヤマハタ

スコア40点台以下は改善の必要あり!それ以上はそこまで神経質にならなくても良いという声も…。

表示速度に関しては「First Contentful Paint」と表示されています。

こちらも、速ければ速いに越したことはないが「3秒以内であればそこまで神経質になる必要なない」と考えます。

詳しくは下記のサイトが大変参考になります。

スポンサーリンク

その2「使用していない JavaScript の削減」の対策

使用していない JavaScript の削減
使用していない JavaScript の削減

さて、該当ページの今の状態を知れたと思います。スコア40点以下・表示速度3秒以上であれば今から解説する実際にスコア改善のための対策を行っていきましょう。

上記は改善後の画像です。

スコア20点台のときは「使用していない JavaScript の削減」が一番上に来ていました。

「Flying Scripts」プラグインを使って改善

Flying Scripts
Flying Scripts プラグイン

残念ながら、Google PageSpeed Insightsにはページの表示速度を遅くしている原因を教えてくれてもそれの改善策までは教えてくれません。

では、「使用していない JavaScript の削減」とは実際に何をすれば良いのでしょうか。

具体的には、Flying Scriptsプラグインを使ってJavaScriptの実行を遅らせます。

これによってサイトパフォーマンスが劇的に改善されます。

不要なJavaScriptの実行を遅らせることで、サイトの表示を優先的に行ってもらいます!

ヤマハタ
ヤマハタ

時間差で JavaScriptが実行されるだけであり、サイトに悪影響はほとんどありません。

ワードプレスの編集画面→「プラグイン」→「新規追加」→「Flying Scripts」で検索。

上記画像のオレンジ色に「JS」と書いたプラグインをインストール、有効化します。

Flying Scriptsの設定方法

プラグインの有効化が完了したら、

  1. ワードプレスの編集画面
  2. 設定
  3. Flying Scripts

の順でFlying Scriptsの設定画面を開きます。

Flying Scripts設定画面
Flying Scripts設定画面

上記画像赤色で囲んだ「Include Keywords」にGoogle PageSpeed Insightsで表示された「使用していない JavaScript の削減」の詳細のURLを入力します。

Flying Scripts settings
Flying Scripts settings

※こちらの画像赤丸部分。

Include Keywordsとは…キーワードを含めるという意味のため、この画像であれば「recaptcha__en.js」と入力すればOKです。

Timeoutとは…実行を遅らせる秒数です。ここはわからなければ変更しなくて良いです。

Disable on pagesとは…除外するJavaScriptをここに入力します。
※初心者は何も入れないことをおすすめします。

すべて終われば「Save Changes」で変更を保存してください。

ヤマハタ
ヤマハタ

保存したらGoogle PageSpeed Insightsで再診断してみてください!問題なければスコアが改善されていると思います!

スポンサーリンク

その3「次世代フォーマットでの画像の配信」の改善

次世代フォーマットでの画像
次世代フォーマットでの画像とは

次世代フォーマットでの画像とは…新しい画像の拡張子のことです。

現在、サイトで使用される画像のフォーマット(拡張子)としてはJPEG、GIF、PNGが主流です。

JPEG、GIF、PNGは初心者の方でもご存知の方、聞いたことくらいある方が大半でしょう。

しかし、googleは新しいフォーマット(拡張子)であるJPEG 2000、JPEG XR、WebPがページの表示速度向上に繋がると推奨しています。

要するに、次世代のフォーマットに画像を変換すると画像のサイズがかなり削減できるよ!ということ。

ヤマハタ
ヤマハタ

難しいと感じる方は解説を飛ばしてやり方だけ実践すればOK

次世代フォーマットを選ぶならWebPがおすすめ。

次世代フォーマットでの画像はブラウザによって対応しているものが違います。

初心者が選ぶならWebP一択といったところでしょうか。

WebP(ウェッピー)はGoogleが開発した静止画のフォーマット(拡張子)です。

Googleが開発したということでchromeは完全対応しています。

IEは未対応との情報ですが、IEは2022年6月でサポートが終了しており気にすることはありません。

また、2022年現在Safariでの対応もスタートしたことから、chrome・iOSsafariなどほとんどのブラウザで対応しているWebPにしておけば間違いないと考えます。

詳しい内容を知りたい方は下記サイトをご覧ください。

WebPへの変換は「squoosh」で

squooshはGoogleが開発した、ブラウザ上で画像の圧縮できる無料Webツールです。

使い方は、squooshへアクセスしてブラウザに画像を直接ドラッグし、あとは細かい設定をするだけ。

圧縮前と圧縮後が一目でわかり、圧縮によりどの程度サイズが削減できているかも一目瞭然で使いやすいです。

Squoosh
Squoosh

ブラウザに圧縮したい画像をドラッグすると、上記のような画面になります。

向かって左が圧縮前、右が圧縮後の見た目です。「◀▶」のレバーを左右に移動できます。

右下のタブからWebPを選択します。

Squoosh
Squoosh

右下をご覧ください、160KBのPNGファイルが12.5KBのWebPファイルに変換されました。圧縮率は89%です。

あとはダウンロードして完了です。

まとめ

初心者向け!サイトスピードを改善する方法を解説させてもらいました!

要点をまとめると以下の通りです。

  • サイトの表示速度が悪いとSEOに大きく影響を与える。
  • ページの表示に3秒以上かかると直帰率と離脱率が大幅に増える。
  • PageSpeed Insightsのスコア40点後半以上を目指そう!
  • 50点から上は大した影響はない。コンテンツの質向上を優先するべき!
  • 「使用していない JavaScript の削減」はFlying Scriptsプラグインで簡単改善。
  • 次世代フォーマットはWebPがおすすめ。
  • 「squoosh」でブラウザ上でカンタンに画像ファイルを圧縮できます。
  • サイトスピード診断は「トップページandアクセスの多いページ」で行おう!

アドセンスの合格がまだのブロガーさんはこちらもあわせてお読みください。

運営者情報
この記事を書いた人
ヤマハタ

兵庫県三田市在住。
結婚を機に三田市に住み始める。
地元の方々の「小さな悩み」を解決するために日々情報発信しています!
ラーメン好き・グルメ好き・ツーリング好き・アウトドア好き
三田市を盛り上げていきたい!!

「うちの店を取材してほしい!」「○○の記事を書いてほしい!」「三田市のあれを調べてほしい…。」などがあれば喜んで対応しますので、どんなことでもお気軽にご相談ください。

ヤマハタをフォローする

にほんブログ村 地域生活(街) 関西ブログへ

その他
ヤマハタをフォローする
さんだらいふ

コメント

タイトルとURLをコピーしました