Webサイトの表示スピード測定と改善する10の方法【PageSpeedで97点を獲得】

Webサイトの表示スピード測定と改善する10の方法【PageSpeedで97点を獲得】

サイトのスピードを改善してSEOの評価を上げたいんだけど、どうやって改善すればいいですか?というか、そもそもどうやって計測すればいいの?

悩んでる人

ゆうが

こういった疑問に答えます!
こういった方向け
  • スピードを改善しなとどんなデメリットがあるの?
  • Webサイトの表示スピードを測る方法と、改善する方法って?

本記事ではWebサイトのスピードを測る方法から改善する方法をを解説していきます。

記事の信頼性としてぼくは実際にPageSpeedで「49点⇨97点」になり、その結果SEOで順位が上がりアクセスが3倍ほど増えたので信頼性は担保されていると思います。

Page Speed Insight

モバイル・PCともにスコアが高いので、割と信頼性はあるかと思います。

表示スピードを上げないといけない理由

表示スピードを上げないといけない理由

結論として3つあります。それが下記。

  • ①「コアウェブバイタル」がランキング要因になるから
  • ②「スピードアップデート」で表示速度がランキング要因になったから
  • ③直帰率が上がるから

それぞれ深掘って解説します。

理由①:「コアウェブバイタル」がランキング要因になるから

理由①:「コアウェブバイタル」がランキング要因になるから

そもそもコアウェブバイタルとはなにかを説明しますと、

  • 読み込み速度(LCP)
  • インタラクティブ性(FID)
  • 視覚的安定性(CLS)

これら3つの指標のことです。そしてこの中にあるLCPという読み込み速度も2021年5月頃にランキング要因になるので表示スピードを上げないといけないのです。

ゆうが

「いや、5月ってまだだしよくね?」って思うかもですけど、遅れてしまったら順位が下がる可能性もあるので早めに対策しましょう。
コアウェブバイタルについて詳しくは、こちらの記事がわかりやすいので読んでみてください。
コアウェブバイタル(Core Web Vitals)とは?SEOへの影響も解説!

理由②:「スピードアップデート」で表示速度がランキング要因になったから

理由②:「スピードアップデート」で表示速度がランキング要因になったから

こちらも同様に、Googleが2018年にスピードアップデートをして、表示速度がランキング要因になりました。

2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。

ページの読み込み速度をモバイル検索のランキング要素に使用します

つまり、シンプルにランキング要因になっているのでスピードを上げないといけないのです。


理由③:直帰率が上がるから

理由③:直帰率が上がるから

あと先程のランキング要因にくわえて表示スピードが遅いと直帰率が上がってしまいます。たとえばGoogleが行った表示速度がに関する調査では、下記のような結果を発表しています。

  • 読み込みが1秒から3秒になると、直帰率は32%上がる
  • 読み込みが1秒から5秒になると、直帰率は90%上がる
  • 読み込みが1秒から6秒になると、直帰率は106%上がる
  • 読み込みが1秒から10秒になると、直帰率は123%上がる

Find out how you stack up to new industry benchmarks for mobile page speed

上記の結果のように、表示スピードと直帰率の関係はかなり強いので改善する必要があります。しかも+で、更にランキング要因が加わるので表示スピードを上げないとマジでダメです。

つまり、まとめるとSEO的によくないのでスピードを上げようということです。

Webサイトの表示スピードを測定する方法

Webサイトの表示スピードを測定する方法

無料で計測できるツールとしては2つあります。それが下記。

  • PageSpeed Insight
  • Lighthouse

PageSpeed Insight

PageSpeed Insights

PageSpeed InsightはGoogle公式のツールで、モバイル・PCのページ速度を計測し、先程も説明したコアウェブバイタルの3つの指標も確認することができます。

100点満点中の何点とスコア形式で表示されるので視覚的にわかりやすいのが特徴です。しかも具体的な改善案を提案してくれるのでとってもありがたいツールです。

PageSpeed Insightの使い方

PageSpeed Insightの使い方

使い方はとても簡単でまずはPageSpeed Insightにアクセスして、つぎに「①:URLを入力」して「②:分析」をクリックすれば計測が始まります。

なんとこれだけで、自分のサイトのスピードがわかってしまいます。

PageSpeedスコア

ちなみにぼくの場合は、こんな感じでした。場合によっては数値が変わるようなので何回かやってみることをおすすめします。

スコアは90-100だとページの速度が速いので、なるべく90を目指すようにしてみてください。
※本記事を読めば90はとれます。


Lighthouse

Lighthouse

