みなさんこんにちは。
合同会社リードの金子です。
今回はホームページでの表示スピードの測定と改善の仕方を紹介していきたいと思います。
そもそも、何故！？表示スピードを測定して改善をしないといけないのか？
多少の表示スピードが遅れても問題ないでしょう。
なんて思っていると、かなりヤバイことになりますよ。
ホームページの表示スピードに影響をしてくるのはSEO評価を悪くするばかりか、そもそもの閲覧者まで逃してしまう事になります。
Googleが独自に調査したところ、表示速度が3秒を超えると半分以上が離脱をするというかなりショックなデータがあります。
わずか3秒で50％以上の閲覧者がホームページを見ることなく去っていく。。。
これってものすごく勿体ないですよね～・・・
2秒以内・・・・直帰率9％
3秒以上・・・直帰率50％
6秒以上・・・直帰率90％
2秒と3秒の差があまりにも激しく、ここがホームページを見てもらえるかどうかの分岐点になっているのが分かると思います。
つまり、サイト表示スピードは2秒以内を目指さないといけない！
ここを超えてしまうと極端に離脱率が多くなるので即改善したいポイントです。
例えるなら、店舗に入ろうとウロウロしているお客さんが結局は店内に入らずに去っていく。
もしもこの状況をリアルな現場で目撃していたら、店舗オーナーさんであれば「入り口に何か問題があるのでは？」という感じで何かしら原因を追究すると思います。
しかしホームページでは、そんな半分以上の閲覧者が去っているかどうかは調べない限り分かりません。なので、多くの人が表示速度を甘く見ている傾向があります。
実は私もその中の1人で「表示速度？まあ大丈夫でしょ！」なんていう感じでした(笑)
だからこそ、自分のホームページでは一体どのくらいの表示速度なのか？を最低でも知っておく必要があります。
目次
ホームページの表示スピードを測定して改善できる無料ツール
では、ホームページの表示スピードの大切さは分かってもらえたと思いますので、実際にどのように表示スピードを測定して改善していけばいいのかを紹介していきたいと思います。
費用がかかるような特別なツールは必要ありません、Googleが提供している「PageSpeed Insights」というサイトがあるのでそちらを使用すれば無料で測定可能です。
PageSpeed Insightsで表示スピードの測定の仕方
PageSpeed Insightsのサイトにいくと、上画像のような画面が出てきますので、ここの空欄に自分のホームページURLを入力して「分析」をクリックします。
しばらく待つと、ホームページの表示速度が出てきます。
左上に「モバイル」と「パソコン」という切り替えボタンがありますので、ここは両方とも確認した方がいいですがモバイルの方をメインとして確認した方が良いです。
何故なら今やスマホでの観覧率は70％以上にもなっているので、わざわざ観覧率の低いパソコン表示にこだわる必要がないからです。
むしろ、パソコン表示の速度は問題なくて、モバイルだけの表示速度が悪いことが多いので、必ずモバイルをメインとして確認することを強くおすすめします。
パフォーマンススコアの内訳は以下のようになります
・0〜49（遅い）：赤
・50〜89（平均）：オレンジ
・90から100（速い）：緑
もしも、赤い表示になっていたら即改善が必要なレベルです。
私のホームページではオレンジレベルなので、まだまだ改善の余地がありそうですが、これからも引き続き対策をしていく必要がありそうですね。
ホームページ表示スピードの改善の仕方
では表示スピードが測定出来たところで、次の改善方法ですが、これもPageSpeed Insightsサイトでは、ご丁寧に表示してくれます。
最初の画面から下にスクロールをしていくと「改善できる項目」というのが出てきます。
ここには、表示スピードを改善できるポイントが表示されており、一番上に表示されているのが、表示スピードに最も影響を与えている項目になります。
なので、改善していくなら一番上から順番にしていくことで、効果的な改善が見込めます。
そして、それぞれの項目でもさらに詳しくPageSpeed Insightsサイトでは、表示してくれます。
例えば、私のホームページですと「次世代フォーマットでの画像の配信」というのが一番上に表示されているので、ここの項目をクリックすると詳細が出てきます。
改善の方法なども詳しく解説してくれているので、ここに記載されている通りにしていけばOKです！
画像データが重ければ、圧縮してサイズを小さくしてあげたり。
画像データの圧縮はオンラインでも行えますのでTinyPNGという無料サイトが結構な圧縮率で小さくしてくれますのでおすすめです。
ただし！ここで注意！
私のホームページでは、「PNGやJPEG」よりも「WebP」などを使用した方が圧縮性能が高くて効果的ですよ～っと教えてくれているのですが、この「WebP」はまだ様子を見たほうが良さそうです。
何故なら「WebP」では非対応ブラウザが存在しており、IEとSafariはMac版・iOS版といった所での表示が非対応なので、今はまだ「WebP」に変えることは無いかなという判断ですが、この先、非対応が解消されたら導入をしていこうと考えています。
というように、PageSpeed Insightsサイトでの改善項目を何も考えずにガンガン対策をしていくとホームページ自体に影響を与えてしまいかねませんので、ここは改善対策をする前に一度ググっのがおすすめです。
実際に激遅だった自社サイトを改善
開業当初の頃では自分のホームページでは、表示スピードとかあまり気にせずに運営をしていたのですが、何気にスマホで自社ホームページを観覧しようと表示したところ「なんか遅い。。。」という、ちょっとした違和感で表示スピードを調べてみることにしたのですが、その結果がホントに激遅状態でした。。。
表示スピード「７」って。。。超やばいですよね(笑)
いやいや今でこそ、笑えて解説できますが当時は笑えない状態で、これを見たときには、もうすぐに何とかしなくちゃ！！という感じで緊急事態でしたよ。
こんな状態から今のこれ
表示スピード「64」までに改善！
なかなか頑張った方ではありませんか。もちろんまだまだ改善できる項目は残されているので、今後も改善をしていく予定ですが、このなんとか問題ないところまで持っていくまでに私がしたことは、とっても簡単なことです。
それは、「画像の圧縮」です！
これをひたすら、やりまくりました。
PageSpeed Insightsサイトに表示される改善項目の一番上の順から、重い画像データを圧縮しまくりまして、画像表示が悪くならない程度のギリギリまで圧縮をしました。
これをひたすら、やり続けただけです(笑)
とっても簡単ですよね。
ただし、かなり地道な作業になるので、画像データが多いと苦戦するかもしれませんね。
この赤いレベルになっている大体のホームページでは、画像データが影響していることが、ほとんどですので、表示スピードをオレンジレベルまでに持っていくのは、そう難しい事ではないと思います。
後は地道にやるかやらないかだけですね。
やり過ぎはよくないけどレッドゾーンからは抜け出そう
ここまでで、一通りのホームページ表示スピードの測定と改善方法を紹介しましたが、１つ注意して欲しいことがあります。
途中にも注意ポイントとして、紹介した「WebP」のような、まだ未対応のブラウザがある画像データでしたり、その他にも表示スピードを改善することでホームページ自体に悪影響を与えてしまう事も中にはあるので、改善項目の全てを行うまでは、しなくても良いと思います。
表示スピードは改善されたけど、ホームページ自体のコンテンツがスカスカになった。。。
という事になってしまっては、いくら表示スピードが改善されても中身が無いホームページになってしまっては意味がありませんので、ほどほどの改善にした方が良いと思います。
目安としては、とにかくレッドゾーンからは抜け出してオレンジゾーンぐらいには、したいところですね。
そうすれば、最初に紹介したこの直帰率
2秒以内・・・直帰率9％
3秒以上・・・直帰率50％
6秒以上・・・直帰率90％
これを2秒以内には持っていけると思いますので、まずはこの部分だけでもクリアはしておきたいところです。
せっかく訪問してくれたユーザーを逃さないように無料で使えるPageSpeed Insightsサイトを利用してホームページの表示スピード改善に役立ててください。
それではまた！
