サイトの読み込みが遅い?サイトスピードの調べ方と表示速度の上げ方を解説

サイトの読み込みが遅いときの表示速度の上げ方

  • サイト(ブログ)の読み込み速度が遅い気がする…
  • 表示速度ってどうやってあげるの?

 

すもベビ

こんな疑問にすもベビが答えます。

 

読み込み(表示)速度が遅いとユーザーにも検索エンジンにも嫌われ、あなたのブログに深刻な悪影響を与えます。

この記事で分かること
  • サイトの読み込み速度が遅いときの影響
  • サイトスピードの調べ方
  • 初心者でも簡単な表示速度の上げ方

 

サイトの読み込み(表示)速度が遅いとどうなる?

サイトの読み込みが遅いとどうなる?

サイトの読み込み(表示)速度が遅いと2つの深刻な影響が生じます。

  • ユーザーに嫌われる
  • Googleの検索エンジンに嫌われる

 

ユーザビリティーに影響する

読みたいと思って開いた記事がなかなか開かずイライラした経験ってありませんか。

 

サイトの読み込み速度が遅いと、多くのユーザーはストレスを感じて記事を閉じます。

閉じないにしても、目当てのページだけ見てサイトを離れます。

 

サイトの読み込み速度とユーザーの行動については、次のような分析結果があります。

  • ユーザーの満足度が低下
  • サイトへのアクセス数が低下して離脱率が上昇
  • 読み込み時間が1秒伸びるとCVR(コンバージョン率)が7%低下
  • 読み込み完了までに3秒以上かかった場合、CVRが38%してユーザーの53%が直帰

【出展】

How Loading Time Affects Your Bottom Line|Kissmetrics Blog

Find out how you stack up to new industry benchmarks for mobile page speed|think with google

 

すもベビ

CVR(Conversion Rateの略)というのは、サイトへのアクセス数のうち何らかのアクション(商品購入など)を起こした人の割合です。

 

このように、サイトの読み込みが遅いとユーザーの満足度に悪影響が出ます。

近年サイト運営においてSEOと同レベルで重要視されているSXOの観点からも、読み込みの遅さは致命的な問題です。

 

SXOとは?SEOとの違いとSXOの3つの要素「U-R-A」を分かりやすく解説

 

Googleの検索エンジンに嫌われる

Googleは、2018年7月にスピードアップデートの導入を発表しています。

スピードアップデートというのは、ザックリ言うと「モバイルページの読み込み速度が極端に遅いページに適用されるGoogleのアルゴリズム」です。

 

詳しい内容は、Googleウェブマスター向け公式ブログに書かれています。

要約すると次のとおりです。

  • ページ読み込み速度の評価対象がPCだけからモバイル検索にも拡大される
  • 読み込み速度が極端に遅いページがアップデートの影響を受ける
  • アップデートの影響で評価が下がっても、改善策を講じれば段階的に評価を取り戻せる
  • アップデートの影響を受けるクエリの割合は小さい
  • アップデートの影響を受けるかどうかはページの技術と無関係
  • コンテンツの内容が魅力的でクエリと関連性が高い場合、読み込み速度に関わらず高評価される可能性がある

参考:Googleウェブマスター向け公式ブログ

 

サイトの読み込み速度がユーザーのストレスになるほど遅い場合、Googleの検索エンジンにも嫌われて検索順位を下げられるリスクがあります。

ブログで稼ぎたいと思っている人にとっては非常に深刻な問題です。

 

サイトスピードの調べ方

サイトスピードの調べ方

サイトスピードをチェックする方法はたくさんありますが、Google PageSpeed Insightsを使うのが最も手軽です。

Google PageSpeed Insightsは、Googleが提供する無料ツールです。

 

トップページにアクセスし、サイトスピードを調べたい記事のURLを入力します。

page speed insights

 

サイトの読み込み速度は100点満点で、モバイルとパソコンでそれぞれ結果が表示されます。

【すもブロのデータ(モバイル)】

page speed insights

 

ページスピードを速くするために修正すべきポイントも教えてくれるので、対策も講じやすいです。

page speed insights

 

すもベビ

他にもサイトスピードがチェックできるツールは複数ありますが、初心者のうちはGoogle PageSpeed Insightsだけで十分です。

【その他のツール】

  • GTmetrix(英語のみ)
  • Google Analytics(計測方法が特殊)

 

サイトの表示速度を改善する方法