LighthouseはGoogleが提供しているChromeの拡張ツールで、ページ速度の他にも「アクセシビリティ・ベストプラクティス・SEO」をスコア表示してくれます。こちらも同様に100点満点中の何点と表示されるのでわかりやすいです。PageSpeed Insightの上位互換だと思えばOKです。

Lighthouseの使い方

Lighthouseの使い方

まずはLighthouseへアクセスして「Chromeに追加」をクリックしてください。

Lighthouseの使い方

追加されたら自分のサイトへいき、右上にあるパズルのアイコンから「Lighthouse」をクリックしてください。

Lighthouseの使い方

そして「Generate report」をクリックすれば、計測を開始してくれます。

Lighthouseのスコア

計測が終了するとそれぞれのスコアが表示されます。Lighthouseもずれがあるので何回かやることをおすすめします。

ゆうが

それでは、具体的なサイトのスピードを改善する方法を解説していきます。

Webサイトの表示スピードを改善する10の方法

サイトのスピードを改善する方法

具体的には、下記の10個をやることでサイトのスピードを改善することができます。

Webサイトの表示スピードを改善する10の方法
  1. HTML・CSS・JavaScriptを圧縮
  2. ファーストビューに広告を貼らない
  3. Googleアドセンスなどの広告を張りすぎない
  4. プラグインを10個以上入れない
  5. ブラウザキャッシュを有効化する
  6. 画像を100KB以下にする
  7. 画像をlazyloadする
  8. 画像の大きさを小さくする
  9. CSSの非同期読み込みをする
  10. 使用していないCSSを削除する

上から効果的な施策となっているので、ぜひ実践してみてください。
※事前にPageSpeed Insightsで改善する前の結果をとっておくと、変化がわかりやすいです。

改善策1:HTML・CSS・JavaScriptを圧縮

個人的に一番効果があったのはHTML・CSS・JavaScriptを圧縮することです。やはりこれらのコードはかなり処理が複雑だったり量が多いのでファイルが重くなったりして、読み込みにかなりに時間を食います。なので圧縮することでファイルを軽くしたりできるので表示スピードがかなり上がります。

Autoptimizeを使うと簡単に圧縮が可能

圧縮する方法としてWordPressプラグインのAutoptimizeを使うと簡単に圧縮が可能です。数回クリックをするだけで簡単にコードの圧縮が完了するので楽です。

ゆうが

WordPressのテーマによっては初めから圧縮が完了している場合があり、コードが二重になってしまう可能性があるので事前に調べてみてください。

詳しいやり方はこちらの記事がわかりやすいので参考にしてみてください。
Autoptimizeの使い方・設定方法を解説


改善策2:ファーストビューに広告を貼らない

つぎに効果があったのは、ファーストビューに広告を貼らないということです。

ファーストビューとは?
ファーストビューとは、記事の一番初めに見える部分のことでタイトルとかアイキャッチ画像の部分のこと
改善策2:ファーストビューに広告を貼らない

このファーストビューに広告を貼ってしまうと、シンプルに読み込みに時間がかかります。理由としてアドセンスなどの広告もJavaScriptで出来ているので読み込みに時間がかかってしまいます。なのでファーストビューに貼らないようにしましょう。

改善策2:ファーストビューに広告を貼らない

ちなみに広告を貼った場合だと、表示スピードが格段に落ちました。つまりこの結果からもわかる通りなので貼らないようにしましょう。


改善策3:Googleアドセンスなどの広告を張りすぎない

Googleアドセンスは先程も説明したようにJavaScriptで出来ているのでかなり重いです。つまりサイトにペタペタと貼ってしまうとマジで重くなります。たとえば下記の項目に当てはまったら広告は削除しましょう。

  • ファーストビューに貼っている
  • クリック率が低いのに貼っている
  • モバイルでもPCと同じ量の広告を貼っている

とくにモバイルでもPCと同じ量の広告を貼っていると、処理速度が遅いモバイル端末にとってはかなり時間がかかるのですぐに消しましょう。

ゆうが

マジで広告の量を少なくしただけで、「5秒⇨2秒」まで短縮されました。かなり効果てきめんです。

改善策4:プラグインを10個以上入れない

WordPressでプラグインを使う機会は多いと思いますが、入れすぎるとスピードが遅くなる原因にもなります。プラグインを10個以上入れているなら9個までに減らしましょう。理由として10個は客観的に見ても多いですし、プラグイン自体重いからです。

ぼくが入れてるプラグイン一覧

参考までにぼくが入れてるプラグインを紹介します。それが下記。

ぼくが入れているプラグイン
  1. All in One SEO Pack
  2. Google XML Sitemaps
  3. Classic Editor
  4. AddQuicktag
  5. BackWPup
  6. Broken Link Checker
  7. SiteGuard WP Plugin
  8. WordPress Ping Optimizer
  9. Autoptimize

