今日から意識!HPの表示速度の重要さと測定方法を知ろう!

みなさんこんにちは。
内定者の本山です。

みなさん普段様々なwebサイトを閲覧していると思うのですが、
閲覧したいサイトURLをクリックしてから表示までの時間が長くてイライラ、なんてことはありませんか?

私はサイト表示まで長い時間待たされると、
もういいやとサイトを開かずに離れることも多いです。

サイトを見ずに離脱…これが自分の運営しているサイトだったらどうでしょうか?
せっかく来てくれたお客様を目の前で逃すというもったいない事態になりますよね。

また、webサイトの表示速度は、お客様の利便性のほかに、SEOにも関係しているらしいのです…

今回は意識をするのを忘れがちなwebサイトの表示速度の重要性と測定方法ついてご紹介します!

表示速度が遅いとどのような影響がある?

サイトの表示速度が遅いのは、月末で通信制限がかかってる…などお客様のご利用のネット環境ももちろん関係するのですが、
そのサイト自体に原因があるかもしれません。

表示速度が遅いことで発生する影響をいくつか挙げてみました。

顧客満足度(CS)が下がる

せっかく見に来たのに表示速度が遅いといちいち時間がかかってイライラしてしまいます。
実際の店舗でもweb上でもお客様をお待たせしないことはお客様への大切なサービスの1つです。

検索順位に関わる

webサイトの表示速度は、軽微ですがgoogleやFacebookの検索順位に関わる要素になっています。
SEO対策のためにも表示速度をチェックし改善する必要があります。

アクセス数の低下、離脱率が高くなってしまう

このサイト重いな、イライラするなと思ったらお客様はそのサイトから離脱してしまいます。
think with googleの調査によると表示速度が1秒の時と6秒の時を比較すると、
6秒の時は離脱率が90%も高まるとのことです。

コンバージョン獲得数の低下、売り上げの低下

上記の顧客満足度や検索順位、離脱率が影響し、
最終的に一番大切なコンバージョン獲得数や売り上げも低下してしまうかもしれません。

いかがでしょうか?

上記をみるとwebサイトの表示速度の重要性が分かると思います。
遅いと様々なデメリットがありますが、逆に考えると早ければメリットになるはずです!

次はwebサイトの表示速度を計測する方法を紹介致します。

自分のWebサイトの表示速度を計測するツール

webサイトの表示速度の重要性はなんとなく分かっていただけたかと思うのですが、
実際の速度や、その良し悪しはどのように確認すればよいのでしょうか?

それを確認できるのが「ページスピードインサイト」というサイトです!

▼「page speed insights」

page speed insights

googleが提供するサービスで、モバイルサイトとPCサイトの測定のどちらにも対応しています。
page speed insightsでは以下の点を確認することができます。

・表示速度(スコア表示)
・最適化レベル(スコア表示)
・サイトの読み込み分布
・修正の必要性を3段階表示
①サイトの統計情報
②最適化についての提案
③適用済みの最適化

速度測定だけでなく、改善方法の提案までしてくれる優れたツールです。

そしてもう1つがこちら

▼Test My Site

Test My Site

こちらもgoogleの提供で、2017年にリリースされた比較的新しいツールです。
以下の点を確認することができます。

・読み込み速度(秒数)
・訪問者の推定離脱率
・無料レポート(テスト結果の詳細情報)
・同じ業種内の比較
・表示速度を上げる改善案

計測できるのはモバイルサイトのみですが、
有効な情報をたくさんくれる非常に優秀なツールです。

近年はモバイル部門が発展してきていますし、使用頻度も増えるかもしれませんね。
こちらのツールもぜひチェックしてみてください。

今回はモバイルサイトとPCサイトの測定どちらにも対応している「page speed insights」を使った方法をご紹介します。

早速使ってみましょう!

 

Webサイトの表示速度の計測方法と確認すべき改善案

先ほども触れましたが、今回はモバイルサイトとPCサイトの測定どちらにも対応しているpage speed insightsを使った方法をご紹介します。

計測方法は本当に簡単です!
調べたいwebサイトのURLを張り付けて、右の分析ボタンを押すだけです!

少し待つと結果が出てきます。各項目を確認していきましょう。

表示速度・最適化レベル

まずは表示速度(スコア表示)と最適化レベル(スコア表示)の現在の状態を確認しましょう。
良くても悪くても、現状を知るのが改善への第一歩です。

修正の必要性を3段階表示

①サイトの統計情報

ラウンドトリップ回数(ページを読み込むまで通信相手と信号やデータをやりとりした回数)や
レンダリング(受信したデータ通りにページを表示すること)に必要なバイト数など、現在の値と改善すべき値が書かれています。

②最適化についての提案

サイトを最適化するための改善案が表示されます。
詳細を開くと具体的な情報や改善方法が書いてあり、非常にわかりやすいです。
これに沿ってサイトを改善していきましょう!

③適用済みの最適化

これから改善すべきところだけではなく、この項目では今できている良いところも教えてくれます。
この部分もしっかり確認し、他のサイトに活かしていきましょう!

そして最後の部分には…

このサイト向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。と表示されている場合があります。
なんとこの文にある通り最適化された画像、JavaScript、CSS のリソースがダウンロードできます。
これがあれば最適化をもっと簡単に行うことができます。
とても便利なので何気なく書いてあるこの文も見逃さず要チェックです。

 

まとめ

いかがでしたでしょうか?
webサイトの表示速度の重要性と測定方法ついて理解していただけたでしょうか?

意識するのを忘れがちなwebサイトの表示速度、まずは現状を確認してみましょう。
仮に遅くても、それはよりよいサイトになる伸びしろがあるということです!
ツールをうまく利用して、webサイトの表示速度の改善を始めてみてくださいね!

参考になったらシェアをお願いします!