Webサイトの表示スピード測定と改善する10の方法【PageSpeedで99点を獲得】
サイトのスピードを改善してSEOの評価を上げたいんだけど、どうやって改善すればいいですか？というか、そもそもどうやって計測すればいいの？
こういった疑問に答えます！
こんにちはゆうが(@yuuuugablog)です。
本記事ではWebサイトのスピードを測る方法から改善する方法をを解説していきます。
記事の信頼性としてぼくは実際にPageSpeedで「49点⇨99点」になり、その結果SEOで順位が上がりアクセスが3倍ほど増えたので信頼性は担保されていると思います。
↑モバイル・PCともにスコアが高いので、割と信頼性はあるかと思います。
では、前置きはこれくらいにして早速解説していきます。
表示スピードを上げないといけない理由
そもそもとして、なぜ表示スピードを上げないといけないのかを解説します。結論として3つあります。それが下記。
①「コアウェブバイタル」がランキング要因になるから
②「スピードアップデート」で表示速度がランキング要因になったから
③直帰率が上がるから
理由①：「コアウェブバイタル」がランキング要因になるから
そもそもコアウェブバイタルとはなにかを説明しますと、
読み込み速度(LCP)
インタラクティブ性(FID)
視覚的安定性(CLS)
これら3つの指標のことです。そしてこの中にあるLCPという読み込み速度も2021年5月頃にランキング要因になるので表示スピードを上げないといけないのです。
コアウェブバイタルについて詳しくは、こちらの記事がわかりやすいので読んでみてください。
>>コアウェブバイタル（Core Web Vitals）とは？SEOへの影響も解説！
理由②：「スピードアップデート」で表示速度がランキング要因になったから
こちらも同様に、Googleが2018年にスピードアップデートをして、表示速度がランキング要因になりました。以下Google公式より引用
2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。
Google ウェブマスター向け公式ブログ [JA] : ページの読み込み速度をモバイル検索のランキング要素に使用します
つまり、シンプルにランキング要因になっているのでスピードを上げないといけないのです。
理由③：直帰率が上がるから
あと先程のランキング要因にくわえて表示スピードが遅いと直帰率が上がってしまいます。たとえば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サイトの表示スピードを測定する方法
無料で計測できるツールとしては2つあります。それが下記。
・PageSpeed Insight
・Lighthouse
PageSpeed Insight
PageSpeed InsightはGoogle公式のツールで、モバイル・PCのページ速度を計測し、先程も説明したコアウェブバイタルの3つの指標も確認することができます。
100点満点中の何点とスコア形式で表示されるので視覚的にわかりやすいのが特徴です。しかも具体的な改善案を提案してくれるのでとってもありがたいツールです。
✅ PageSpeed Insightの使い方
使い方はとても簡単でまずはPageSpeed Insightにアクセスして「①：URLを入力」「②：分析」をクリックすれば計測が始まります。
なんとこれだけで、自分のサイトのスピードがわかってしまいます。ちなみにぼくの場合は、こんな感じでした。
場合によっては数値が変わるようなので何回かやってみることをおすすめします。
スコアは90-100だとページの速度が速いので、なるべく90を目指すようにしてみてください。
※本記事を読めば90はとれます。
Lighthouse
LighthouseはGoogleが提供しているChromeの拡張ツールで、ページ速度の他にも「アクセシビリティ・ベストプラクティス・SEO」をスコア表示してくれます。こちらも同様に100点満点中の何点と表示されるのでわかりやすいです。PageSpeed Insightの上位互換だと思えばOKです。
✅ Lighthouseの使い方
まずはLighthouseへアクセスして「Chromeに追加」をクリックしてください。
追加されたら自分のサイトへいき、右上にあるパズルのアイコンから「Lighthouse」をクリックしてください。
そして「Generate report」をクリックすれば、計測を開始してくれます。
計測が終了するとそれぞれのスコアが表示されます。Lighthouseもずれがあるので何回かやることをおすすめします。
それでは、具体的なサイトのスピードを改善する方法を解説していきます。
Webサイトの表示スピードを改善する10の方法
具体的には、下記の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のテーマによっては初めから圧縮が完了している場合があり、コードが二重になってしまう可能性があるので事前に調べてみてください。
改善策2：ファーストビューに広告を貼らない
つぎに効果があったのは、ファーストビューに広告を貼らないということです。ファーストビューとは、記事の一番初めに見える部分のことでタイトルとかアイキャッチ画像の部分のこと
このファーストビューに広告を貼ってしまうと、シンプルに読み込みに時間がかかります。理由としてアドセンスなどの広告もJavaScriptで出来ているので読み込みに時間がかかってしまいます。なのでファーストビューに貼らないようにしましょう。
ちなみに広告を貼った場合だと、表示スピードが格段に落ちました。つまりこの結果からもわかる通りなので貼らないようにしましょう。
改善策3：Googleアドセンスなどの広告を張りすぎない
Googleアドセンスは先程も説明したようにJavaScriptで出来ているのでかなり重いです。つまりサイトにペタペタと貼ってしまうとマジで重くなります。たとえば下記の項目に当てはまったら広告は削除しましょう。
・ファーストビューに貼っている
・クリック率が低いのに貼っている
・モバイルでもPCと同じ量の広告を貼っている
とくにモバイルでもPCと同じ量の広告を貼っていると、処理速度が遅いモバイル端末にとってはかなり時間がかかるのですぐに消しましょう。
マジで広告の量を少なくしただけで、「5秒⇨2秒」まで短縮されました。かなり効果てきめんです。
改善策4：プラグインを10個以上入れない
WordPressでプラグインを使う機会は多いと思いますが、入れすぎるとスピードが遅くなる原因にもなります。プラグインを10個以上入れているなら9個までに減らしましょう。理由として10個は客観的に見ても多いですし、プラグイン自体重いからです。
✅ ぼくやプロも入れてるプラグイン一覧
参考までにぼくやプロが入れてるプラグインを紹介します。それが下記。
・All in One SEO Pack
・Google XML Sitemaps
・Classic Editor
・AddQuicktag
・BackWPup
・Broken Link Checker
・SiteGuard WP Plugin
・WordPress Ping Optimizer
・Autoptimize
マジでこれだけあれば十分です。
詳しくはこちらWordPressで必ず入れるべきプラグイン9選【プロも使ってる】で解説しているので見てみてください。
改善策5：ブラウザキャッシュを有効化する
ブラウザキャッシュを簡単に説明すると、初回のアクセスでは保存データ(キャッシュ)がないので読み込みに時間がかかってしまいます。ですが2回目のアクセスでは保存データ(キャッシュ)があるので表示速度が速くなるということです。
改善策6：画像を100KB以下にする
画像はページの読み込みにかなり時間がかかります。とくに1MBなどの画像は死ぬほど重いので最低でも100KB以下に圧縮しましょう。
実際にPageSpeed Insightでも画像がどれだけ読み込みを遅くしているのかがわかります。
✅ 画像を100KB以下に圧縮する方法
JPEGminiやTinypngを使うと簡単に圧縮できます。
改善策7：画像をlazyloadする
lazyloadとは画像の遅延読み込みのことで、ファーストビューの画像だけを読み込んでその他の画像はスクロールなどしてから読み込みをするという仕組みのことです。
lazyloadの実装はこちらの記事Lazy Loadで画像を遅延ロードする方法が大変わかりやすいので参考にしてみてください。やや難しい部分もあるのでそういった方はNative Lazyloadなどのプラグインで簡単に実装できます。
改善策8：画像の大きさを小さくする
これはどういうことかと言うとwidthとheightの値を小さくするということです。そうすることで画像の読み込みが速くなります。
たとえばぼくの場合ですと、こんな感じでスマホの時の画像を小さくしてるので読み込みがかなり速いです。
改善策9：CSSの非同期読み込みをする
CSS非同期読み込みとは、「1の処理が終わったら2を実行する」みたいな感じでCSSを読み込んでくれることを指します。これを実装することでサイトの表示スピードが上がります。こちらはPageSpeed Insightのほうでも優先度の高い改善項目となっているのでぜひやりましょう。
✅ CSSを非同期読み込みする手順
具体的な実装手順は、下記のコードをfooter.phpに貼り付ければOKです。
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を見つけて削除する方法
やり方としては、自分のサイトを開き右クリックを押して「検証→縦の・・・→More tools→Coverage」を選択します。そしたら、「click the record button ● to start capturing coverage.」とあるのでクリックします。
そうすると、赤いグラフとCSSが出てくるのでそれが使用していない不要なCSSです。あとは、URLをみつつ不要なCSSをテーマから削除すればOKです。
以上、サイトのスピードを改善する10の方法でした！これだけやればサイトのスピードは爆速になりますよ。
まとめ：Webサイトの表示スピード測定と改善する10の方法
1. HTML・CSS・JavaScriptを圧縮
2. ファーストビューに広告を貼らない
3. Googleアドセンスなどの広告を張りすぎない
4. プラグインを10個以上入れない
5. ブラウザキャッシュを有効化する
6. 画像を100KB以下にする
7. 画像をlazyloadする
8. 画像の大きさを小さくする
9. CSSの非同期読み込みをする
10. 使用していないCSSを削除する
上記の全てをやることで、かなり改善されて爆速になります。
それでは今回は以上です！
今後もSEO分野でためになる情報を発信していきます。
最後までみてくださり、本当にありがとうございました！
↓↓↓ゆうがブログもよろしくお願いします。🙇♂️
この記事が気に入ったらサポートをしてみませんか？