マジでこれだけあれば十分です。詳しくはこちら【2021年最新】WordPressで必ず入れるべきプラグイン9選で解説しているので見てみてください。


改善策5:ブラウザキャッシュを有効化する

改善案5:ブラウザキャッシュを有効化する

ブラウザキャッシュを簡単に説明すると、初回のアクセスでは保存データ(キャッシュ)がないので読み込みに時間がかかってしまいます。ですが2回目のアクセスでは保存データ(キャッシュ)があるので表示速度が速くなるということです。

ブラウザキャッシュの設定

設定方法はレンタルサーバーの.htaccsessファイルの先頭に下記のコードを貼り付けます。

CODE
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

これでブラウザのキャッシュを有効化することができます。


改善策6:画像を100KB以下にする

画像はページの読み込みにかなり時間がかかります。とくに1MBなどの画像は死ぬほど重いので最低でも100KB以下に圧縮しましょう。

改善策6:画像を100KB以下にする

実際にPageSpeed Insightでも画像がどれだけ読み込みを遅くしているのかがわかります。

画像を100MBに圧縮する方法

圧縮する方法としては、JPEGminiやTinyPNGなどの圧縮ツールを使いましょう。具体的にはこちらブログに必須な無料ツール7選を紹介【プロブロガーも使っている】で解説しているので読んでみてください。


改善策7:画像をlazyloadする

改善策7:画像をlazyloadする

lazyloadとは画像の遅延読み込みのことで、ファーストビューの画像だけを読み込んでその他の画像はスクロールなどしてから読み込みをするという仕組みのことです。

lazyloadの実装はこちらの記事Lazy Loadで画像を遅延ロードする方法が大変わかりやすいので参考にしてみてください。やや難しい部分もあるのでそういった方はNative Lazyloadなどのプラグインで簡単に実装できます。


改善策8:画像の大きさを小さくする

これはどういうことかと言うとwidthheightの値を小さくするということです。そうすることで画像の読み込みが速くなります。

改善策8:画像の大きさを小さくする

たとえばぼくの場合ですと、こんな感じでスマホの時の画像を小さくしてるので読み込みがかなり速いです。


改善策9:CSSの非同期読み込みをする

CSS非同期読み込みとは、「1の処理が終わったら2を実行する」みたいな感じでCSSを読み込んでくれることを指します。これを実装することでサイトの表示スピードが上がります。こちらはPageSpeed Insightのほうでも優先度の高い改善項目となっているのでぜひやりましょう。

CSSを非同期読み込みする手順

具体的な実装手順は、下記のコードをfooter.phpに貼り付ければOKです。

code
requestAnimationFrame(function(e) {
  e = document.createElement('link');
  e.rel = 'stylesheet';
  e.href = 'ここにcssのパス';
  document.head.appendChild(e);
});

 

このコードをfooter.php</body>の直上にコピペすればOKです。
参考CSSを非同期で読み込む方法【多分これが1番いいはず!】


改善策10:使用していないCSSを削除する

そもそもページを読み込むときにはCSSも全て読み込みます。つまりその時に使用していないCSSも読み込みます。その結果、わずかですが時間を食うので意外とやっかいです。なので使用していないCSSは削除しましょう。

不要なCSSを見つけて削除する方法

不要なCSSを見つけて削除する方法

やり方としては、自分のサイトを開き右クリックを押して「検証→縦の・・・→More tools→Coverage」を選択します。そしたら、「click the record button ● to start capturing coverage.」とあるのでクリックします。

不要なCSSを見つけて削除する方法

そうすると下記の画像のように、赤いグラフとCSSが出てくるのでそれが使用していない不要なCSSです。あとは、URLをみつつ不要なCSSをテーマから削除すればOKです。

ゆうが

以上、サイトのスピードを改善する10の方法でした!これだけやればサイトのスピードは爆速になりますよ。

まとめ:Webサイトの表示スピード測定と改善する10の方法

Webサイトの表示スピードを改善する10方法

本記事のまとめ
  1. HTML・CSS・JavaScriptを圧縮
  2. ファーストビューに広告を貼らない
  3. Googleアドセンスなどの広告を張りすぎない
  4. プラグインを10個以上入れない
  5. ブラウザキャッシュを有効化する
  6. 画像を100KB以下にする
  7. 画像をlazyloadする
  8. 画像の大きさを小さくする
  9. CSSの非同期読み込みをする
  10. 使用していないCSSを削除する

上記の全てをやることで、かなり改善されて爆速になります。

それでは今回は以上です!
今後もSEO分野でためになる情報を発信していきます。

最後までみてくださり、本当にありがとうございました!