サイトの表示速度を改善する方法

サイトの表示速度が遅い場合に、初心者でも簡単にできる対策は2つあります。

  • 画像が重い
  • JavascriptやCSSファイルが重い

 

画像が重いのを改善してサイトの表示速度を上げる

サイトの中には様々なコンテンツが含まれます。

例えば、文字、画像、動画、アニメーション、スライドショーなどは全てサイトのコンテンツです。

一つひとつのコンテンツの容量が大きいとサイトの表示速度は遅くなります。

 

ブログの場合、特に画像コンテンツの大きさが影響していることが多いです。

 

画像の容量を減らす

画像の容量を減らすには6つのステップを踏みます。

  1. PageSpeed Insightsでサイトスピードをチェック
  2. 「改善できる項目」の「適切なサイズの画像」に表示された画像を確認する
  3. WordPressから②で表示された画像をダウンロード
  4. ③に表示された画像をI LOVE IMGでリサイズ
  5. ④でリサイズした画像をtiny pngで圧縮
  6. WordPressにアップロードして元画像と差し替える

 

画像のリサイズと圧縮の方法については、下の記事で詳しく解説しています。

ブログ画像のリサイズ&容量圧縮:「WordPressの読み込み速度が遅い」悩みを速攻で解消

 

すもベビ

画像の圧縮だけしている人もいますが、元のサイズが大きいと圧縮だけでは十分に容量が減りません。

圧縮の前にリサイズで画像サイズを小さくする作業も大切です。

 

修正すべき画像が多い場合

PageSpeed Insightsの「改善できる項目」の「適切なサイズの画像」に大量の画像が表示された場合、上のやり方では手間がかかります。

そこで、EWWW Image Optimizerというプラグインを使ってアップロード済みの画像を一括で圧縮できる方法も書いておきます。

 

まずは、EWWW Image Optimizerをインストールして有効化します。

通常のプラグインと同じ方法なので手順は省略しています。

 

有効化したら、①メディア、②一般最適化、③最適化されていない画像をスキャンするの順番で押します。

EWWW Image Optimizer

 

すると、最適化できる画像数が表示されるので「〇点の画像を最適化」を押します。

EWWW Image Optimizer

 

一括最適化が終了すると下の画面が表示されます。

EWWW Image Optimizer

 

WordPress内にある画像を一括で圧縮する方法なので、画像のリサイズはできません。

そのため画像の容量を小さくできる程度は限られています。

でも、修正を要する画像がたくさんあり、修正に書ける時間がない場合には有効な方法です。

 

JavascriptやCSSファイルが重いのを改善してサイトの表示速度を上げる

JavascriptやCSSファイルは、記載内容(行数)が多いほど容量が増えます。

次の無料ツールを使うと、余計な改行を減らして容量を小さくできます。

 

注意

JavascriptやCSSに問題が生じると修正が大変です。

 

無料ツールを使うかどうかは自己責任でお願いします。

 

また、問題が生じたときに元に戻せるよう、元のファイルの内容は必ず保存しておきましょう。

 

その他の改善方法

実は、サイトの表示速度が遅いときの対策は他にもたくさんあります。

ザッと思いつくだけでも次のとおり。

  • AMP化
  • 遅延読み込み
  • gzip圧縮を活用する
  • キャッシュを利用する
  • 使わない外部ファイルを消す
  • HTTPリクエストの回数を減らす

 

どれもサイトスピードを改善するのに有効な方法です。

でも、やり方を間違えるとサイトが表示されなくなったりデザインが崩れたりするリスクがあります。

サイト設計に詳しければ修復もできますが、専門知識がないとうまく修復できず、サイトが壊れるリスクもあります。

 

そのため初心者のうちは、まず画像とJavascript・CSSファイルの容量を小さくする作業をしましょう。

作業をしてもサイトの表示速度が遅いままの場合に、上に挙げた方法を検索して実践してください。

 

サイトの読み込みが遅いときに表示速度を上げる方法のまとめ

サイトの読み込み速度が遅いと、ユーザーの満足度が下がります。

Googleの検索エンジンにも悪い評価をされて検索順位が下がるリスクがあります。

そのため、こまめにサイトスピードをチェックし、遅いなら対策を講じることが大切です。

 

  • 画像の容量を小さくする
  • Javascript・CSSファイルを小さくする

この2つはブログ初心者でも簡単にできるので、読み込みが遅いと感じたら試してみてください。